Playwright Testing Framework を使用してテストを作成する方法

この投稿で何を学びますか?

この投稿では、アサーション、ロケーターなどを使用して、Playwright でテストを作成する方法を学習します。

テストを書く

例から始めましょう

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

この例では、 getByRoleとtoContainTextという 2 つの新しいものを導入しました。 getByRoleロケーターの一部であり、 toContainTextアサーションの一部です。これらの新しい機能について詳しく説明します。

ロケーター

ロケータは、Playwright の自動待機および再試行機能の中心的な部分です。ロケーターは、いつでもページ上の要素を見つける方法を表します。

ロケーターを使用すると、次のコマンドで dom 内の要素を取得できます。

• page.getByRole(role[, options]) を使用して、明示的および暗黙的なアクセシビリティ属性で検索します。
• page.getByText(text[, options])テキスト コンテンツで検索します。
• page.getByLabel(text[, options]) を使用して、関連付けられたラベルのテキストでフォーム コントロールを見つけます。
• page.getByPlaceholder(text[, options]) を使用して、プレースホルダーで入力を見つけます。
• page.getByAltText(text[, options]) を使用して、代替テキストによって要素 (通常は画像) を見つけます。
• page.getByTitle(text[, options]) を使用して、その title 属性で要素を見つけます。
• page.getByTestId(testId) を使用して、 data-testid属性に基づいて要素を検索します (他の属性を構成できます)。
• page.locator(selector) は、選択された (Css または XPath) に基づいて要素を検索します。

ご覧のとおり、これら 8 つのコマンドを使用すると、ページ上のすべての要素を見つけることができます。

前の例を見ると、 getByRoleメソッドを使用して DOM で段落を取得し、必要なものをチェックする方法を確認できます。では、ロケーターとは何かを簡単に要約します。ロケーターは、DOM 内の要素を検索するのに役立つメソッドです。

アサーション

尊重されている他のテスト フレームワークと同様に、Playwright には独自のアサーションがあります。アサーションは結果を確認するために使用され、開発者として、アプリケーションまたはコードが期待どおりに実行されることを確認するために使用します。この機能のプレイライトは、内部で jest によって構築されたexpect関数を使用しています。したがって、 jestに精通している場合は、Playwright に問題はありません。使用できる最も有名なアサーションは、 toEqual 、 toContain 、 toMatch 、 toBeなどです。アサーションは、アプリケーションが期待どおりに動作するかどうかを確認するための最良の友です。

ご想像のとおり、これら 2 つのことを組み合わせることで、多くのテストを作成してアプリケーションの動作を確認できます。

したがって、前の例に戻ってターミナルでnpm run e2eと入力すると、次の結果が得られます。

 npm run e2e > [email protected] e2e > playwright test Running 6 tests using 4 workers 6 passed (5s)

うわー、それは動作します。 😀 これで、Playwright でテストを作成するために何を使用すればよいかわかりました。

テストを分離する

テスト フレームワークに精通している場合は、テスト リストをグループ化する方法があることをご存じでしょう。 Playwright でこれを行うには、次の例のように、 testオブジェクトによって公開されるdescribeメソッドを使用する必要があります。

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

グループ化の利点は、現在そのように表示されているレポートにも表示されます。

ご覧のとおり、 On Viewラベルが各テストの前に表示されます。

そのため、必要に応じて、テスト ファイルを異なるコンテキストに分割できます。

フック

テスト フレームワークを使用するのが好きな人にとって、もう 1 つの重要な機能はフックです。フックを使用すると、テスト実行の前後にコードを実行できます。通常、それらはafterAll beforeAll afterEach beforeEach呼ばれます:まったく同じように🚀

例を挙げると、この方法でコードをリファクタリングして、各テストの前にホームページをナビゲートできます。

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

結果は以前と同じですが、 beforeEachフック内にナビゲーション コマンドしかありません。これらのフックは、API をモックする必要がある場合、またはテストの前後に何かを行う必要がある場合に最適です。

DOM で遊ぶ

これらすべてが終わったら、この投稿の最後のテストを書く時が来ました。次に、アプリケーションでのユーザーの動作をシミュレートするテストを作成します。このテストでは、左上の四角形のプレーヤー「X」のクリックをシミュレートし、次のプレーヤーが「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"); }); });

この例は、よりトリッキーになり始めています。ご覧のとおり、いくつかの新しいものがあります。最初のもの、 first方法から始めましょう。この場合、 getByRole多くの要素を返しますが、最初の要素だけがテストに必要です。 firstメソッドを使用すると、リストの最初の要素を取得できます。次に、ボード上に最初の四角ができたら、ユーザーによるこの要素のクリックをシミュレートできます。 clickメソッドを使用すると、それを行うことができます。簡単ピーシーレモンスクイーズ.しかし今、物事は「複雑」になり始めています。ご覧のとおり、square 要素からgetByRole使用できるようになり、メソッドはこの要素の子イメージを見つけようとします。その後、 toHaveAttributeアサーションを使用して、この画像に「X」値のタイトルがあるかどうか、およびソースに値「x.png」が含まれているかどうかを確認します。最後のステップは前の投稿と同じで、段落を取得して、次のプレイヤーが「O」プレイヤーかどうかを確認します。ロケット科学ではありませんが、前の例よりも少し複雑です。

結論

わかりました、今のところ勉強する資料があると思います！ 😃この投稿で学んだこと:

• ロケーター

• アサーション

• テストを分離する方法

• フック

  
  

これらのトピックは Playwright でのテストの基礎となるため、これらのトピックをよく理解することをお勧めします。

わかりました、それはすべて民俗です、また会いましょう。

バイバイ👋

Ps このリンクでこの投稿の結果を見つけることができます