Playwrightでテスト手順に名前を付ける（日本語にする）

▮Playwright

E2Eのテストフレームワークである。
https://playwright.dev/

test.step()の仕様は以下を参照する。
https://playwright.dev/docs/api/class-test#test-step

▮前提条件

以下を参考にPlaywright Test for VSCodeを導入済

https://zenn.dev/reflex4qa/articles/e59f77b5c58d15

環境

• VS code： 1.66.2 (user setup)
• Node.js: 16.13.0
• OS: Windows_NT x64 10.0.18363
• Playwright： Version: 1.21
• Playwright Test for VSCode： v0.2.3

▮ Bofre After

	Before	After
スクリーンショット

以下より、VS Codeでの操作となる。

▮1. login.spec.tsを変更する

操作

1. [エクスプローラ]login.spec.tsを開く。
2. [テキストエディタ]以下の通りに、コードを 変更後 に変更する。

変更前

login.spec.ts

    // Create 1st todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[0]);

変更後

await page.locator('.new-todo').fill(TODO_ITEMS[0]);をawait test.stepで囲む。

login.spec.ts

    // Create 1st todo.
    await test.step('TODOに"buy some cheese"と入力する。', async () => {
      await page.locator('.new-todo').fill(TODO_ITEMS[0]);
    });

確認

1. [ターミナル]以下のコマンドを実行する。

npx playwright test

2. [ターミナル]以下の出力を確認する。

PS C:\Playwright_sample> npx playwright test

Running 25 tests using 1 worker
  Slow test file: [chromium] › example.spec.ts (60s)
  Consider splitting slow test files to speed up parallel execution

  25 passed (1m)

To open last HTML report run:

  npx playwright show-report

PS C:\Playwright_sample>

3. [ターミナル]以下のコマンドを実行する。

npx playwright show-report

4. [ブラウザ]ブラウザが起動して、テスト結果の表示を確認する。
5. [ブラウザ]New Todo › should allow me to add todo itemsをクリックする。
6. [ブラウザ]TODOに"buy some cheese"と入力する。と変更したことを確認する。
   

今回の変更後のファイル構成

• 変更なし