Un guide essentiel des luminaires dans Playwright

Salut,

Aujourd'hui, je veux parler de Fixtures, un ami essentiel si vous allez travailler avec Playwright et que vous souhaitez partager des données entre vos tests ou créer des exécutions personnalisées.

Commençons par un exemple simple.

 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"); });

Imaginez que vous souhaitiez extraire tous les index des boutons d'un tableau pour répliquer ce test et réduire toutes ces commandes de clic pour avoir un test plus court.

Ainsi, le premier refactor avant d'introduire la fonctionnalité de fixation pourrait être ceci.

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

Comme vous pouvez le constater, toutes les étapes pour reproduire les mouvements des joueurs sont contenues dans les variables playerXWinMoves . Le test est concis, mais le plus important, toutes les actions sont dans une seule variable. Il est maintenant temps d'introduire les luminaires.

Avant de poursuivre, permettez-moi de passer quelques mots décrivant ce que sont les luminaires.

Quels sont les luminaires

Les montages de test sont utilisés pour établir un environnement pour chaque test, donnant au test tout ce dont il a besoin et rien d'autre. Les appareils de test sont isolés entre les tests. Avec les luminaires, vous pouvez regrouper les tests en fonction de leur signification au lieu de leur configuration standard.

Après cette définition, vous pouvez penser que les fixtures pourraient être remplacées par des hooks avant/après, mais les fixtures ont plusieurs avantages par rapport à ces hooks :

• Les luminaires encapsulent la configuration et le démontage au même endroit, ce qui facilite l'écriture.
• Les luminaires sont réutilisables entre les fichiers de test - vous pouvez les définir une fois et les utiliser dans tous vos tests. C'est ainsi que fonctionne l'appareil page intégré de Playwright.
• Les luminaires sont à la demande - vous pouvez définir autant de luminaires que vous le souhaitez, et Playwright Test ne configurera que ceux nécessaires à votre test et rien d'autre.
• Les luminaires sont composables - ils peuvent dépendre les uns des autres pour fournir des comportements complexes.
• Les montages sont flexibles . Les tests peuvent utiliser n'importe quelle combinaison d'appareils pour adapter l'environnement précis dont ils ont besoin sans affecter les autres tests.
• Les luminaires simplifient le regroupement . Vous n'avez plus besoin d'envelopper les tests dans describe s qui configurent un environnement et êtes libre de regrouper vos tests par leur signification à la place.

Parfait, après cette partie théorique ennuyeuse, il est temps de se salir les mains avec des luminaires dans Playwright.

Pour commencer l'explication, je veux commencer par le résultat final.

 import { expect, test as base } from "@playwright/test"; type TestFixtures = { playerXWinMoves: [number, number, number, number, number, number, number]; }; const test = base.extend<TestFixtures>({ playerXWinMoves: async ({}, use) => { await use([1, 5, 6, 7, 3, 9, 2]); }, }); test('should win the player "X"', async ({ page, playerXWinMoves }) => { for (const move of playerXWinMoves) { await page.locator(`button:nth-child(${move})`).click(); } const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Comme vous pouvez le voir, pour construire notre appareil, vous devez étendre l'objet de test exposé par Playwright. Dans cette fonction, vous pouvez créer un objet qui représente vos luminaires. Dans ce cas, j'ai ajouté la propriété playerXWinMoves pour partager les étapes pour reproduire la victoire du joueur X. De plus, juste parce que j'adore travailler avec Typescript, j'ai ajouté le type TestFixtures pour décrire mes appareils. Il est essentiel de noter qu'à l'intérieur de l'appareil, vous devez utiliser la méthode use pour définir la valeur de vos appareils.

Ok, continuez, et jetons un coup d'œil au test maintenant. Vous pouvez remarquer que vous pouvez obtenir le projecteur playerXWinMoves directement à partir de l'objet passé à votre test. Et maintenant, si vous supprimez la variable précédente et utilisez la nouvelle des paramètres, vous créerez votre premier test avec Playwright en utilisant fixture.

Super, j'espère que vous pourrez comprendre l'incroyable puissance de cette fonctionnalité et comment elle peut vous aider à rendre votre test plus lisible ou à rassembler certaines données utiles dans de nombreux tests.

Mais avant de conclure, permettez-moi de vous en laisser un autre. Avec les luminaires, vous pouvez également remplacer un objet exposé directement par Playwright. Par exemple, vous pouvez remplacer l'objet page, et au lieu de créer un hook beforeEach pour naviguer vers la page d'accueil, vous pouvez remplacer la page et ajouter cette étape dans un appareil, de sorte que chaque test, avant son exécution, exécute les étapes pour naviguer à la page d'accueil.

Et comment pouvons-nous faire cela? Simplement de cette façon.

 const test = base.extend<TestFixtures>({ page: async ({ baseURL, page }, use) => { baseURL && (await page.goto(baseURL)); await use(page); }, });

En faisant cela, maintenant chaque test, lorsqu'il démarre son exécution, va à la baseURL puis exécute tout le code. Incroyable non ? Maintenant, vous pouvez supprimer le hook beforeEach dans le fichier de test et relancer vos tests pour vérifier le résultat.

Ok, c'est tout folk !

Aujourd'hui, vous avez appris comment fonctionnent les luminaires Playwright et comment en construire un.

J'espère que vous avez apprécié cet article, et si vous avez des doutes, n'hésitez pas à me contacter ; Je serai heureux de vous aider.

À bientôt

Au revoir 👋

ps vous pouvez consulter le code de cet article ici