Au cours de la dernière période, dans l'écosystème frontal, un nouvel outil e2e est apparu et il a commencé à devenir célèbre ; son nom est dramaturge. Dans cette courte série, je veux vous laisser quelques informations à ce sujet et des conseils sur la façon de commencer. Qu'est-ce que c'est? Commençons par ce qu'est Playwright. Playwright est un framework de test pour gérer les tests e2e. Avec Playwright, nous pouvons écrire des tests e2e et les exécuter dans différents navigateurs, comme Chrome, Firefox et Webkit. Nous pouvons exécuter nos tests sur de nombreuses plateformes comme Windows, Mac, Linux ou CI, et nous pouvons écrire des tests en Typescript, Javascript, Java, Phyton ou .Net. Si vous ouvrez le officiel , vous pouvez trouver ces caractéristiques : site N'importe quel navigateur N'importe quelle plate-forme Une API Résilient Pas de tests floconneux Aucun compromis Aucune limite Isolement complet Exécution rapide Outillage puissant À mon avis, l'outil reflète toutes ces caractéristiques. Application Tic Tac Toe Je souhaite utiliser une application TicTacToe construite avec vite + react dans cette série. Et vous pouvez le trouver . ici Comme vous pouvez le voir, l'application est simple, mais avec elle, nous pouvons commencer à passer aux premiers pas avec Playwright. Installer le dramaturge La première étape pour utiliser Playwright est de l'installer, c'est facile. Ouvrez votre terminal et tapez (j'utilise npm mais si vous voulez utiliser yarn ou pnpm lisez les ). Ok, maintenant l'installation vous pose quelques questions : npm init playwright@latest docs Où mettre vos tests de bout en bout ? L'option par défaut est mais je préfère utiliser le dossier . tests e2e Ajouter un flux de travail GitHub Actions ? L'option par défaut est ; dans cette démo, je laisse cette option sur false pour le moment. false Installer les navigateurs Playwright (peut être fait manuellement via 'npx playwright install') ? L'option par défaut est , et j'ai utilisé cette valeur true et maintenant vous devez attendre la fin de l'installation. Une fois l'installation terminée... félicitations, vous êtes prêt à vous salir les mains avec Playwright ! Premier coup d'oeil L'installation crée dans votre repository 3 nouveaux fichiers : dramaturge.config.ts e2e/example.spec.ts tests-exemples/demo-todo-app.spec.ts Commençons par le dernier, le plus simple 😊 Ce fichier contient une liste d'exemples de la façon dont vous pouvez écrire des tests avec Playwright. Il utilise une application créée par l'équipe de dramaturges (une application simple à faire) et illustre comment vous pouvez interagir avec votre page. Continuons avec le second. Ce fichier est un exemple rapide de certains tests sur le site Web du dramaturge, mais il est ici uniquement en tant qu'espace réservé pour vos tests. Et maintenant, le premier, le plus important. Playwright utilise le fichier pour comprendre sa configuration. À l'intérieur, vous pouvez trouver des configurations sur le dossier de test, le délai d'attente utilisé par la fonction expect, les configurations des navigateurs utilisés par Playwright pour exécuter les tests, etc. playwright.config.ts Exécutez votre premier test Il est temps de voir Playwright en action, alors ouvrez à nouveau votre terminal et exécutez la commande suivante . Le résultat est quelque chose comme ça npx playwright test Le dramaturge dans ce rapport vous montre le résultat de son exécution, et vous pouvez vérifier si tout s'est bien passé. Le rapport montre le résultat pour chaque navigateur indiqué dans la configuration, dans ce cas : Chromium, Firefox et Webkit. Rédigez votre premier test Ok cool, mais maintenant il est temps pour vous d'écrire votre premier test avec Playwright. Avant de faire cela, vous devez configurer Playwright pour pouvoir exécuter votre application avant de commencer les tests. Pour ce faire, vous devez ouvrir le et ajouter la configuration suivante playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; vous devez utiliser le même port exposé par vite. NB vérifiez votre port en exécutant la commande npm run dev Et maintenant, il est temps pour votre premier test. Ouvrez le fichier et renommez-le en . Ensuite, nettoyez tout dans le fichier et ne laissez que la ligne d'importation . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts import { expect, test } from "@playwright/test"; Ajoutez maintenant votre premier test test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); ok, voyons ce test ensemble. Tout d'abord, vous pouvez indiquer à Playwright qu'il s'agit d'un test en utilisant la fonction . Comme dans tout framework de test, le premier paramètre de la fonction de test est le nom du test. Le deuxième paramètre est la fonction pour tester notre application. En utilisant Playwright, cette fonction est toujours une fonction asynchrone car vos tests dans ces cas sont toujours asynchrones. La première commande de cet exemple est une commande à dire à Playwright pour accéder à la page d'accueil de notre application. Comme vous pouvez le voir, cette commande est déjà asynchrone. Maintenant, si le test peut naviguer vers cette page, vous voulez tester si le titre de la page est "Tic Tac Toe". Oui, c'est élémentaire, mais un excellent exemple de déplacement de votre premier pas. test Maintenant, il est temps de vérifier si le test s'exécute dans Playwright, mais avant cela, vous pouvez simplifier l'interaction avec Playwright en ajoutant un nouveau script dans le package.json, comme indiqué ici .... "scripts": { ... "e2e": "playwright test" }, Maintenant dans votre terminal, vous pouvez taper et le tour est joué, votre test est parti ✅ npm run e2e En ajoutant un autre script dans votre package.json, vous pouvez ouvrir le résultat du rapport dans votre navigateur .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" }, Et maintenant, si vous exécutez la commande dans votre navigateur, vous pouvez voir le résultat de votre premier test. npm run e2e:report Ok, je pense que c'est tout pour le moment. Dans cet article, vous avez appris : Comment installer Playwright Comment exécuter votre test Comment rédiger votre premier test avec Playwright Dans le prochain article, nous continuerons notre voyage dans le monde des dramaturges, mais pour l'instant, c'est tout ! A bientôt, les amis. Bye Bye ps Vous pouvez trouver le résultat de ce post sur ce lien
