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 , et votre application sera opérationnelle à l'adresse . npm run dev 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 . Cette commande ouvre un nouveau navigateur et l'inspecteur Playwright. npx playwright codegen 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 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. http://localhost:5173, 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 en et en changeant la valeur goto de en car notre racine de base correspond à la page d'accueil. test should win the player "X" http://localhost:5173/ / Ensuite, refactoriser le premier clic est probablement un bon refactor pour améliorer le test, vous devez donc changer la ligne de pour et enfin et surtout, ajoutez l'assertion. Dans ce cas, si le nom du test la meilleure affirmation ressemble à ceci await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); should win the player "X" 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 Le résultat final est ceci X 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
