いづさんの日記帳

Playwright Agentのお勉強

Playwright Agentのお勉強
約3分で読めます

はじめに

元々はGitHubのリポジトリにMarkdownファイルを作成してドキュメントを残していたのですが、
せっかくブログというものを立ち上げたのでこちらに移植してしまおうと思いました。

Playwright Agentsを触ってみた記録となっています。
個人で試した内容となっていますので、不正確な部分が混ざっている可能性があります。
その点についてはご理解ください。

検証当時はClaudeCodeは契約していなかったので、GitHub Copilotでの検証となっております。

実行環境

2026/02/03 時点のデータです。

共通

  • OS: Windows11 Home 24H2
  • Node.js: v22.20.0

VSCode

  • VSCode: 1.108.1
  • AIツール: GitHub Copilot Pro
  • モデル: GPT-5.2-Codex

環境構築

前提条件

  • VSCodeインストール済み
  • Node.jsインストール済み

インストール

npm init playwright@latest
npx playwright init-agents --loop=vscode

テスト対象

Hotel Planisphereをローカルにforkしたやつ

forkしたやつを対象にした理由：サイト内容を変更してHealerの実行結果を確かめたかったから

自動的にテストを生成させてみた

こちらから技術スタックを提示して、BDD+POMで作らせてみました。

オーバービュー

技術スタック

  • Playwright（@playwright/test）
  • TypeScript
  • playwright-bdd（Gherkin/BDD）
  • Page Object Model（pages/）

テスト設計の特徴

  • Gherkin → Step定義 → Page Objectの3層構造
  • ハッピーパス/エラーパスに加え、アクセシビリティ検証、セキュリティ検証、ビジュアルリグレッションも追加
  • 画面遷移と入力の再利用性を高めた構成
  • tests/standard/playwright.config.tsに設定を記述

チャット内容

以下、私が実際に投げたプロンプトです。

Planner

以下のサイトの実装詳細を確認し、必要なE2Eテスト項目を生成してください。
http://127.0.0.1:8080/ja/

成果物は`<フォルダ名>/standard/`ディレクトリに格納してください。
保存すべきフォルダのサブフォルダにstandard/ディレクトリが存在しない場合、ディレクトリを生成してください。

ハッピーパスとエラーパスのテストそれぞれを充実させること。
アクセスログを確認すると不正アクセスの痕跡が見られるため、セキュリティ関連のテストはなるべく強化してほしい。
ホテル予約サイトなのでホテル予約で強化すべき項目があれば適宜追加もしてほしい。
また、各遷移先で画面全体の見た目の確認も実行したいため、ビジュアルリグレッションテストも追加してほしい。
作成したテスト計画書を見直し、完全に抜けている観点や追加すべき観点があれば追加してほしい。
ただし、外部リンク（GitHubなど）はテストする必要はないです。

Planner成果物サンプル（specs/standard/e2e-plan.md 抜粋）

# HOTEL PLANISPHERE 標準E2Eテスト計画（性別・年齢追加反映）

## Application Overview

ホテル予約サイト（日本語UI）の主要ユーザーフロー（会員登録・ログイン・宿泊プラン選択・予約・確認・完了・マイページ）と、入力検証・エラー処理・セキュリティ・ビジュアルリグレッションテストを包括的に検証する。

## Test Scenarios

### 1. ホーム/ナビゲーション

#### 1.1. ホーム表示と主要コンテンツの確認（ビジュアル含む）

**File:** `tests/standard/navigation/home-visual.spec.ts`

**Steps:**

1. 新しいブラウザ状態で http://127.0.0.1:8080/ja/ を開く。
   - expect: ページタイトルに「HOTEL PLANISPHERE」が含まれる。
   - expect: 主要見出し（Hotel Planisphere、サイト説明）が表示される。
   - expect: 画面全体のビジュアルスナップショットが保存/比較される。

2. お知らせの表示内容を確認する。
   - expect: お知らせの見出しと本文が表示される。

### 2. ログイン

#### 2.1. 既存ユーザでログイン成功（プレミアム会員）

**File:** `tests/standard/auth/login-premium-success.spec.ts`

**Steps:**

1. 新しいブラウザ状態でログインページを開く。
   - expect: メール/パスワード入力欄とログインボタンが表示される。

2. 登録済みユーザ（ichiro@example.com / password）でログインする。
   - expect: マイページに遷移する。
   - expect: 会員ランクが「プレミアム会員」と表示される。
   - expect: ナビゲーションに「ログアウト」が表示される。
   - expect: 画面全体のビジュアルスナップショットが保存/比較される。

#### 2.2. ログイン失敗（未入力/誤入力）

**File:** `tests/standard/auth/login-errors.spec.ts`

**Steps:**

1. 新しいブラウザ状態でログインページを開く。
   - expect: フォームが表示される。

2. メール/パスワード未入力でログインする。
   - expect: ログインに失敗し、マイページに遷移しない。
   - expect: 必須入力のバリデーションが表示される。

3. 不正なメール形式と誤ったパスワードでログインする。
   - expect: ログインに失敗し、認証エラーが通知される。
   - expect: セッションが作成されない。

Generator

specs/standard/e2e-plan.md をコンテキストに追加した状態で実行。

添付のテスト項目書を参照し、テストコードを実装してください。
成果物は`<フォルダ名>/standard/`ディレクトリに格納してください。
保存すべきフォルダのサブフォルダにstandard/ディレクトリが存在しない場合、ディレクトリを生成してください。

コード生成は以下の指示に従ってください。

テスト計画書に記載されている観点は必ず網羅してください。
コードの言語はTypeScriptとしてください。
Page Object ModelおよびBDDを採用しGherkin記法で生成してください。
BDDはCucumber.jsは使用せず、playwright-bddを採用してください。
ロケーターの指定はgetbyrole()などのgetBy関数を優先的に使用し、ユーザー目線でのテスト記述を心がけてください。
テストの期待値のうち、アカウントに紐づく情報（氏名、メールアドレスなど）はコード内にベタ書きせず、データ駆動テストを実行できるようなるべく外部化してください。

Generator成果物サンプル（tests/standard/features/login.feature）

Feature: ログイン

  @login @smoke @visual
  Scenario: 既存ユーザでログイン成功（プレミアム会員）
    Given 新しいブラウザ状態でログインページを開く
    Then メールとパスワードの入力欄とログインボタンが表示される
    When "premium" ユーザでログインする
    Then マイページに遷移する
    And 会員ランクが "premium" と表示される
    And ナビゲーションに「ログアウト」が表示される
    And 画面全体のビジュアルスナップショットを保存・比較する

  @login @negative
  Scenario: ログイン失敗（未入力/誤入力）
    Given 新しいブラウザ状態でログインページを開く
    When メールとパスワード未入力でログインする
    Then ログインページのままである
    And 必須入力のバリデーションが表示される
    When 不正なメール形式と誤ったパスワードでログインする
    Then ログインページのままである
    And 認証エラーが通知される

  @login @a11y
  Scenario: アクセシビリティ：ラベル/必須/エラーの関連付け
    Given 新しいブラウザ状態でログインページを開く
    Then ログイン入力欄にラベルが関連付けられている
    When メールとパスワード未入力でログインする
    Then エラーメッセージが入力欄と関連付けられている

Generator成果物サンプル（tests/standard/pages/login-page.ts）

import { Locator, Page } from '@playwright/test';
import { urls } from '../helpers/app';

export class LoginPage {
  readonly page: Page;
  readonly email: Locator;
  readonly password: Locator;
  readonly submit: Locator;

  constructor(page: Page) {
    this.page = page;
    this.email = page.getByRole('textbox', { name: 'メールアドレス' });
    this.password = page.getByRole('textbox', { name: 'パスワード' });
    this.submit = page.locator('#login-button');
  }

  async open() {
    await this.page.goto(urls.login);
  }

  async login(email: string, password: string) {
    await this.email.fill(email);
    await this.password.fill(password);
    await this.submit.click();
  }
}

Healer

tests/standard/ディレクトリに存在するテストを実行し、もしエラーが発生した場合は修正してください。
コードを修正した場合、修正内容などをコメントとしてコード内に残してください。
作成したテストの初回実行でまずは安定化が目的となります。
テスト内容を完全に無効化してしまうようなコード変更は禁止します。

こちらの出力結果は特に書くことがなかったので省略します。
ちゃんとテストが正常に動作するまで繰り返し実行して直してくれました。

おわりに

今回はPlaywright Agentを使ってみた記録となります。
実際に触ってみて、コード生成のクオリティはかなり高いと感じました。
ただ、やはり生成されたコードが完璧な状態で出てくるわけではないので、Healerのような機能は必須だなと感じました。

今回はPOMやBDDを明確に指示しましたが、全く具体的な指示を出さなくてもPlaywright標準のテストは作ってくれますね。
SETエンジニアなどPlaywright E2Eテストに精通している人が使うと、もっとすごいことができるのかな～と思ったり。
私はまだまだ全然なのでこの程度でしかないのですが…。

今回の内容はあくまで私が実際に試した内容となっていますので、不正確な部分が混ざっている可能性があります。
その点についてはご理解ください。

次に読む

新しい記事

ぶいちゃアバタープロジェクトのつくりかた

古い記事

beatoraja プレイ日記 2026-03-03

シリーズ一覧

すべて見る

このシリーズ情報は未設定です。シリーズ一覧ページから他の連載を探せます。

記事一覧に戻る