Comment rédiger des tests avec le cadre de test Playwright

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, getByRole et toContainText . getByRole fait partie des localisateurs et toContainText fait partie des assertions , et maintenant nous allons plonger dans ces nouvelles choses.

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 :

• page.getByRole(role[, options]) à localiser par des attributs d'accessibilité explicites et implicites.
• page.getByText(text[, options]) pour localiser par contenu textuel.
• page.getByLabel(text[, options]) pour localiser un contrôle de formulaire par le texte de l'étiquette associée.
• page.getByPlaceholder(text[, options]) pour localiser une entrée par placeholder.
• page.getByAltText(text[, options]) pour localiser un élément, généralement une image, par son alternative textuelle.
• page.getByTitle(text[, options]) pour localiser un élément par son attribut title.
• page.getByTestId(testId) pour localiser un élément en fonction de son attribut data-testid (d'autres attributs peuvent être configurés).
• page.locator(selector) pour localiser une base d'élément sur sa sélection (Css ou XPath)

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 getByRole , 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.

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 d'attente construite par jest. Donc, si vous êtes familier avec jest , vous n'aurez aucun problème avec Playwright. Les assertions les plus célèbres que vous pouvez utiliser sont : toEqual , toContain , toMatch , toBe et bien d'autres. Les assertions sont vos meilleures amies pour vérifier si votre application fonctionne comme prévu.

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 npm run e2e dans votre terminal, vous obtenez le résultat suivant.

 npm run e2e > [email protected] 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 describe exposée par l'objet test , comme dans l'exemple suivant.

 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 On View est présente avant chaque test.

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 : beforeEach beforeAll afterEach afterAll et vous savez comment ils s'appellent dans Playwright ? Précisément de la même manière 🚀

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 beforeEach . 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.

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 first méthode. Dans ce cas, getByRole renvoie de nombreux éléments, et seul le premier est requis dans le test. En utilisant la first 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 click , 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 getByRole 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 toHaveAttribute , 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.

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