テストの記述
はじめに
Playwright のテストはシンプルです。アクションを実行し、期待される状態と状態をアサートします。
Playwright は、各アクションを実行する前に、アクション可能性チェックが合格するのを自動的に待ちます。手動で待機を追加したり、競合状態に対処したりする必要はありません。Playwright のアサーションは、最終的に満たされる期待を記述するように設計されており、不安定なタイムアウトや競合するチェックを排除します。
学習内容
最初のテスト
テストの書き方については、以下の例をご覧ください。
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) を呼び出し、期待を反映するマッチャーを選択します。
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 には、toEqual、toContain、toBeTruthy のような汎用マッチャーも含まれており、あらゆる条件をアサートするために使用できます。これらのアサーションは、既に利用可能な値に対して即時同期チェックを実行するため、await キーワードは使用しません。
expect(success).toBeTruthy();
テスト分離
Playwright Test は、テストに渡される組み込みページフィクスチャなどのテストフィクスチャの概念に基づいています。ページは、新しいブラウザプロファイルと同等のブラウザコンテキストにより、テスト間で分離されます。複数のテストが単一のブラウザで実行される場合でも、すべてのテストは新しい環境を取得します。
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 を使用したりできます。その他のフックには、すべてのテストの前後にワーカーごとに一度だけ実行される test.beforeAll および test.afterAll があります。
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/');
});
});