検証の基本

Playwrightにページの移動や要素のクリックといった操作を指示できるだけでは、テストは完成しません。

例えば、「ログインボタンをクリックする」という命令を実行した後、本当にログインは成功したのでしょうか？それとも、パスワードが間違っていてエラー画面が表示されたのでしょうか？

このように「実行した操作の結果、期待通りの状態になったか」をプログラムで確認する工程こそが、自動テストの心臓部です。この確認作業を「検証」と呼びます。

expect：テストの「期待」を表明する

Playwrightでは、この検証作業を行うために expect という非常に重要なコマンドを使います。expect は、私たちがテストの結果に対して「こうなっているはずだ」という期待を表明するためのものです。

基本的な使い方は、英語の文章のように自然に読むことができます。

// expect(何を).toBe(どうあるべきか);
// expect(実際の値).toEqual(期待する値);

// 例：「ページタイトル」が「ログイン」であることを期待する
await expect(page).toHaveTitle('ログイン');

このように、expect(確認したい対象) に続けて、.toHaveTitle() のような「どうなっていてほしいか」を表現するアサーションと呼ばれるものを繋げて記述します。

もし期待通りであれば、テストは静かに次のステップへ進みます。もし期待と異なれば、expect は「期待と違います！」とエラーを出してテストを停止させ、私たちに問題を教えてくれます。

まずは、テストで頻繁に使われる基本的な検証方法を4つ見ていきましょう。

この4つはよく使用するのでしっかり覚えておいてください。

役割: ユーザーの画面上で、その要素が実際に表示されているかを確認します。

// 「ログイン」ボタンが表示されていることを確認
await expect(page.locator('.login')).toBeVisible();

役割: .toBeVisible() の逆で、要素が画面上に表示されていないことを確認します。

// 購入後にバッジアイコンが消えることを確認
await expect(page.locator('.badge-icon')).toBeHidden();

役割: 要素の中に、指定した一部分のテキストが含まれているかを確認します。柔軟性が高く、非常に便利です。

// h1タグに「テスト自動化」というテキストが含まれているかを確認
await expect(page.locator('h1')).toContainText('テスト自動化');

役割: 要素の中身が、指定したテキストと一字一句違わず完全に一致するかを確認します。より厳密なチェックが必要な場合に使います。

// ボタンのテキストが「このプランで予約」と完全に一致することを確認
await expect(page.locator('.button')).toHaveText('このプランで予約');

Playwrightには、ここで紹介した以外にも、たくさんの便利なアサーションが用意されています。

これらは、必要になった時に調べて使えれば大丈夫です。まずは、今回学んだ4つの基本をしっかりマスターしましょう！