Playwrightのテスト（assertion）をノーコードで作成する

はじめに

今回はE2Eテストツール「Playwright」のテストジェネレーターで、
画面操作からテストコードを自動生成したいと思います。
v1.40.0で追加された、以下アサーション（検証処理）もノーコードで追加してみます。

• expect(locator).toBeVisible()：要素が表示されているか検証します。
• expect(locator).toHaveValue(value)：要素に指定値がセットされているか検証します。
• expect(locator).toContainText(text)：要素に指定文字が含まれているか検証します。

https://playwright.dev/docs/codegen-intro

事前準備

1. Node.jsをインストールします。
2. Playwrightをインストールします。

https://playwright.dev/docs/intro

テストを作成する

今回のテスト対象は、デモ用のToDo管理アプリにします。

1. 以下コマンドで、テストジェネレーターを起動します。
   npx playwright codegen https://demo.playwright.dev/todomvc/#/
   画面操作用のブラウザと、コード生成用のInspectorウィンドウが開きました。
   
2. ToDoのタイトル入力欄をクリックします。
   
   • Inspectorに、以下コードが追加されました。
     await page.getByPlaceholder('What needs to be done?').click();
3. ToDoのタイトルとして「task A」と入力します。
   • Inspectorに、以下コードが追加されました。
     await page.getByPlaceholder('What needs to be done?').fill('task A');
await page.getByPlaceholder('What needs to be done?').press('Enter');
4. 操作記録ツール内の「Assert visibility（表示検証）」アイコンをクリックした後、
   「task A」が表示された行をクリックします。
   
   
   • Inspectorに、以下コードが追加されました。
     await expect(page.getByTestId('todo-title')).toBeVisible();
     ToDoのタイトルを表示する要素todo-titleが画面に表示されているか検証されます。
5. ToDoの入力欄をクリックし、「task B」と入力します。
6. 操作記録ツール内の「Assert text（文字検証）」アイコンをクリックした後、
   「task B」と表示された箇所をクリックします。
   
   
   • Inspectorに、以下コードが追加されました。
     await expect(page.locator('body')).toContainText('task B');
     画面に「task B」の文字を含む要素があるか検証されます。
7. 「task A」の先頭の○にチェックを入れて、タスクを完了状態にします。
   
   • Inspectorに、以下コードが追加されました。
     await page.locator('li').filter({ hasText: 'task A' }).getByLabel('Toggle Todo').check();
8. 操作記録ツール内の「Assert value（値検証）」アイコンをクリックした後、
   チェックマーク（✔️）が入った「task A」の先頭の○をクリックします。
   
   • Inspectorに、以下コードが追加されました。
     await expect(page.locator('li').filter({ hasText: 'task A' }).getByLabel('Toggle Todo')).toBeChecked();
     「task A」のチェックボックスがチェック済みであるか検証されます。
9. 以上のテストにします。生成されたコード全体を、クリップボードにコピーします。
   
10. Playwrightのtestsフォルダ内に、「todo.spec.ts」ファイルを作成します。
11. 作成したファイルに、コピーしたコードを貼り付けて保存します。
    以下が自動生成したテストコードの全体です。

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

test('test', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc/#/');
  await page.getByPlaceholder('What needs to be done?').fill('task A');
  await page.getByPlaceholder('What needs to be done?').press('Enter');
  await expect(page.getByTestId('todo-title')).toBeVisible();
  await page.getByPlaceholder('What needs to be done?').click();
  await page.getByPlaceholder('What needs to be done?').fill('task B');
  await page.getByPlaceholder('What needs to be done?').press('Enter');
  await expect(page.locator('body')).toContainText('task B');
  await page.locator('li').filter({ hasText: 'task A' }).getByLabel('Toggle Todo').check();
  await expect(page.locator('li').filter({ hasText: 'task A' }).getByLabel('Toggle Todo')).toBeChecked();
});

テストを実行する

作成したテストをコマンドやVS Code、UIモードなどで実行します。

• コマンド
• VS Code
• UIモード

npx playwright test todo.spec.ts
無事に、テストが成功しました！

おわりに

画面操作から、サクッとテストコードを作成できるのは便利ですね。
現在、テストジェネレーターで追加できるアサーションは今回使用した3種類のみですが、
Playwrightには他にも20種類以上の検証処理が用意されています。
必要な検証処理は適宜、手動でコードを追加して利用しましょう。

https://playwright.dev/docs/test-assertions

また、ロケーター（検証対象の要素指定）も、自動では意図しない指定になることがあります。
上の例でも「task B」の文字表示の検証対象がpage.locator('body')と、
ページ全体からの探索になってしまいました。。。
ロケーターの指定方法にはclass指定やフィルターなど、いろいろ用意されているので
検証対象の要素が適切に指定されるよう、手動で調整しつつ活用できればと思います。

https://playwright.dev/docs/locators

参考記事

• 【WSL】Playwrightのインストールと操作について
• 【Playwright】Test GeneratorでAssertion（一部）のコードを自動生成できるようになった
• PlaywrightのVSCode拡張を使って効率的にテストを書く

追記

この記事で作成したテストコードをデータ駆動テスト（DDT）に修正した記事
「PlaywrightとCSVでデータ駆動テストを作成する」を公開しました。

https://zenn.dev/collabostyle/articles/c009f2aaab4312