Comment générer du code de test avec Playwright

Bonjour à tous,

Aujourd'hui, vous allez apprendre à générer le code pour vos tests.

Tout d'abord, vous devez exécuter l'application, alors tapez dans votre terminal npm run dev , et votre application sera opérationnelle à l'adresse http://localhost:5173 .

Vous devez maintenant exécuter le générateur de code Playwright. Pour ce faire, vous devez ouvrir un autre onglet dans votre terminal et taper npx playwright codegen . Cette commande ouvre un nouveau navigateur et l'inspecteur Playwright.

Maintenant, le navigateur affiche un onglet vide et l'inspecteur Playwright est sur une nouvelle page, prêt à écouter ce que vous allez faire dans le navigateur. Si vous allez dans la barre d'adresse du navigateur et tapez http://localhost:5173, vous pouvez remarquer que quelque chose a changé dans Playwright Inspector. L'inspecteur a noté le changement de page et a ajouté cette étape au corps du test.

Maintenant, vous pouvez cliquer sur une case et simuler une partie entre deux joueurs, vous pouvez remarquer que l'inspecteur enregistre toutes ces étapes et crée pour vous le corps du test. Le résultat de ces actions est ceci

 test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

Comme vous pouvez le voir, le code généré est bon mais pas parfait, veuillez donc utiliser cet outil avec la tête sur les épaules et vérifier le résultat à chaque fois pour vous assurer de la valeur de votre test.

Il est maintenant temps de copier et coller le code dans notre fichier de test et d'améliorer son contenu.

Commençons par changer le nom du test de test en should win the player "X" et en changeant la valeur goto de http://localhost:5173/ en / car notre racine de base correspond à la page d'accueil.

Ensuite, refactoriser le premier clic est probablement un bon refactor pour améliorer le test, vous devez donc changer la ligne de await page.locator('._Square_pba4r_1').first().click(); pour await page.locator("button:nth-child(1)").click(); et enfin et surtout, ajoutez l'assertion. Dans ce cas, si le nom du test should win the player "X" la meilleure affirmation ressemble à ceci

 const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

Ainsi, le code essaie d'obtenir le paragraphe avec le texte gagnant et vérifie si la valeur contient la valeur X Le résultat final est ceci

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Maintenant, vous pouvez exécuter le test et vérifier le résultat qui devrait être vert.

Ok, je pense que tout vient de la génération de code.

Dans cet article, vous avez appris à enregistrer vos étapes et à les convertir en code pour vos tests. S'il vous plaît, comme je l'ai déjà dit, utilisez cet outil de manière responsable et vérifiez le code généré à chaque fois.

C'est ça, les gens.

A bientôt 👋

ps vous pouvez trouver le résultat de cet article ici