Discussion :

[yann123456]

Bonjour,

Avec puppeteer, j’essai de me connecter au site de ma banque afin de récupérer des informations me concernant.

L’url pour se connecter est celle-ci est h***s://www.credit-agricole.fr/ca-illeetvilaine/particulier/acceder-a-mes-comptes.html

Je parviens bien à me rendre sur la page, à entrer mon identifiant et le valider, mais ensuite je dois taper mon code personnel sur un clavier virtuel.
Dans le code de la page, on voie que pour chaque chiffre sur le clavier virtuel il y a un lien avec une div à l’intérieur qui affiche le chiffre auquel le bouton correspond.

Le code ci-dessous me permet de récupérer chaque bouton, sur lesquels je devrais juste avoir à boucler pour trouver les chiffres de mon code personnel un par un et cliquer dessus pour faire mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
let data = '';
try {
  data = await page.evaluate(() => {
    const as = Array.from(document.querySelectorAll('#clavier_num a'))
    return as.map(a => a.outerHTML)
  });
} catch (error) {
  erreur.afficher(error, "Erreur");
}
console.log(data);

Mon problème, c’est que ce code me retourne ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="Login-key T031__key" tabindex="15" role="button"></a>

Je n’ai pas la div à l’intérieur da la balise a qui me permettrais de savoir à quel chiffre correspond ce lien.

Il devrait par exemple, me retourner ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="Login-key T031__key" tabindex="15" role="button"><div data-pos="0">3</div></a>

Dans ce cas, je sais que c’est le chiffre 3 et cela correspond bien au code dans le dom.

Quelqu’un saurait-il où est mon erreur ?
Pourquoi outerHTML ne me retourne pas la div présente à l’intérieur de la balise a ?

Je suis preneur de toutes suggestion pour avancer.

Pour tester, vous pouvez taper 11 chiffres au hasard pour l’identifiant et valider ensuite vous verrez le clavier digital pour le code personnel.

Merci

[Doksuri]

salut, que donne l'utilisation de innerHTML ? developer.mozilla.org/fr/docs/Web/API/Element/innerHTML#notes_dutilisation

La propriété innerHTML peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.

[yann123456]

Bonjour,

innerHtml me retournais une chaine vide (de mémoire).
J'avais essayé pas mal de combinaisons.

J'ai résolu mon problème hier soir.
En fait au chargement de la page, le clavier est masqué mais existe dans le code.
Par contre, il n'y a pas la div avec les chiffres à l'intérieur des liens.
C'est ce code que je récupère et c'est pour cela que je n'avais pas les chiffres du clavier.

La div est ajouté aux liens du clavier uniquement lorsque l'on valide le numéro de compte.
Il me fallait donc écouter ce changement dans le code du clavier, afin de récupérer le code après la mise à jour.

J'ai trouvé ce code sur internet qui permet de détecter un changement et je l'ai adapté à mon cas :
Je le pose ici, il peut servir à d'autres (source : https://www.codegrepper.com/code-exa...element+change)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
const puppeteer = require('puppeteer');
 
(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.exposeFunction('onCustomEvent', text => console.log(text));
  await page.goto('https://www.time.ir', {waitUntil: 'networkidle0'});
  await page.evaluate(() => {
    $('#digitalClock').bind("DOMSubtreeModified", function(e) {
      window.onCustomEvent(e.currentTarget.textContent.trim());
    });
  });
})();

Merci