Comment installer Playwright

Bienvenue dans cette vidéo exclusive dans laquelle je vous ai expliqué comment installer Playwright.

Playwright, c'est un outil de test et grossièrement, ce n'est pas uniquement comment installer Playwright, c'est comment créer un environnement de test pour l'application ou l'outil que vous êtes en train de développer.

Donc qu'est-ce qu'on va voir dans cette vidéo?

La première chose, c'est qu'on va voir comment l'installer.

Donc un tuto d'installation, que ce soit sur Windows, Mac, peu importe, ou n'importe quel outil, Codex ou quoi que ce soit, qu'est-ce qu'il faut faire?

Deuxièmement, on va voir quels sont les en fait les obligations d'utilisation ou en tout cas les conseils d'utilisation que moi je vous donne quand vous devez tester une app.

Et troisièmement on va voir le flow, c'est à dire quand vous êtes en train de développer une application avec le webcoding, grossièrement comment est-ce qu'on intègre ça dans le système.

Donc Premièrement, je suis sur cette page que je vous mets en lien.

Cette page-là, c'est Skills, le Skills Playwright.

Donc, on va venir la copier.

Donc, vous allez dans cette barre.

Si vous êtes sur Chrome, votre barre d'adresse, elle est au-dessus, soit à gauche.

Et on fait bien CLI.

On va bien dans le CLI, d'accord?

on va venir copier ça et puis derrière on va aller par exemple dans cloud je sais que vous beaucoup d'entre nous utilisent cloud code version desktop et non pas version un terminal comme je suis en train de faire donc là cette version là je vais la faire sur la version desktop, comme ça, vous voyez une autre facette.

Première chose, je vais choisir un dossier, le dossier dans lequel je vais tester Playwright, typiquement.

Je ne sais pas si vous vous souvenez, j'avais fait, à un moment donné, une application, enfin un jeu, qui était Flappy Bird, qui était un jeu pour tester Flappy Bird.

On va utiliser ça, typiquement.

Et là, je vais tout simplement dire...

Donc moi, je dicte pour pouvoir taper mes comptes.

J'aimerais bien que tu installes le skill Playwright et que tu m'installes le CLI de Playwright.

Alors, si on dit Playwright ou Playwright ou Playwright, ça marche très bien, il comprend très bien.

Voilà, donc on le met bien en automode, comme ça il comprend.

Je vais essayer d'agrandir, mais sachez que si vous êtes en train de regarder cette vidéo, vous êtes certainement sur votre ordinateur, donc ça marche.

Voilà, donc là il va fetcher la doc, il va aller regarder s'il peut installer ça, on va installer ça.

Et en même temps, une fois que ça sera installé, il faut que vous compreniez que du coup, il a un super pouvoir, votre agent Cloud Code, à partir de ce moment-là, un super pouvoir, celui d'ouvrir un navigateur, celui de naviguer, celui de cliquer, celui de faire plein de choses pour vous.

Alors voilà, il installe si jamais il y a des choses qui vous dit du genre vous n'avez pas NPM, vous n'avez pas Node, il faut du coup installer Node.js, etc.

Eh bien du coup demandez de lui de l'installer pour vous aider à l'installer.

Ça arrivera, moi j'ai évidemment un environnement qui est configuré, mais peut-être que vous ce n'est pas le cas.

Donc on attend que l'installation se finisse.

Je vais faire pause.

Ah non, c'est terminé, j'ai même pas eu le temps de faire pause.

Donc c'est bon, il a bien installé le CLI.

C'était déjà installé.

Et il a le skill.

C'est parfait.

donc il dit par il faut restart cloud code to pick it up ça veut dire qu'il faut redémarrer donc là je fais commande q sur mac mais vous pouvez faire alt f4 par exemple sur windows mais en tout cas il faut relancer cloud ou relancer codex ou relancer antigravity selon l'outil sur lequel vous êtes donc je relance j'arrive Et donc me voici du coup sur un nouveau dossier et là je vais lui dire utilise le skill Playwright's CLI ainsi que le Playwright's CLI pour pouvoir lancer mon jeu.

N'oublie pas d'utiliser le Headed Mode et n'oublie pas de m'en faire une vidéo.

Pendant que je fais ça, ça veut dire quoi le Headed Mode?

Alors en fait, il y a deux choses qui selon moi sont importantes, c'est le Headed Mode.

Le Headed Mode, c'est comment est-ce qu'on lance Google Chrome en mode visuel parce que sinon par défaut, il le lance en mode Headless, c'est-à-dire qu'on ne voit juste pas Google Chrome se lancer, ce n'est pas terrible.

Deuxième chose, le fait d'avoir la vidéo peut me permettre à posteriori, dans le cas où on a loupé le truc, de lancer, de revoir la vidéo.

Donc là, moi j'ai Google Chrome qui est lancé là si je ne me trompe pas.

Alors, est-ce que je l'ai?

Ouais, il est là.

Normalement, il est censé se lancer tout seul, donc on attend.

a compris grossièrement comment ça fonctionnait.

Il va regarder s'il a bien Playwright-CLI parce qu'on l'a installé, mais est-ce que Cette version-là, là, il a aussi la version Headed.

Donc là, il va ouvrir un browser.

Bingo, il ouvre le navigateur.

Il va mettre le bon lien dessus.

Je vais le mettre là, comme ça on voit aussi ce qu'il se passe.

Voilà, il me dit attention, il y a un petit problème, serveur up, hop, voilà.

Et là, vous voyez, ma souris elle est là, ici, là.

Donc lui, qu'est-ce qu'il fait?

Il dit voilà, donc c'est parti, en cours d'exécution.

Là, si je vais plus en détail, il me dit exactement ce qu'il fait là.

Et là, il va venir tester là.

Puis moi, je ne lui ai rien dit, il a compris qu'il y a un clic et un espace à faire.

Et il va commencer à tester.

Donc, il dit quoi?

Il dit, OK, j'ai compris maintenant ce qui se passait.

Je crée Play Vidéo, Run Hero Script.

Voilà, lancement du jeu en automatique.

Voilà, donc là, il est en mode automatique.

OK, là, il voit ce qui se passe.

OK.

Donc là, il n'est pas encore en mode auto-apprentissage.

Il apprend juste à utiliser les commandes.

Et il nous fait notre vidéo, pour l'instant.

Là, vous avez vu, hop, Game Over.

Voilà.

Là, pour l'instant, il fait juste ça.

Et vous voyez, il crée une vidéo pour pouvoir le lire.

Donc, il va inspecter la vidéo pour être certain que ça fonctionne bien.

Hop.

Et moi, je vous avoue que c'est la raison pour laquelle je n'aime pas trop l'application desktop parce que je ne vois pas ce qui est en train de se passer.

Donc voilà.

Et là, maintenant, il dit quoi?

Il va faire une exécution où il va prendre toutes les 20 secondes, je crois, quelque chose comme ça.

Donc, il teste avec plein de cas différents en sachant que je lui ai donné juste une chose.

Je lui ai juste donné...

Je lui ai dit test l'application.

Je ne lui ai pas dit devient super fort à Flappy Bird.

mais il va pouvoir en tout cas par la suite si on le prompte bien et si je lui dis écoute ton but c'est de tester par exemple si quelqu'un appuie sur espace 26000 fois etc il va pouvoir le tester.

Pendant qu'il est en train de faire tout ça et enregistrer la vidéo, je vais passer sur le prompt que je vous ai donné tout à l'heure.

Donc le prompt que je vous ai donné tout à l'heure c'est le suivant.

Pour ça je vais ouvrir un navigateur, enfin ça tout simplement et je vais vous montrer.

Donc le prompt, c'est le suivant.

Ce que je vous avais donné dans le prompt tout à l'heure, c'était deux choses.

La première chose, je lui ai dit ouvre le browser avec Playwright, démarre l'enregistrement.

Ça, c'est ce que je vous ai dit.

Et donc là, le mode Headed, c'est ce qui permet d'avoir le fait que Chrome soit visible avant qu'il nous fasse la vidéo.

Les raids de navigation, donc je lui ai dit que dès que tu cliquais sur quelque chose, il fallait que ça se voit, il fallait que tu bouges la souris et ensuite, il fallait que tu fasses juste des clics, des types et des scrolls.

C'est les trois actions dont tu as le droit.

Après, je lui ai dit qu'il faut que tu crées des chapitres entre chaque vidéo, par exemple, et voici les différents chapitres à couvrir.

Donc ça, je lui avais prédéfini des chapitres, mais vous pouvez ajouter autant de chapitres que vous voulez.

Une fois qu'il a fait ça, je lui ai dit de tester la version mobile, de tester une version interactive, et puis surtout d'auditer les liens internes pour être certain qu'il n'y ait pas de lien qui ne fonctionne pas, etc.

Et surtout, la partie la plus importante, c'est celle-là, le rapport final, le rapport final HTML.

Déjà, il finit par closer la vidéo, donc il ferme la vidéo pour qu'elle arrête de s'enregistrer, et derrière, il crée le rapport HTML que je vous ai montré tout à l'heure.

C'est ça le rapport que je vous avais montré, qui n'est plus trop dispo.

Ah si, il est là.

par exemple.

Donc c'est ce genre de rapport et ça c'est le rapport qui a été automatiquement généré.

Le prompt il est très basique pour vous aider à faire ça, mais derrière il faut aller beaucoup plus loin.

Moi j'ai, enfin quand je fais du QA pour moi ou pour des boîtes, en tout cas quand je les coach à le faire, eh bien elles ont des dizaines de rapports par fonctionnalité, par partie du site, par langue, etc.

Et il n'y a vraiment pas d'imagination, enfin pas de limite à l'imagination là-dedans.

Donc voilà, depuis, qu'est-ce qui s'est passé ici?

Il a dit, voilà, j'ai eu un petit problème de gestion.

Voici, j'ai eu 0 debt in 10 seconds, score reached 5.

Ah ouais, waouh!

Donc il a ré-réussi en fait.

Ah si, il a réussi à s'améliorer.

C'est génial.

Voilà, et là je vais lui dire, waouh!

Ok, donc vous avez vu, je n'ai rien demandé.

Là, je suis sur un prompt.

Il a compris l'enjeu, il a compris comment bien tester.

Et puis là, je peux aller lui dire, teste des edge cases.

Donc en fait, j'aimerais bien qu'il teste quelqu'un qui triche par exemple.

Donc quelqu'un qui appuierait différemment, etc.

sur les boutons.

Là, je lui ai rien dit, mais imaginez si je lui avais dit beaucoup plus de choses dans tout ça.

Mais le but de cette vidéo, c'était de vous faire une introduction à tout ça.

Et là, on va juste aller regarder si ça a bien été enregistré.

Donc là, a priori, il y a une vidéo.

Voilà, c'est dans Vidéo, ici.

Donc je vais aller, hop, dans mes dossiers, New Code, et je vais vous montrer.

Donc FlappyBurn doit être quelque part.

Est-ce que c'est celui-là?

De toute façon, il me l'a sorti directement.

Voici la vidéo.

Donc là, il a fait la vidéo pour moi de comment fonctionne Flappy Bird et comment il a testé Flappy Bird avec Playwright CLI.

Et imaginez, vous, qui est en train de tester votre application et que vous êtes en train de lancer et qu'à chaque fois que vous faites une modification, il y a une petite vidéo qui soit faite pour que quelqu'un puisse venir la regarder pour voir si tout se passe bien.

Voilà tout, j'espère que cette vidéo vous a plu.

En tout cas, moi ça me fait hyper plaisir de vous montrer toutes les petites pépites que j'utilise au quotidien.

Moi, je suis très content parce que de plus en plus de gens rentrent dans mon monde de développeur par le billet de via, ce qui est vraiment génial parce que ça donne du pouvoir à beaucoup plus de gens à là où avant il fallait s'associer à des CTO ou à des gens techniques pour le faire.

Et moi, je suis persuadé que chaque personne va monter en compétence, monter son niveau de jeu technique pour pouvoir arriver à faire des choses comme ça.

En tout cas, bravo à vous.

Et à très vite pour des formations, des nouvelles vidéos, etc.

ou du coaching.

Salut!