Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Dans cette partie, on va aller un peu plus loin avec Playwright puisqu'on va avoir desdifficultés supplémentaires par rapport à ce qu'on a fait précédemment puisque tousles éléments sur lesquels on a cliqué jusqu'à présent avaient des éléments test ID bienidentifiés qui nous permettaient de ne pas avoir plusieurs éléments sur la page qui
00:00:16 :soient ciblés avec notamment cette barre de recherche ici pour la destination, la durée,le nombre de voyageurs ou encore le bouton pour relancer la recherche.
00:00:24 :Là, on va vouloir faire défiler les différents mois de l'année pour pouvoir comparer les prixen fonction du mois de l'année et pour ça on va donc utiliser cette barre ici avec lebouton modifier qui là comme vous le voyez est déjà beaucoup moins spécifique puisquemodifier c'est quelque chose d'assez générique et ensuite il va falloir cliquer sur des dates
00:00:44 :ici donc le 1 du calendrier, le bouton appliquer qui lui contient peut-être un test ID donc çasera peut-être plus facile sur cette partie là mais voilà là on va rentrer dans le vif du sujetavec un peu plus de défis et une utilisation un peu plus spécifique de Playwright que l'on va devoir
00:00:57 :faire sans forcément passer par le debug view qui ne va pas vous allez voir nous être d'unegrande utilité dans ce cas-ci. Donc ce que je vais faire déjà pour mes tests c'est prendre
00:01:06 :cette url au complet et on va enlever tout ce qu'on fait ici pour se rendre sur cette pagepuisque là on va vouloir aller un peu plus rapidement donc je vais commenter toutes ceslignes ici et je vais juste garder le continuer sans accepter ici pour enlever le bandeau des
00:01:19 :cookies et à la place de cette url je vais mettre donc l'url complète qui nous amène vers la pagesur laquelle on va pouvoir faire nos tests. Je vais commenter également cette ligne même si
00:01:27 :comme je redéfinis l'url ici ça n'a pas tellement d'importance de la commenter ou non mais pour quece soit bien clair je vais quand même le faire. Donc là on va mettre un point de debug ici pour
00:01:35 :arrêter le script comme je vous ai dit je ne vais pas lancer le script en debug ici je vais le faireune première fois quand même pour vous montrer ce que ça donne et voir ce qu'on peut récupéreravec la debug view mais là encore pour avoir préparé la formation je peux vous garantir que
00:01:47 :ça ne va pas donner grand chose. Donc je vais continuer avec le step over ici pour aller surl'url on va accepter avec le continuer sans accepter donc là on se retrouve bien à notrepoint de debug et si je reviens ici sur le playwright inspector je vais pouvoir faire
00:02:00 :un record ou directement cliquer sur le bouton ici pour vérifier les locators. Et là vous voyez leproblème qu'on a c'est qu'on a des choses beaucoup plus spécifiques là notamment on a un get by rulebutton mais le nom c'est arrivé slash départ 1er février point tiré 1 etc vous voyez c'est pas
00:02:18 :très pratique ici parce que ça veut dire qu'il faudrait vérifier à quel mois on est si on est enfévrier prendre les 4 premières lettres du mois etc donc vous voyez que c'est assez pénible pareilsi on regarde ici vous voyez là il y a voyageurs 1 voyageurs donc ça devient des chaînes de
00:02:31 :caractère très spécifiques que l'inspecteur de playwright nous spécifie ici et nous ça ne vapas nous être d'une grande aide. Donc nous ce qu'on va faire à la place c'est plutôt faire un inspect
00:02:40 :donc en faisant un clic droit inspect pour voir s'il n'y a pas des choses un peu plus spécifiquesqu'on pourrait récupérer donc si je clique ici on va aller voir un peu plus par là si on n'a pasdes data test ID par exemple ici vous voyez que sur le div qui contient toute la barre de recherche
00:02:54 :on a un data test ID little search alors je vais grossir un petit peu pour que vous puissiez voirun peu plus le code html donc là voilà data test ID little search ça me plaît un petit peu pluspuisqu'on va pouvoir probablement cibler cet élément et ensuite on voit qu'on a différents
00:03:08 :boutons donc ces boutons peut-être qu'ils ont également des data test ID mais je regarde etça ne semble pas être le cas on a des classes ici qui sont longues comme le bras encore une foisqui ne vont pas beaucoup nous aider mais on voit bien les boutons ici donc le premier bouton qui
00:03:20 :constitue la destination le deuxième bouton pour la date donc c'est ce qui va nous intéresser maisl'intérêt ici c'est que eh bien on va pouvoir cibler des boutons spécifiques avec des fonctionnalitésun petit peu plus avancées de playwright. Donc on va voir ça tout de suite je vais fermer le script
00:03:34 :je vais arrêter mon script ici et on va lancer cette fois ci le script sans le mode debug et àla place de faire du debug dans la petite vue de l'inspecteur playwright on va le faire directementdans PyCharm. Donc je laisse mon point de debug ici je relance tout ça en mode debug bien entendu
00:03:47 :de PyCharm pour qu'il s'arrête ici avant le browser.close et on va faire un petit peu deménage alors là je crois que voilà j'étais en headless true donc je vais l'enlever le headlesstrue ne change rien bien sûr quand vous êtes en mode debug de playwright puisque il va quand même
00:04:01 :afficher la fenêtre même si on le lance en headless ici donc le headless qu'on avait àl'intérieur ici de notre script avec chromium launch quand on passe en mode debug avec lavariante d'environnement et bien ça va prendre effet plutôt que le headless qu'on a spécifiéquand on lance chromium. Donc là je m'assure de bien mettre headless à false puisque là on lance
00:04:19 :le script sans debug et je relance avec le debug de PyCharm cette fois ci. Donc on a bien notrefenêtre ici et le debugger qui s'arrête je vais faire un petit peu de place pour qu'on y voitplus clair et pour qu'on puisse utiliser donc cette partie ici evaluate expression qui va nous
00:04:31 :permettre d'évaluer des expressions dans notre script et de vérifier que ça fonctionne correctement.Donc là si on se souvient bien je vais refaire un clic droit inspect pour retrouver le data testID que j'avais sur cette barre donc ici je me souviens bien est ici voilà donc c'est little
00:04:45 :search tout simplement. Donc je vais faire un premier essai pour vérifier si je peux cliquersur cette barre et ce que je vais faire donc je vais agrandir un petit peu ici pour qu'on y voitbien clair sur toute une ligne je vais faire un get by test ID et on va essayer de cibler le little
00:04:59 :search et ça nous retourne bien quelque chose et on va essayer de cliquer dessus donc je fais unpoint clic tout simplement et là vous voyez que ça clique correctement sur cette barre et que çanous affiche bien l'élément qu'on souhaite ici avec l'affichage des mois. Donc ensuite on va
00:05:13 :vouloir cliquer sur le bouton modifier donc cette ligne ici elle fonctionne on va la garder sous lecoude et on va la mettre dans notre script pour pouvoir la réutiliser plus tard et ensuite ceque je vais faire c'est probablement un get by role qui va me permettre de sélectionner des
00:05:26 :balises html en fonction de leur type donc get by role ça va nous permettre de sélectionner parexemple tous les boutons donc si je fais ça là on va avoir plusieurs locators si j'affiche lerésultat vous voyez qu'on peut prendre le premier le dernier et on peut en cibler un spécifiquement
00:05:39 :aussi avec mth si on veut prendre le premier le deuxième le troisième etc nous ce qui vanous intéresser ici c'est de faire un filtre pour récupérer uniquement les boutons qui ont le textemodifié donc pour ça on pourrait faire un get by texte si je me trompe pas où on peut faire aussi
00:05:53 :un filtre donc avec point filtre et spécifier certaines choses comme par exemple le texteavec has text qui est un paramètre de filtre donc je peux dire par exemple récupère moi dans tousles éléments qui ont un rôle bouton donc dans tous les boutons de la page celui qui a le texte
00:06:07 :modifié donc bien sûr en chaîne de caractère ici et je vais mettre un clic à la fin pour vérifiersi ça fonctionne et que ça clique bien sur le bouton modifier et c'est bien le cas ici on arriveà cliquer et à cibler ce bouton spécifique donc là encore je garde cette ligne pour plus tard et
00:06:21 :ensuite on va vérifier là dans ce cas ci à quoi correspond le 1 donc je refais un clic droit inspectet on va aller voir dans le html si on a quelque chose d'exploitable ici donc là on est avec destd donc un tableau tr td on voit que pour les premiers jours du mois ici comme il n'y a pas
00:06:36 :de jours en fait pour le lundi mardi mercredi jeudi on a des cases vides et ensuite on a un tdavec un rôle bouton et le aria label est assez explicite un vendredi donc ça ça va pas êtretrès utile et ensuite qu'est ce qu'on a ici on a par contre un test id un autre test id qui lui
00:06:53 :est un peu plus sympathique parce qu'on a quelque chose d'assez générique donc calendar day avectout simplement une date formatée donc ça ça me plaît beaucoup puisqu'on va pouvoir probablementl'utiliser et juste incrémenter le numéro du mois ici donc passer de 0 3 0 4 à 0 5 etc et
00:07:07 :cibler ainsi ce bouton donc je vais vérifier qu'on arrive bien à cibler ce bouton avec le data testid ici donc je copie le data test id je me refais un petit peu de place pour y voir plus clair iciet donc on va faire page point get by test id de nouveau et on va mettre le test id avec la
00:07:24 :date donc calendar day 0 1 0 3 2024 et je vais refaire un point clic pour vérifier que ça fonctionnedonc là vous voyez qu'on n'a pas réussi à récupérer le bouton donc qu'est ce qu'il me dit là vousvoyez il me dit qu'en fait il y a eu deux éléments qui ont été retournés avec ce data test id donc
00:07:40 :là vous voyez on a le premier élément et on a le deuxième élément donc ça veut dire qu'on a deuxéléments qui sont retournés alors c'est un petit peu bizarre je sais pas il doit y avoir d'autresboutons sur la page peut-être qu'ils sont deux fois pour des raisons de ux de ui peut-être que
00:07:53 :le bouton est dupliqué donc moi ce que je vais faire c'est tout simplement récupérer le premieren espérant que ça fonctionne donc je vais faire un point first pour récupérer le premier des deuxet faire un point clic sur ce premier élément pour voir si ça fonctionne et ça semble fonctionner
00:08:05 :également puisque le bouton est donc bien sélectionné et ensuite il ne reste plus que leappliqué donc lui je pense que ça va être assez facile on va faire un inspect et je pense qu'onva avoir un data test id dessus donc je vais cibler ce bouton appliqué et qu'est ce qu'on a ici donc
00:08:20 :non bizarrement on n'a pas de test id donc là dans ce cas ci on va probablement devoir juste ciblerlà encore un bouton avec appliqué qui est inscrit dessus donc je vais me refaire un petit peu deplace pour retrouver mon débuggeur de PyCharm et ici on va tout simplement faire un page.get
00:08:36 :alors il y a plein de façons de le faire on peut aussi mettre une expression directement ici enfaisant has text directement à l'intérieur de ce get by role donc on peut récupérer les boutonsqui ont le texte appliqué je valide avec entrée et là ça ne fonctionne pas oui puisque là ce n'est
00:08:52 :pas un get by role ça va être un niveau plus élevé on va utiliser en fait locator donc locator çanous permet de donner des indications que ce soit en css avec un xpat ou plein d'autres choses doncça nous donne un niveau de précision un peu plus spécifique puisque le get by role va
00:09:07 :directement cibler des éléments comme les boutons les liens les images etc le test id va ciblerspécifiquement l'attribut test id le locator c'est en fait qui est utilisé en arrière-plan par playright quand vous utilisez get by role, get by test id etc d'ailleurs on peut peut-être aller voir le
00:09:23 :code source de ces éléments et effectivement vous voyez le get by test id ici tout ce qu'il faitc'est tout simplement retourner un locator spécifique donc là on peut nous utiliser celocator très spécifique également comme on l'a vu précédemment on pourrait faire un get by roleet ensuite un filteur moi je vais essayer directement ici avec le has text c'est juste
00:09:40 :pour vous montrer différentes façons de faire et vous montrer la flexibilité de play right doncj'essaye avec ça je valide avec entrée donc là vous voyez qu'on a de nouveau plusieurs élémentsje pense query selector all donc ça c'est du beautiful soup pour ceux qui connaissent c'estce qui est utilisé je pense en arrière-plan aussi et là je pense que c'est le has text qui
00:09:59 :n'est pas bon donc si je me trompe pas c'est has tiré texte comme ceci on va finir par y arrivervoilà j'ai bien trouvé c'est ça finalement donc has tiré texte je valide avec entrée et là on abien cliqué pour appliquer donc normalement on a tout ce qu'il faut ici je vais prendre cette ligne
00:10:13 :de code également et la copier ici donc on a bien le clic sur le little search qui va cliquer sur labarre en général le clic sur le bouton qui a le texte modifié donc là comme vous le voyez je vaisfaire un petit peu de place pour qu'on voit tout sur la même ligne on a ici un get by role qui nous
00:10:27 :permet de cibler spécifiquement les boutons et ensuite un filtre avec le has text et là uneautre façon de faire avec le locator en ciblant directement les boutons également qui ont letexte appliqué donc vous voyez différentes façons de faire la même chose avec play right donc onva tester tout ça on va se rendre sur notre page là je pense que alors on a juste pas ciblé on a
00:10:46 :oublié de mettre le la ligne qui va cibler le premier élément donc ça c'était un data testID donc je vais refaire un inspect là dessus je vais vérifier et là on avait voilà le calendarday donc on va tester on va prendre le lien qu'on avait qui je pense dont je me souviens plus
00:11:01 :exactement à quel mois on commençait je vais prendre tout ça ici je vais aller le remettredans la barre donc là on était je crois 1er février au 1er mars donc là ça veut dire quesur le mois ici on va être au 1er donc 1er février nous on veut passer au 1er mars donc 0 1 0 3
00:11:16 :donc je vais tester ça ici on avait page get by test ID qui était égale donc à calendar day etlà on était sur le 1er mars donc on va faire ça et on va faire un point clic et on va vérifier siavec tout ça on arrive à modifier le mois donc là je vais revenir je pense en mode debug puisqu'on
00:11:34 :va faire du pas à pas pour voir si tout fonctionne bien je pourrais également le faire directementdepuis pycharm ça vous de voir là on a du contrôle sur ce qu'on souhaite faire soit on le faitdirectement depuis pycharm soit avec le petit débuggeur de playwright je vais faire avec
00:11:47 :pycharm en fait donc je vais faire un script without debug je vais arrêter celui là relancertout ça on va s'arrêter ici et je vais mettre ça sur la droite et ça un petit peu plus icipour qu'on y voit un peu plus clair donc là on continue je clique hop on clique bien sur cette
00:12:01 :barre au milieu ensuite on clique sur le bouton modifier c'est parfait ça ouvre le sélectionneurde date on va récupérer le 1er mars et là on a une petite erreur je pense alors oui effectivementc'est qu'on a oublié de récupérer le 1er élément puisque si vous vous souvenez bien là voilà j'ai
00:12:17 :oublié de le mettre on récupérait le 1er élément puisqu'on avait deux éléments avec ce test ID surla page donc on récupère le premier sur lequel on clique donc je vais relancer tout ça pourvérifier je mets ça sur le côté je mets mon pycharm ici et on relance tout ça donc je continue
00:12:31 :je clique sur la barre je clique sur le bouton modifier je clique sur le 1er élément et là onsemble avoir encore un petit problème donc je vais continuer on a encore une erreur donc làqu'est ce que c'est un timeout alors c'est bizarre un timeout dans ce cas-ci c'est un peu surprenant
00:12:45 :je vais essayer voir si c'est pas juste une erreur de connexion un problème de connexion donc je vaisme rendre jusqu'au locator ici jusqu'après donc je vais enlever ce point ici je vais aller jusqu'aulocator je vais arrêter le script et le relancer et on va voir si ça fonctionne donc on clique
00:13:00 :on clique et là non ça ne semble pas fonctionner donc on n'arrive pas à cliquer sur le test IDdonc je retourne voir ici modifier on inspecte cet élément et là on a bien normalement donc datatest ID calendar et on a donc plusieurs éléments comme celui ci donc je le sélectionne donc il est
00:13:17 :bien ici je vais vérifier en faisant un filtre donc on a bien deux sur deux voilà donc on a le premierle deuxième qui se trouve je ne sais où mais on en a bien un qui est ici voilà avec le calendartest ID donc ça devrait être bon on est sur un div donc qu'est ce qui ne fonctionne pas ici on va
00:13:36 :en profiter pour faire un petit peu de debug pour voir ce qui peut ne pas fonctionner doncfinalement je vais enlever mes points de debug et je vais relancer avec le debug de playwrightje le relance cette fois ci donc sans le debug de PyCharm mais avec le debug de playwright et
00:13:50 :on va faire du step over pour vérifier si on peut récupérer cet élément avec le debugger deplaywright donc je continue là on clique bien sur cet élément on va bien cliquer sur le boutonet là donc c'est ici qu'on a un problème donc je vais utiliser mon petit sélecteur et je vais
00:14:06 :cliquer dessus et là vous voyez qu'on a donc un get by test ID qui ne me plaît pas beaucoup là on avoilà des dates on a quelque chose de très précis donc voilà si je clique là dessus moi ça meplaît pas beaucoup modèle container avec le 1 vendredi mars j'ai pas envie de devoir deviner
00:14:21 :ou calculer en fait quel est le premier jour du mois de chaque mois plus la date ici en textedonc je vais je vais refaire un inspect là dessus pour voir quand même je pense que je vais refaireun petit debug après donc je vais inspecter ici le 1 on est bien toujours avec notre data test ID
00:14:38 :avec le calendar day et qui doit apparaître donc deux fois si je me trompe pas alors on va vérifiers'il apparaît donc là il apparaît même trois fois alors ici on a un truc un petit peu bizarrepremière fois deuxième fois qu'il apparaît et troisième fois qu'il apparaît et là on a bien
00:14:54 :un div à l'indérieur d'un td donc ça semble exactement le même dans les deux derniers cassauf que celui là ici je ne sais pas à quoi il correspond là il ne me surligne rien et là on abien le le 3 sur 3 qui correspond au bouton donc en fait plutôt qu'un first je pense que je vais
00:15:10 :tester avec un last puisque l'on récupère le premier élément mais vous voyez des fois il yen a deux des fois il y en a trois et finalement ça semble être le dernier plutôt qui correspond àcelui qui nous intéresse donc je vais remettre un point de débug ici je le relance sans le
00:15:23 :débug de playwright juste avec le débug de pycharm pour voir si on arrive à se rendre jusque là donclà on clique on clique on clique et ça semble bon là on a réussi à cliquer sur le bouton donc jepense que c'était vraiment juste ça en fait c'est que je récupérais le premier qui semblait ne pas
00:15:37 :toujours être le bouton alors que le dernier ça semble être le bon et ensuite donc le boutonappliqué alors je vais continuer avec le script ici on continue avec le step over là j'ai biencliqué sur appliquer et ensuite il ne reste plus que le bouton rechercher qui si je me souviens
00:15:51 :bien voilà on l'a ici donc je vais le remettre et on va le mettre à la fin donc on va lancer notrescript quelques fois on va faire une méthode un petit peu empirique on va relancer notre scriptplusieurs fois pour vérifier qu'avec le last ici on arrive toujours à récupérer bien le bon
00:16:05 :élément sur notre page donc je relance le débug on va vérifier si ça clique bien où il faut doncon enlève le pop-up voilà on a bien appliqué et là on est bien rendu au 1er mars 1er avril doncça semble bon je vais le lancer une dernière fois pour m'assurer que ça fonctionne de nouveau donc
00:16:19 :là voilà on clique continuer continuer ça semble bon à chaque fois on est tout bon on revient au1er mars donc c'était ça la solution vous voyez des fois il y a un petit peu d'essais d'erreurcomme ça mais j'espère que cette explication vous permet de voir comment on peut soit avec
00:16:34 :le débuggeur de PyCharm donc directement avec le débuggeur on a la possibilité qui est assezsympa de pouvoir aller dans Thread & Variables ici et d'évaluer des expressions alors que notrescript est ouvert avec le débuggeur de Playwright c'est intéressant aussi mais c'est différentc'est plus pour analyser la page avec des outils de Playwright donc il va nous retourner du code
00:16:52 :de Playwright mais vous l'avez vu dans le cas des dates ça ne nous retournait pas des éléments trèsintéressants ça nous retournait des trucs beaucoup trop spécifiques donc c'est dans ces cas là qu'ilfaut revenir à la base de l'API de Playwright avec les locators, les first, last et tout ce qu'on
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.
