AWESOME-COPILOTのドキュメントを読むその１０４（Playwright Typescript）

本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つPlaywright Typescriptについてです。

Playwright TypescriptはPlaywrightで高品質なE2Eテストを生成するためのルールです。
PlaywrightはWebアプリケーションの E2E（エンドツーエンド）テストを自動化するためのツールです。
ユーザーの操作をブラウザ上で再現してテストすることができます。

以下のページからGenaiscriptのインストールボタンをクリックして取得します。
github.com

インストールボタンを押してPlaywright Typescriptダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。

インストールしたインストラクションはCopilotの動作に自動的に適用されます。
このインストラクションを読み込むと、CopilotはPlaywrightのベストプラクティスに従いTypeScriptテストコードを生成するようになります。

以下の要素に効くインストラクションです。

具体的にはCopilotは以下のような行動をとります。

CopilotはCSSセレクタやXPath中心ではなくrole/label/textベースを優先します。
例えば以下のようなコードです。

Page.GetByRole(AriaRole.Button, new() { Name = "Save" })
Page.GetByLabel("Email")
Page.GetByText("Welcome")

Copilotは操作を以下のように意味のある単位に分けます。

await test.step('ログイン操作', async () => {
  ...
});

これによりテストレポートが読みやすくなり、失敗箇所も分かりやすくなります。

Copilotは即時評価や手動waitではなくPlaywrightの自動リトライ付きassertionを使います。
例えば以下のようなコードです。

await expect(locator).toHaveText('Success');

要素が表示されるまで自然に待ってくれるため、テストが安定します。

Copilotは以下のような固定waitを避けます。

await Page.WaitForTimeoutAsync(3000);

Copilotは次の構造を生成します。

test.describe('Feature', () => {
  test.beforeEach(...)
  test('scenario', async () => {})
});

CopilotはSearchForMovieByTitleのようなテスト名を付けます。
これによりテストの意図が読み取れるようになります。

Copilotは以下のファイル構成を守ります👇

tests/
 ├ login.spec.ts
 ├ search.spec.ts

以下の命名ルールで1ファイル = 1機能で作成します。

<feature>.spec.ts

Copilotは目的に応じて以下のassertionを使い分けます。

Copilotはテスト生成後も次の流れを意識します。

実行
↓
失敗原因分析
↓
locator / assertion修正
↓
再実行

Copilotは以下のアンチパターンを避けます。

MRが楽しい