Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir comment installer et utiliser Playwright pour afficher du contenujavascript depuis les sites. Donc la première chose à faire c'est d'installer Playwright,
00:00:09 :donc dans mon logiciel PyCharm, je vais aller dans le terminal et tout simplement l'installeravec pip install playwright, donc tout en minuscules, on valide avec entrée, ça va allerchercher les informations pour les télécharger et ensuite l'installer, voilà, donc ça nedevra pas être très long, et ensuite on va utiliser la commande qui va installer tous
00:00:28 :les navigateurs dont on va avoir besoin pour faire du scrapping, donc c'est cette fameusepartie qui va être beaucoup plus simple à faire avec Playwright, on a juste besoinde faire playwright install, je valide avec entrée, vous allez voir qu'il va aller chercherdifférents navigateurs, on va avoir Chrome, on va avoir Firefox, on va avoir le WebKit,
00:00:44 :donc là encore on a un peu moins de choix qu'avec d'autres bibliothèques comme Selenium,mais franchement moi personnellement je n'ai jamais eu besoin d'utiliser d'autres navigateursque ces deux ici, donc Chrome ou Firefox, généralement j'utilise la version de Chrome,qui est de toute façon Chrome qui fait fonctionner la plupart des navigateurs sur le marché,
00:01:03 :à part Firefox qui, si je ne me trompe pas, et je pense que c'est pour cette raison qu'iltélécharge également Firefox, utilise une autre technologie propriétaire, mais sinon la plupartdes navigateurs derrière c'est du Chromium. Donc une fois qu'on a installé tout ça,
00:01:15 :on va pouvoir utiliser ces navigateurs, on n'a pas besoin de faire quoi que ce soit de plus,et on va voir tout de suite ce que ça va changer au niveau de notre site.
00:01:21 :Donc pour cette partie vous pouvez aller sur docstring.frslash scrapping, vous allez arriver sur cette page très simple qui va juste nous servir d'exemple,dans laquelle on a un livre qui est affiché, et je peux cliquer sur un bouton ici pour récupérer leslivres secrets, et j'ai deux autres livres qui apparaissent. Donc ce genre de manipulation que
00:01:38 :je viens de faire, elle est faite avec du javascript, on a en fait un script qui va allerfaire une requête vers le back-end pour chercher les informations et les afficher sur le front-end,et c'est typiquement le genre d'opération que l'on ne peut pas faire avec request,puisque request va permettre de faire une requête vers une url pour récupérer ensuite le code
00:01:55 :html. Dans ce cas-ci on verra que vous pouvez faire cette requête et l'analyser, en fait analyserquelle requête est effectuée vers le back-end, et essayer de la refaire avec request. Donc c'est
00:02:04 :une façon de faire, de voir quelle requête est effectuée avec javascript pour pouvoir la fairesans javascript en fait, donc directement avec request. Mais si on veut cliquer sur un bouton
00:02:13 :comme je viens de le faire ici, on va être obligé de faire cette action de clic, et c'est ça qu'onva pouvoir faire avec playwright. Pour l'instant je vais juste vous montrer un usage basique de
00:02:21 :playwright, de comment le lancer, comment faire une instance de playwright pour afficher ce site,et vous allez voir également si je rafraîchis la page, que si je désactive le javascript,donc ce que je peux faire en faisant clic droit inspect sur ce navigateur chrome. Si je fais
00:02:35 :commande shift p ou contrôle shift p sur windows, je peux faire disable javascript, et là vous allezvoir que si je clique sur récupérer les livres secrets, ça ne fonctionne plus. Donc vous voyez
00:02:46 :que quand on n'a pas de javascript, on ne peut pas exécuter ce code, et même si on avait avecrequest la possibilité d'afficher un navigateur comme celui ci, c'est vraiment le fait de pouvoirutiliser le javascript qui fait qu'on va pouvoir récupérer ces informations. Donc comme je vous
00:03:00 :dis, soit en cliquant sur le bouton, donc en faisant exactement la même action que celle quel'on ferait comme un humain, soit en allant directement analyser dans network ici, quelleopération va être effectuée. Donc je vais vous le montrer, je vais réactiver le javascript, donc on
00:03:12 :va faire enable javascript, et là si je clique sur récupérer les livres, vous voyez qu'on voitici le point d'api qui est utilisé pour aller récupérer ces informations. Donc on est sur
00:03:21 :books, donc scrapping slash api slash books, on a l'url ici, on a une requête get qui est effectuée,et on a la response qui nous envoie les informations des livres que l'on affiche dans la partie front-end,donc dans le navigateur ici. Donc on pourrait très bien faire cette requête, mais cette requête
00:03:36 :pourrait être bloquée, on va être aussi beaucoup plus facilement identifié comme un bot, parce quel'action humaine à faire pour récupérer ces livres, c'est de cliquer sur le bouton et non pas de fairedirectement avec une librairie comme request cette requête. Bien sûr on peut maquiller les choses
00:03:50 :pour donner l'impression que cette requête est effectuée depuis le front-end, et non pasdirectement à partir de request, mais il y a plein de cas de figure comme ça, des cas notammentbeaucoup plus complexes, dans lesquels on va avoir un intérêt à simuler le plus possible lesinteractions d'un humain sur un site web. Donc pour l'instant je vais juste vous montrer comment
00:04:07 :accéder à ce site avec Playwright. Alors il faut savoir qu'avec Playwright on a deux API qui sontdisponibles, l'API Sync et l'API Async, donc Sync comme ceci et Async comme ceci. Alors la différence
00:04:19 :entre les deux elle est simple, c'est que la librairie Async va permettre de faire des requêtesasynchrone. Nous dans ce cas-ci on va rester sur l'API Sync, parce que ça fait du code qui est plus
00:04:28 :léger et on n'a pas besoin dans ce qu'on va faire, dans tout ce qu'on va faire en fait dans cetteformation, d'utiliser la librairie Async, parce qu'on va faire des requêtes qui vont êtresynchrones, donc qui vont être les unes à la suite des autres, on n'a pas besoin d'en lancer
00:04:39 :plusieurs en même temps. Donc je vais dire from Playwright.SyncAPI, on va importer SyncPlaywright,donc je vais me faire un petit peu de place ici pour que vous puissiez tout voir sur la mêmeligne. Donc from Playwright.SyncAPI import SyncPlaywright, donc on va faire un contexte
00:04:54 :manager avec Weave et on va créer une instance de SyncPlaywright, donc n'oubliez pas les parenthèsesici, et on va la mettre dans une variable qu'on va appeler tout simplement Playwright, et à partirde ça on va pouvoir faire Playwright.Chromium, donc là c'est parce qu'on choisit d'utiliser
00:05:06 :Chromium, sinon vous pouvez également utiliser Firefox, donc là je vais mettre Chromium,et on va faire un navigateur qu'on va lancer avec la commande Launch, et ça on va le récupérer dansune variable que je vais appeler Browser. Donc ça, ça va nous permettre de lancer un navigateur,
00:05:20 :et ensuite on va pouvoir créer une page, parce que là c'est comme si on ouvrait juste lenavigateur sans ouvrir de page, et à partir d'une page par la suite on va pouvoir naviguervers une URL. Donc si je fais juste ça et que je lance mon script, donc clic droit Run JavaScript
00:05:32 :Scrapping, vous allez voir que là rien ne se passe, donc le navigateur est ouvert, et au boutd'un moment quand rien ne se passe il va se fermer, mais on n'a pas de fenêtre qui s'ouvre. Donc pour
00:05:41 :ça il faut créer une nouvelle page, donc on va faire page égale Browser.NewPage tout simplement,et une fois qu'on a la page on va naviguer quelque part, parce que là si je relance le script vousallez voir que rien ne se passe de nouveau, il va falloir naviguer vers une URL pour voir ce
00:05:55 :qu'il se passe. Également on va devoir changer le paramètre, donc le fameux paramètre Headlessqui va indiquer si le navigateur doit avoir une tête ou non, donc Head signifie tête en anglais,donc par défaut il est Headless, donc le Headless ici est à True, alors faites bien attention ça
00:06:10 :peut être confus au début, Headless quand on met Headless à True ça veut dire qu'on souhaitequ'il n'apparaisse pas, donc ça veut pas dire on souhaite avoir un navigateur quand on met Trueici, c'est l'inverse, Headless ça veut dire on va être sans tête, donc on ne va pas voir le
00:06:21 :navigateur. Si vous voulez voir le navigateur il faut mettre le Headless à False, donc je saisque c'est un peu confus au début, une fois que vous avez compris ça va un peu mieux. Donc Headless
00:06:29 :à False, si je relance le script cette fois-ci vous allez voir très rapidement quelque chosequi s'ouvre mais vous voyez ça se referme directement, donc ça c'est parce qu'il vafalloir naviguer vers une page et ensuite attendre un petit peu pour pouvoir voir ce qu'il se passe,donc on a différentes façons d'attendre, je vais vous en montrer plusieurs, donc là je vais faire
00:06:45 :page.goto et on va mettre l'URL de notre site ici en chaîne de caractère et là on va naviguervers ce site. Donc là je relance, ça va être un petit peu plus lent mais vous voyez on a une
00:06:55 :demi-seconde en plus et le navigateur se ferme tout de suite après. Donc ce qu'on peut faireici c'est différentes choses, on peut faire un page wait for timeout, donc ça c'est un peucomme un time.sleep, c'est à dire qu'on va dire attend un certain moment, donc on peut dire par
00:07:08 :exemple 5000 ça va être en millisecondes, donc 5000 ça veut dire attend 5 secondes avant decontinuer et donc de fermer le navigateur. Donc si je relance, cette fois-ci on la voit et on
00:07:19 :remarque que c'est bien un navigateur chrome, si je change ici à la place pour mettre Firefox etque je relance, vous allez voir qu'on va avoir un navigateur qui va ressembler cette fois-ci àFirefox. Donc le navigateur est un peu différent mais vous voyez qu'on a vraiment un navigateur
00:07:32 :comme on l'aurait si on le faisait de notre côté nous-mêmes avec les navigateurs qu'on utilise.Donc je vais revenir sur Chromium et on a d'autres façons d'attendre, on peut faire un page.pause
00:07:41 :et là si je relance vous allez voir que ça va attendre un petit peu et ça va nous ouvrir ledébuggeur ici qui va mettre en pause en fait le fonctionnement du script et ensuite on peutrésumer en cliquant comme dans n'importe quel débuggeur sur cette petite icône de resume et
00:07:55 :là on va continuer avec la suite de notre script. On peut également utiliser le débuggeur de PyCharmdirectement pour mettre un point d'arrêt. Donc là je vais le mettre ici, le script va donc se
00:08:05 :lancer jusqu'à cette ligne, il va exécuter cette ligne et ensuite il va se mettre en pause parcequ'on a mis un point de débug ici. Donc c'est pas parce qu'on a mis page.pause ici, je pourrais
00:08:13 :juste faire un print, ça serait pareil, c'est juste parce que là j'ai mis le point de débug dePyCharm. Donc là pour avoir ça je vais relancer ici en mode débug, donc débug JavaScript
00:08:22 :Scrapping au niveau de PyCharm. Vous pouvez faire bien sûr la même chose avec n'importequel navigateur. Là on voit que la fenêtre a disparu, alors c'est pas qu'elle a disparu c'est
00:08:30 :juste que PyCharm a repris le dessus mais si je vais voir dans la liste de mes fenêtres on voitbien que le chromium est encore là et c'est juste qu'il faut le ramener de l'avant par dessusPyCharm. Et là donc l'intérêt c'est qu'on a le débuggeur de PyCharm donc on peut voir notre
00:08:42 :browser, la page et toutes les autres variables que l'on a à l'intérieur de notre script et on peutentrer des expressions ici si on souhaite les évaluer et faire du débug comme on le feraitnaturellement avec PyCharm. Donc je vais arrêter le script. Donc vous voyez il y a différentes
00:08:55 :façons de faire pour arrêter le script et permettre d'évaluer les choses. On peut fairele page.pause qui va lancer le débuggeur et on va voir qu'il y a aussi d'autres façons de lancer
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.
