Interragir avec le DOM
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Maintenant qu'on a vu comment ouvrir une page avec Playwright, on va voir comment interagiravec la page que l'on a ouverte.Pour ça, vous allez voir qu'on a beaucoup de fonctionnalités qui sont directement disponiblesavec Playwright et qui le rendent très facile d'utilisation, et notamment le debugger quiva nous permettre, sans aller même voir la documentation, de voir déjà ce qu'il est
00:00:18 :possible de faire.Playwright, ça va fonctionner avec ce qu'on appelle des locators, donc vous pouvez créerces locators ici, qui vont être des façons de récupérer des éléments sur la page.
00:00:27 :Il y a plein de choses qui sont possibles, on peut utiliser les XPath, on peut utiliserles sélecteurs CSS, mais vous allez voir que la plupart du temps, on n'aura même pasbesoin de se casser la tête, on va pouvoir juste utiliser le debugger pour aller analyserla page et voir ce qu'il est possible de faire avec.
00:00:41 :Donc là, ce que je vais faire, c'est juste ouvrir le debugger de Playwright, donc onl'a vu qu'on pouvait faire un page.pause et qu'automatiquement ça va ouvrir le debugger.
00:00:49 :Ce qu'on peut faire également, c'est rajouter une variable d'environnement, alors on peutle faire directement dans le terminal ici, avant de lancer mon script, je peux définirune variable d'environnement pwDebug qui va être égale à 1, et là je vais lanceravec Python 3 le script, donc là c'est javascript scrapping.py, donc je définis la variable
00:01:07 :d'environnement, pw, donc Playwright, debug égale 1, et ensuite je lance le script, etsi je fais ça, vous allez voir qu'automatiquement, on a cette petite fenêtre qui s'ouvre, quiest le debugger, et que je vais pouvoir naviguer dans mon site comme ça, et faire différentesactions, donc là si je continue, si je fais un step over, ça va continuer à la prochaine
00:01:24 :action, là forcément comme je ne fais rien après cette page, ça va continuer à ouvrirla page et fermer le script, je peux aussi changer ma configuration ici si je le souhaitepour ajouter cette variable directement dans les variables d'environnement, donc mettreun point virgule ici, pwDebug égale à 1, et là de cette façon on va lancer notre
00:01:40 :script en mode debug, donc je vais mettre javascript scrapping debug, comme ça on saitquand on lance cette configuration ici qu'automatiquement ça va lancer le debugger de Playwright, doncça c'est une autre façon de faire, là si je continue, de nouveau ça va arrêter,le script est fermé, donc là qu'est-ce qu'on peut faire si on souhaite que le navigateur
00:01:59 :ne se ferme pas, c'est faire le fameux page.pause, je relance le script ici avec le mode debug,et je vais continuer donc faire un step over en cliquant sur cette petite icône pour allerjusqu'au page.pause, là le script va se mettre en pause, donc là on voit un autre
00:02:13 :script qui est affiché, vous pouvez revenir sur votre script principal en cliquant icisur le sélectionneur de fichiers pour revenir sur votre script, et là on voit que la pageest bien posée. Ce que je vais pouvoir faire maintenant donc de très intéressant avec
00:02:25 :ce debugger, c'est utiliser soit cette petite icône pour afficher les selectors, donc c'estun picker qui va me permettre d'afficher les différents locators sur ma page, soit utiliserle bouton record, et ça va être à peu près la même chose sauf que ça va ajouter leslignes qui vont être générées par ce debugger dans un script. Donc je vais déjà vous montrer
00:02:43 :le locator ici, pick locator, on clique, et là vous voyez qu'on peut afficher lesdifférentes lignes de code qui peuvent être utilisées pour récupérer ces éléments.
00:02:51 :Donc si je veux récupérer le bouton, vous voyez que j'ai un get by role bouton avecle name par la suite, donc si je clique ici en fait ce que ça va faire c'est m'afficherla ligne de code ici, je peux la copier ensuite et la mettre dans mon script, et si je fais
00:03:04 :le record qu'est-ce que ça va faire, ça va faire la même chose sauf que ça va écrireces lignes dans un nouveau fichier. Donc si je veux par exemple sélectionner le heading
00:03:12 :ici, je peux cliquer dessus, ensuite je peux cliquer sur la note, ensuite je peux cliquersur le bouton et ensuite arrêter le record, et là vous voyez que ça m'a créé en faitun script avec exactement ce qu'on avait mis ici avec un peu plus de syntaxe autourmais on a bien notre playwright sync API, ensuite il a juste fait une fonction run dedans
00:03:29 :dans laquelle il passe notre instance de playwright et ensuite on a le context manager ici, eton a notre browser avec un nouveau context qui est créé, et ensuite les lignes de codequi nous permettent d'effectuer les mêmes actions que celles qu'on vient de faire etd'enregistrer sur notre page. Donc là on peut copier juste ce qui nous intéresse,
00:03:45 :donc je vais copier juste le page.getByRule bouton et copier tout ça ici, et à la finvous voyez qu'il fait juste un browser.close et un context.close dans ce script. Donc je
00:03:54 :vais arrêter tout ça et là on peut revenir dans notre script, enlever le page.pause iciet juste mettre la ligne qu'on a copiée donc page.getByRule bouton name égale récupérer
00:04:04 :les livres secrets. Là bien sûr on peut le faire en différentes étapes, on pourraitenlever le .click et déjà faire une variable bouton et ensuite vérifier est-ce qu'on a
00:04:11 :un bouton et si oui faire un bouton .click par exemple et ensuite on pourrait faireun page.waitForTimeout ici, on va mettre 10 secondes pour attendre. Je vais relancer
00:04:20 :mon script cette fois sans le mode debug donc je vais enlever le pwdebug de ma configuration,ce que je fais généralement c'est dupliquer cette configuration, enlever le debug ici,enlever ma variable et comme ça j'ai deux configurations, la variable ici avec le pwdebuget la configuration sans et comme ça je peux choisir entre l'un et l'autre. Donc là je
00:04:38 :vais le lancer sans le debug, je relance le script et on va voir qu'on ouvre la page,on clique direct sur le bouton et on a bien les deux livres qui sont affichés et ensuiteon attend 10 secondes et on va fermer le navigateur. Donc je peux effectivement pour bien m'assurer
00:04:51 :que tout est fermé à la fin faire un browser.close sinon notre navigateur n'est pas correctementfermé et il faut qu'on arrête le script pour bien tout fermer. Donc vous voyez là
00:04:59 :c'est assez rapide, on a tout qui se déroule en quelques millisecondes, là je peux refaireun page.waitForTimeout ici de une seconde par exemple pour voir un peu moins rapidement
00:05:07 :ce qui se passe et là vous voyez qu'on ouvre la page, on attend une seconde, on cliquesur le bouton et ensuite on attend 10 secondes et on va fermer la page et le navigateuren fait avec notre browser.close. Hop et là on est sorti du script puisqu'on a fermé
00:05:20 :le navigateur. Donc vous voyez c'est très très facile comme ça de récupérer deséléments, on va voir dans d'autres parties tout ce qu'on peut faire, là on a le getByRulequi permet de récupérer des éléments sur la page en fonction de leur rôle donc parexemple des boutons, des liens, des boîtes de texte etc et on va pouvoir cibler spécifiquement
00:05:38 :ces éléments avec des filtres. Donc là on a entré le name qui indique que le boutondoit avoir ce nom ici sur le bouton. Si on va voir la page donc si je fais un clic droit
00:05:47 :sur le inspect et que j'affiche ce bouton vous voyez qu'on a aussi un ID donc on vavoir dans les prochaines parties qu'il y a beaucoup de façons différentes de récupérerles choses mais là avec le debugger vous voyez que c'est déjà une première façonsans avoir besoin d'ouvrir la doc de voir qu'est ce qu'on peut faire pour commencer
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
