Une introduction au cadre de test de dramaturge

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 site officiel , vous pouvez trouver ces caractéristiques :

• 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 npm init playwright@latest (j'utilise npm mais si vous voulez utiliser yarn ou pnpm lisez les docs ). Ok, maintenant l'installation vous pose quelques questions :

1. Où mettre vos tests de bout en bout ? L'option par défaut est tests mais je préfère utiliser le dossier e2e .
2. Ajouter un flux de travail GitHub Actions ? L'option par défaut est false ; dans cette démo, je laisse cette option sur false pour le moment.
3. Installer les navigateurs Playwright (peut être fait manuellement via 'npx playwright install') ? L'option par défaut est true , et j'ai utilisé cette valeur

4. 
   

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 playwright.config.ts 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.

Exécutez votre premier test

Il est temps de voir Playwright en action, alors ouvrez à nouveau votre terminal et exécutez la commande suivante npx playwright test . Le résultat est quelque chose comme ça

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 playwright.config.ts et ajouter la configuration suivante

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

NB vérifiez votre port en exécutant la commande npm run dev vous devez utiliser le même port exposé par vite.

Et maintenant, il est temps pour votre premier test. Ouvrez le fichier e2e/example.spec.ts et renommez-le en e2e/tit-tac-toe.spec.ts . Ensuite, nettoyez tout dans le fichier et ne laissez que la ligne d'importation 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 test . 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.

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 npm run e2e et le tour est joué, votre test est parti ✅

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 npm run e2e:report dans votre navigateur, vous pouvez voir le résultat de votre premier test.

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