メインコンテンツにスキップ

テストの作成

はじめに​

Playwright のテストはシンプルで、

  • アクションを実行し、
  • 期待値に対して状態をアサートします。

アクションを実行する前に何かを待つ必要はありません。Playwright は、各アクションを実行する前に、広範囲な操作可能性チェックがパスするのを自動的に待ちます。

また、チェックを実行する際に競合状態に対処する必要もありません。Playwright のアサーションは、最終的に満たされる必要のある期待値を記述するように設計されています。

それだけです！これらの設計上の選択により、Playwright ユーザーは、テストでの不安定なタイムアウトや競争状態のチェックについて完全に忘れることができます。

学ぶこと

最初のテスト​

テストの書き方を理解するために、次の例を見てください。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
注意

VS Code で JavaScript を使用する場合、自動型チェックを取得するには、各テストファイルの先頭に // @ts-check を追加してください。

アクション​

ほとんどのテストは、ページを URL にナビゲートすることから始まります。その後、テストはページ要素を操作できるようになります。

await page.goto('https://playwright.dokyumento.jp/');

Playwright は、ページがロード状態になるのを待ってから、先に進みます。page.goto() オプションの詳細をご覧ください。

インタラクション​

アクションの実行は、要素の特定から始まります。Playwright は、ロケーター API を使用してこれを行います。ロケーターは、任意の瞬間にページ上の要素を見つける方法を表します。利用可能なさまざまなタイプのロケーターの詳細をご覧ください。Playwright は、アクションを実行する前に要素が操作可能になるのを待つため、要素が利用可能になるのを待つ必要はありません。

// Create a locator.
const getStarted = page.getByRole('link', { name: 'Get started' });

// Click it.
await getStarted.click();

ほとんどの場合、1 行で記述されます。

await page.getByRole('link', { name: 'Get started' }).click();

基本アクション​

これは、最も一般的な Playwright アクションのリストです。他にも多くのアクションがあるため、ロケーター API セクションをチェックして、詳細を確認してください。

アクション説明
locator.check()入力チェックボックスをチェックします
locator.click()要素をクリックします
locator.uncheck()入力チェックボックスをオフにします
locator.hover()要素の上にマウスをホバーします
locator.fill()フォームフィールドに入力テキストを入力します
locator.focus()要素にフォーカスを当てます
locator.press()単一のキーを押します
locator.setInputFiles()アップロードするファイルを選択します
locator.selectOption()ドロップダウンでオプションを選択します

アサーション​

Playwright には、expect 関数の形式でテストアサーションが含まれています。アサーションを行うには、expect(value) を呼び出し、期待値を反映するマッチャーを選択します。

任意の条件をアサートするために使用できる、toEqual、toContain、toBeTruthy などの多くの汎用マッチャーがあります。

expect(success).toBeTruthy();

Playwright には、期待される条件が満たされるまで待機する非同期マッチャーも含まれています。これらのマッチャーを使用すると、テストを非不安定で回復力のあるものにすることができます。たとえば、次のコードは、ページのタイトルに「Playwright」が含まれるまで待機します。

await expect(page).toHaveTitle(/Playwright/);

最も一般的な非同期アサーションのリストを次に示します。より詳しく知るために他にも多くあります。

アサーション説明
expect(locator).toBeChecked()チェックボックスがチェックされている
expect(locator).toBeEnabled()コントロールが有効になっている
expect(locator).toBeVisible()要素が表示されている
expect(locator).toContainText()要素にテキストが含まれている
expect(locator).toHaveAttribute()要素に属性がある
expect(locator).toHaveCount()要素のリストが指定された長さである
expect(locator).toHaveText()要素がテキストに一致する
expect(locator).toHaveValue()入力要素に値がある
expect(page).toHaveTitle()ページにタイトルがある
expect(page).toHaveURL()ページに URL がある

テストの分離​

Playwright Test は、テストフィクスチャの概念に基づいており、その一つが、テストに渡される組み込みのページフィクスチャです。ページは、ブラウザコンテキストによってテスト間で分離されています。これは、真新しいブラウザプロファイルと同等であり、複数のテストが単一のブラウザで実行されている場合でも、すべてのテストに新しい環境が提供されます。

tests/example.spec.ts
import { test } from '@playwright/test';

test('example test', async ({ page }) => {
  // "page" belongs to an isolated BrowserContext, created for this specific test.
});

test('another test', async ({ page }) => {
  // "page" in this second test is completely isolated from the first test.
});

テストフックの使用​

test.describe を使用してテストのグループを宣言したり、各テストの前後に実行される test.beforeEach や test.afterEach などのさまざまなテストフックを使用できます。その他のフックには、すべてのテストの前後にワーカーごとに 1 回実行される test.beforeAll と test.afterAll があります。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.dokyumento.jp/');
  });

  test('main navigation', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.dokyumento.jp/');
  });
});

次のステップ​