Playwright Agentのお勉強

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

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

7
ハッピーパスとエラーパスのテストそれぞれを充実させること。
8
アクセスログを確認すると不正アクセスの痕跡が見られるため、セキュリティ関連のテストはなるべく強化してほしい。
9
ホテル予約サイトなのでホテル予約で強化すべき項目があれば適宜追加もしてほしい。
10
また、各遷移先で画面全体の見た目の確認も実行したいため、ビジュアルリグレッションテストも追加してほしい。

1
作成したテスト計画書を見直し、完全に抜けている観点や追加すべき観点があれば追加してほしい。
2
ただし、外部リンク（GitHubなど）はテストする必要はないです。

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

3
## Application Overview
4

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

7
## Test Scenarios
8

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

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

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

15
**Steps:**
16

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

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

25
### 2. ログイン
26

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

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

31
**Steps:**
32

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

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

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

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

46
**Steps:**
47

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

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

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

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

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

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

1
Feature: ログイン
2

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

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

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

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

4
export class LoginPage {
5
  readonly page: Page;
6
  readonly email: Locator;
7
  readonly password: Locator;
8
  readonly submit: Locator;
9

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

17
  async open() {
18
    await this.page.goto(urls.login);
19
  }
20

21
  async login(email: string, password: string) {
22
    await this.email.fill(email);
23
    await this.password.fill(password);
24
    await this.submit.click();
25
  }
26
}

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