Playwright のフィクスチャの基本ガイド

ちょっと、そこ、

今日は、Playwright を使用してテスト間でデータを共有したり、カスタム実行を作成したりする場合に不可欠な友人である Fixtures についてお話ししたいと思います。

簡単な例から始めましょう。

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

配列内のボタンのすべてのインデックスを抽出してこのテストを再現し、これらすべてのクリック コマンドを減らしてテストを短くするとします。

したがって、フィクスチャ機能を導入する前の最初のリファクタリングはこれになる可能性があります。

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

お気づきのように、プレーヤーの動きを再現するすべての手順は、 playerXWinMoves変数に含まれています。テストは簡潔ですが、最も重要なことは、すべてのアクションが 1 つの変数に含まれていることです。いよいよ備品の紹介です。

先に進む前に、フィクスチャとは何かを説明します。

備品とは

テストフィクスチャは、各テストの環境を確立するために使用され、テストに必要なものすべてを提供し、他には何も提供しません。テストフィクスチャはテスト間で分離されています。フィクスチャを使用すると、標準的な設定ではなく、意味に基づいてテストをグループ化できます。

この定義の後、フィクスチャを before/after フックに置き換えることができると考えることができますが、フィクスチャにはこれらのフックよりもいくつかの利点があります。

• フィクスチャは、セットアップとティアダウンを同じ場所にカプセル化して、記述を容易にします。
• フィクスチャはテスト ファイル間で再利用可能です。一度定義すると、すべてのテストで使用できます。これが Playwright のビルトインpageフィクスチャの仕組みです。
• フィクスチャはオンデマンドです。好きなだけフィクスチャを定義できます。Playwright Test は、テストに必要なものだけをセットアップし、それ以外は何もセットアップしません。
• フィクスチャは構成可能です。相互に依存して複雑な動作を提供できます。
• 備品は柔軟です。テストはフィクスチャの任意の組み合わせを使用して、他のテストに影響を与えることなく、必要な正確な環境を調整できます。
• フィクスチャはグループ化を簡素化します。環境をセットアップするdescribeでテストをラップする必要がなくなり、代わりにテストを意味ごとに自由にグループ化できます。

完璧です。この退屈な理論的な部分の後は、Playwright のフィクスチャで手を汚す時が来ました。

説明を始めるにあたり、まず最終結果から始めたいと思います。

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

ご覧のとおり、フィクスチャをビルドするには、Playwright によって公開されたテスト オブジェクトを拡張する必要があります。この関数内で、フィクスチャを表すオブジェクトを作成できます。この場合、 playerXWinMovesプロパティを追加して、Player X の勝利を再現する手順を共有しました。さらに、私は Typescript を使用するのが好きなので、 TestFixtures型を追加してフィクスチャを記述しました。フィクスチャ内でuseメソッドを使用してフィクスチャの値を設定する必要があることに注意してください。

では、テストを見てみましょう。テストに渡されたオブジェクトからplayerXWinMovesフィクスチャを直接取得できることがわかります。ここで、以前の変数を削除して、params から新しい変数を使用すると、フィクスチャを使用して Playwright で最初のテストが作成されます。

この機能の信じられないほどの力と、テストをより読みやすくしたり、多くのテストで役立つデータをまとめたりするのにどのように役立つかを理解していただければ幸いです。

しかし、締めくくる前に、もう 1 つ残しておきましょう。フィクスチャを使用すると、Playwright によって直接公開されたオブジェクトをオーバーライドすることもできます。たとえば、ページ オブジェクトをオーバーライドし、 beforeEachフックを作成してホームページに移動する代わりに、ページをオーバーライドしてこのステップをフィクスチャに追加することができます。これにより、すべてのテストが実行前に、ナビゲートするステップを実行します。ホームページへ。

そして、どうすればそれを行うことができますか?単にこのように。

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

そうすることで、各テストは、実行を開始するときに baseURL に移動し、すべてのコードを実行します。信じられない？これで、テスト ファイルのbeforeEachフックを削除し、テストを再実行して結果を確認できます。

わかりました、それはすべて民俗です！

今日は、Playwright フィクスチャの仕組みと構築方法を学びました。

この投稿を楽しんでいただければ幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。喜んでお手伝いさせていただきます。

また近いうちにお会いしましょう

バイバイ👋

ps この記事のコードはこちらで確認できます