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

テストの作成

はじめに​

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/');
  });
});

次に行うこと​