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 . Le test est concis, mais le plus important, toutes les actions sont dans une seule variable. Il est maintenant temps d'introduire les luminaires. playerXWinMoves 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 la configuration et le démontage au même endroit, ce qui facilite l'écriture. encapsulent Les luminaires sont 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 intégré de Playwright. réutilisables page Les luminaires sont - 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. à la demande Les luminaires sont - ils peuvent dépendre les uns des autres pour fournir des comportements complexes. composables Les montages sont . 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. flexibles Les luminaires simplifient . Vous n'avez plus besoin d'envelopper les tests dans s qui configurent un environnement et êtes libre de regrouper vos tests par leur signification à la place. le regroupement describe 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é 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 pour décrire mes appareils. Il est essentiel de noter qu'à l'intérieur de l'appareil, vous devez utiliser la méthode pour définir la valeur de vos appareils. playerXWinMoves TestFixtures use Ok, continuez, et jetons un coup d'œil au test maintenant. Vous pouvez remarquer que vous pouvez obtenir le projecteur 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. playerXWinMoves 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 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. beforeEach 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 dans le fichier de test et relancer vos tests pour vérifier le résultat. beforeEach 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
