アサーションの使用（expect）

Playwrightにおける「アサーションの使用（expect）」は、テスト自動化において、実際の結果が期待する結果と一致しているかどうかを確認するための重要な手段です。Playwright Testは@playwright/testモジュールに組み込まれており、expect関数を使って、様々な条件を検証することができます。

---

1. 基本的な構文

ts
import { test, expect } from '@playwright/test';

test('タイトルの検証', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
});

この例では、ページのタイトルが「Example Domain」であることをアサートしています。

---

2. よく使われるアサーションの種類

a. 要素の存在確認

ts
await expect(page.locator('h1')).toBeVisible();

要素<h1>がページ上で表示されているか確認します。

b. テキストの一致

ts
await expect(page.locator('h1')).toHaveText('Example Domain');

要素のテキストが指定した文字列と一致しているか確認します。

c. 属性値の確認

ts
await expect(page.locator('a')).toHaveAttribute('href', 'https://www.iana.org/domains/example');

リンク要素のhref属性が指定した値であるか確認します。

d. クラスやスタイルの確認

ts
await expect(page.locator('button')).toHaveClass(/btn-primary/);

指定したクラスがボタン要素に含まれているかどうかを正規表現で確認します。

e. 非表示状態の確認

ts
await expect(page.locator('#loading')).toBeHidden();

要素が非表示であることを確認します。

---

3. 非同期の考慮（暗黙の待機）

Playwrightのexpectは自動的に一定時間（デフォルト5秒）まで待機して条件が成立するのを待ちます。例えば：

ts
await expect(page.locator('#result')).toHaveText('完了しました');

このアサーションは、要素のテキストが「完了しました」になるまで最大5秒待機します。

必要に応じて、明示的にタイムアウトを指定することもできます：

ts
await expect(page.locator('#result')).toHaveText('完了しました', { timeout: 10000 }); // 最大10秒待機

---

4. negation（否定）の使用

条件が成立しないことを確認する場合は、.notを使います：

ts
await expect(page.locator('#error')).not.toBeVisible();

---

5. 複数条件のアサーション（組み合わせ）

複雑な検証が必要な場合、expectを複数組み合わせることでテストの網羅性を高めることができます：

ts
const loginButton = page.locator('button#login');
await expect(loginButton).toBeVisible();
await expect(loginButton).toHaveText('ログイン');
await expect(loginButton).toHaveAttribute('type', 'submit');

---

まとめ

Playwrightのexpectによるアサーションは、テストケースの正確性と信頼性を保証するうえで不可欠な機能です。視覚的要素、テキスト、属性、状態（表示・非表示）など、あらゆる観点でアプリケーションの動作を検証することが可能です。Playwrightはこれらを非同期的に、かつ直感的なAPIで提供しており、堅牢なUIテストの構築を支援します。