Qu'allez-vous apprendre dans ce post ? Dans cet article, vous apprendrez à écrire des tests avec Playwright, en utilisant des assertions, des localisateurs, etc. Rédiger des tests Commençons par un exemple test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); Dans cet exemple, j'ai introduit deux nouveautés, et . fait partie des et fait partie des , et maintenant nous allons plonger dans ces nouvelles choses. getByRole toContainText getByRole localisateurs toContainText assertions Localisateurs Les localisateurs sont l'élément central de l'attente automatique et de la capacité de réessayer de Playwright. Les localisateurs représentent un moyen de trouver des éléments sur la page à tout moment. À l'aide de localisateurs, vous pouvez récupérer des éléments dans votre dom à l'aide de ces commandes : à localiser par des attributs d'accessibilité explicites et implicites. page.getByRole(role[, options]) pour localiser par contenu textuel. page.getByText(text[, options]) pour localiser un contrôle de formulaire par le texte de l'étiquette associée. page.getByLabel(text[, options]) pour localiser une entrée par placeholder. page.getByPlaceholder(text[, options]) pour localiser un élément, généralement une image, par son alternative textuelle. page.getByAltText(text[, options]) pour localiser un élément par son attribut title. page.getByTitle(text[, options]) pour localiser un élément en fonction de son attribut (d'autres attributs peuvent être configurés). page.getByTestId(testId) data-testid pour localiser une base d'élément sur sa sélection (Css ou XPath) page.locator(selector) Comme vous pouvez le voir, à l'aide de ces huit commandes, vous pouvez retrouver tous les éléments de vos pages. En regardant l'exemple précédent, vous pouvez voir comment, à l'aide de la méthode , vous pouvez obtenir le paragraphe dans votre DOM, puis vérifier ce que vous voulez. Bon, alors un bref récapitulatif de ce que sont les localisateurs : les localisateurs sont des méthodes qui vous aident à rechercher les éléments dans le DOM. getByRole Assertions Comme tout cadre de test qui se respecte, Playwright a ses affirmations. Les assertions sont utilisées pour vérifier nos résultats et, en tant que développeurs, nous les utilisons pour nous assurer que l'application ou le code s'exécute comme prévu. Le dramaturge pour cette fonctionnalité utilise sous le capot la fonction construite par jest. Donc, si vous êtes familier avec , vous n'aurez aucun problème avec Playwright. Les assertions les plus célèbres que vous pouvez utiliser sont : , , , et bien d'autres. Les assertions sont vos meilleures amies pour vérifier si votre application fonctionne comme prévu. d'attente jest toEqual toContain toMatch toBe Comme vous pouvez l'imaginer, la combinaison de ces deux choses vous permet de construire de nombreux tests pour vérifier les comportements de votre application. Donc, si vous revenez à l'exemple précédent et tapez dans votre terminal, vous obtenez le résultat suivant. npm run e2e npm run e2e > react-e2e@0.0.0 e2e > playwright test Running 6 tests using 4 workers 6 passed (5s) Waouh, ça marche. 😀 Et maintenant vous savez quoi utiliser pour créer vos tests avec Playwright. Isolez vos tests Si vous êtes familier avec les frameworks de test, vous savez probablement qu'il existe un moyen de regrouper une liste de tests. Pour ce faire avec Playwright, vous devez utiliser la méthode exposée par l'objet , comme dans l'exemple suivant. describe test import { expect, test } from "@playwright/test"; test.describe("On View", () => { test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); }); L'avantage du regroupement est également visible dans le rapport qui s'affiche désormais ainsi. Comme vous pouvez le voir, l'étiquette est présente avant chaque test. On View Alors maintenant, vous pouvez diviser votre fichier de test en différents contextes si vous en avez besoin. Crochets Les hooks sont une autre fonctionnalité essentielle si vous aimez travailler avec des frameworks de test. Les crochets vous permettent d'exécuter un morceau de code avant ou après l'exécution du test. En règle générale, ils s'appellent : et vous savez comment ils s'appellent dans Playwright ? Précisément de la même manière 🚀 beforeEach beforeAll afterEach afterAll Ainsi, pour donner un exemple, vous pouvez refactoriser le code de cette manière pour naviguer dans la page d'accueil avant chaque test. import { expect, test } from "@playwright/test"; test.describe("On View", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test("show tic tac toe page", async ({ page }) => { await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); }); Le résultat est le même qu'avant, mais maintenant vous n'avez que la commande de navigation à l'intérieur du crochet . Ces crochets sont parfaits si vous devez vous moquer de l'API ou si vous devez faire quelque chose avant ou après les tests. beforeEach Jouez avec votre DOM Après toutes ces choses, il est temps d'écrire le dernier test de ce post. Vous allez maintenant écrire un test qui simule les comportements de l'utilisateur dans les applications. Le test simule le clic du joueur "X" dans le carré en haut à gauche puis vérifie si le joueur suivant est le "O". test.describe("Users behaviours", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test('the first player select the top-left square and then the next player is the "O"', async ({ page, }) => { const squares = await page.getByRole("button"); const topLeftSquare = squares.first(); await topLeftSquare.click(); const topLeftSquareImg = await topLeftSquare.getByRole("img"); await expect(topLeftSquareImg).toHaveAttribute("title", "X"); await expect(topLeftSquareImg).toHaveAttribute("src", /x.png/i); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("O"); }); }); Cet exemple commence à devenir plus délicat. Comme vous pouvez le constater, il y a des nouveautés. Commençons par la première, la méthode. Dans ce cas, renvoie de nombreux éléments, et seul le premier est requis dans le test. En utilisant la méthode, vous pouvez obtenir le premier élément de la liste. Ensuite lorsque vous avez le premier carré sur le plateau, vous pouvez simuler le clic de cet élément par l'utilisateur. En utilisant la méthode , vous pouvez le faire. Peasy citron pressé facile. Mais maintenant, les choses commencent à devenir "complexes". Comme vous pouvez le voir, vous pouvez maintenant utiliser le de l'élément carré, et la méthode essaie de trouver une image enfant de cet élément. Après cela, en utilisant l'assertion , vous vérifiez si cette image a un titre avec la valeur "X" et si la source contient la valeur "x.png". La dernière étape est la même que dans le post précédent, où vous obtenez le paragraphe et vérifiez si le joueur suivant est maintenant le joueur "O". Ok, ce n'est pas sorcier mais un peu plus compliqué que l'exemple précédent. first getByRole first click getByRole toHaveAttribute Conclusion Ok, je pense que vous avez du matériel à étudier pour l'instant ! 😃Alors, ce que vous avez appris dans cet article : Localisateurs Assertions Comment isoler votre test Crochets Je vous suggère de vous salir la main avec ces sujets car ils seront les fondamentaux de votre test avec Playwright. Ok, c'est tout folk, à bientôt. Au revoir 👋 Ps vous pouvez trouver le résultat de ce post sur ce lien
