Playwright CodegenとClaude CodeでE2Eテスト作成をノーコード化する

こんにちは、kickflow QAチームの川村です。

「E2Eテストを書きたいけど、コードを書くのはハードルが高い」。
こうした悩みを持つQAメンバーは多いのではないでしょうか。

kickflowでは、Playwright CodegenとClaude Codeを組み合わせた /codegen-test スキルを開発し、この課題を解決しました。
ブラウザをポチポチ操作するだけで、AIがコードを自動整形し、すぐに使えるテストファイルが出力されます。

チームでは実際に、プログラミング経験が浅いQAメンバーがPlaywrightを利用した新規E2Eテストのシナリオを実装しています。
本記事では、このアプローチの詳細と実践方法を紹介します。

• 作ったもの ― /codegen-test スキル
• Playwright Codegenとは
• なぜPlaywright Codegenを選んだのか
• 従来の方法と /codegen-test スキルの比較
• テスト作成ワークフロー
  • ステップ1: /codegen-test コマンドの実行
  • ステップ2: ブラウザで操作を記録
  • ステップ3: ブラウザを閉じてAI整形
• /codegen-test スキルのアーキテクチャ
  • 全体の仕組み
  • 使用している技術
• AIが自動でやってくれること
  • 1. 不要な操作の除去
  • 2. ログイン処理のヘルパー化
  • 3. Vuetifyヘルパーの適用
  • 4. test.stepへの分割
  • 5. POM（Page Object）活用の提案
• 実際のコード例
• Playwright CodegenとPlaywright MCPの比較
  • 使い分けの指針
• 成果と今後の展望
  • 成果
  • 今後の展望
• まとめ

作ったもの ― /codegen-test スキル

この /codegen-test は、Markdownファイル1つで定義されたClaude Codeカスタムスキルです。
プログラムではなく、自然言語の指示書だけでAIの振る舞いを定義できます。

.claude/skills/codegen-test/
└── SKILL.md    # スキル定義（AIへの指示書）

スキル定義のフロントマター（メタデータ）は以下の通りです。

---
name: codegen-test
description: >
  ブラウザ操作を記録し、AIがクリーンアップ・整形して
  すぐ使えるテストファイルを自動生成します。
  E2Eテスト未経験者でもOK。
argument-hint: "<url> <email> <password>"
---

name がスラッシュコマンドの名前、argument-hint がユーザーに表示されるヒントになります。
本文には「こういうパターンを検出したら、こう変換して」という指示を自然言語で書いておくだけで、AIがその通りに動作します。

たとえば、不要操作の除去ルールはこのように定義しています。

#### 1. ミスクリック・不要操作の検出と削除

**自動削除するパターン：**

| パターン | 説明 | 例 |
|---------|------|-----|
| IME キーイベント | 日本語入力切り替え | `press('KanjiMode')`, `press('Eisu')` |
| 重複 click | 同一要素への連続クリック | 最後の1回のみ残す |
| click → fill | fill の直前にある同一要素の click | click を削除 |
| 重複 fill | 同一要素への連続 fill | 最後の値のみ残す |

**ユーザーに確認するパターン：**

| パターン | 説明 | 対応 |
|---------|------|------|
| goBack | ブラウザバック | 前の操作がミスの可能性を確認 |
| 値変更 fill | 同一要素で異なる値を fill | 意図的な変更か確認 |

「自動削除するもの」と「ユーザーに確認するもの」を表で分けて書いておくだけで、AIが判断してくれます。

SKILL.mdの全文（約200行）は以下に掲載します。
自動ログインのスクリプト、Codegenの起動コマンド、クリーンアップルール、ステップ命名規則など、すべてがこの1ファイルに収まっています。

---
name: codegen-test
description: ブラウザ操作を記録し、AIがクリーンアップ・整形してすぐ使えるテストファイルを自動生成します。E2Eテスト未経験者でもOK。
argument-hint: "<url> <email> <password>"
---

# Record Test - ブラウザ操作記録からテスト自動生成

Playwright Codegen でブラウザ操作を記録し、AI が自動でクリーンアップ・整形して、プロジェクト規約に準拠したテストファイルを作成します。

## 引数

- `$ARGUMENTS`: `<url> <email> <password>` 形式で指定
  - `url`: テスト対象のフルURL（必須）
    - 例: `https://your-tenant.kickflow.com/admin/workflows/new`
    - URLからテナントURL（スキーム+ホスト）とパスを自動分離
  - `email`: ログインに使用するメールアドレス
  - `password`: ログインに使用するパスワード

## 使用例

/codegen-test https://your-tenant.kickflow.com/admin/workflows/new user@example.com MyPassword123

## 実行手順

### フェーズ1: 準備と起動

#### 1. 引数の解析

`$ARGUMENTS` から以下を抽出：
- **url**: 1番目の引数（必須、フルURL）
- **email**: 2番目の引数（必須）
- **password**: 3番目の引数（必須）

1番目の引数（フルURL）から **tenantUrl** と **path** を分離する：
- URLをパースして `tenantUrl`（スキーム+ホスト）、`tenantHost`（ホスト名のみ）、`path` に分離
  - 例: `https://my-tenant.kickflow.com/admin/workflows`
    → tenantUrl=`https://my-tenant.kickflow.com`
    → tenantHost=`my-tenant.kickflow.com`
    → path=`/admin/workflows`
- `https://` で始まらない場合はエラーとし、フルURLを指定するよう案内する

引数が不足している場合は、AskUserQuestion ツールで不足分を確認する。

#### 2. 一時ディレクトリの準備

mkdir -p e2e-tests/.codegen-temp

タイムスタンプ付きの一時ファイルパスを生成：

TIMESTAMP=$(date +%Y%m%d-%H%M%S)
TEMP_FILE="e2e-tests/.codegen-temp/raw-${TIMESTAMP}.spec.ts"
AUTH_FILE="e2e-tests/.codegen-temp/auth-${TIMESTAMP}.json"

#### 3. 自動ログイン（認証状態の保存）

引数の email/password を使って事前にログインし、認証状態をファイルに保存する。
以下の Node.js スクリプトを実行する：

cd e2e-tests && node -e "
require('dotenv').config();
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    httpCredentials: {
      username: process.env.BASIC_AUTH_USER,
      password: process.env.BASIC_AUTH_PASSWORD
    }
  });
  const page = await context.newPage();
  await page.goto('${tenantUrl}/signin');

  // メールでログイン
  await page.getByTestId('loginBtn.email').click();
  await page.getByLabel('メールアドレス *').fill('${email}');
  await page.getByLabel('パスワード *').fill('${password}');
  await page.getByRole('button', { name: '続ける' }).click();
  await page.waitForURL(/.*\/(dashboard|admin).*/, { timeout: 30000 });

  // 認証状態をファイルに保存
  await context.storageState({ path: '${AUTH_FILE}' });
  await browser.close();
  console.log('ログイン成功');
})().catch(e => {
  console.error('ログイン失敗:', e.message);
  process.exit(1);
});
"

#### 4. Playwright Codegen の起動

以下のコマンドを `run_in_background: true` で起動する：

npx playwright codegen \
  --browser chromium \
  --target playwright-test \
  --load-storage '${AUTH_FILE}' \
  --output '${TEMP_FILE}' \
  'https://${tenantHost}${path}'

`--load-storage` で事前に保存した認証状態を読み込むため、ブラウザはログイン済みの状態で開く。

### フェーズ2: 記録完了の検知と読み込み

ユーザーが「完了」と入力したら、一時ファイルの存在を確認し、Read ツールで読み込む。

### フェーズ3: AI 解析・クリーンアップ

読み込んだ生コードに対して、以下の解析・変換を順番に実行する。

#### 1. ミスクリック・不要操作の検出と削除

**自動削除するパターン：**

| パターン | 説明 | 例 |
|---------|------|-----|
| IME キーイベント | 日本語入力切り替え | `press('KanjiMode')`, `press('Eisu')` |
| 重複 click | 同一要素への連続クリック | 最後の1回のみ残す |
| click → fill | fill の直前にある同一要素の click | click を削除 |
| 重複 fill | 同一要素への連続 fill | 最後の値のみ残す |
| Enter 後の重複 fill | Enter キー後に同一値で fill | 重複 fill を削除 |
| 空の fill | 空文字列での fill | 削除 |
| 重複 goto | 連続する同じURLへの goto | 最後の1回のみ |

**ユーザーに確認するパターン：**

| パターン | 説明 | 対応 |
|---------|------|------|
| goBack | ブラウザバック | 前の操作がミスの可能性を確認 |
| 値変更 fill | 同一要素で異なる値を fill | 意図的な変更か確認 |

#### 2. ログインヘルパーの適用

ログインシーケンスを検出し、`loginWithEmail` ヘルパーに置き換える。

#### 3. Vuetify ヘルパーの適用

Vuetify コンポーネント操作パターンを検出し、ヘルパー関数に置き換える。

| 検出パターン | ヘルパー関数 |
|-------------|-------------|
| combobox click + option click | `selectComboboxOption(page, X, Y)` |
| combobox fill + option click | `searchAndSelectComboboxOption(page, X, search, Y)` |
| dialog button click | `clickDialogButton(page, X)` |
| tab click | `clickTab(page, X)` |
| row checkbox click | `toggleRowCheckbox(page, X)` |
| side menu link click | `clickSideMenuLink(page, X)` |
| snackbar wait | `waitForToast(page)` / `waitForToastWithMessage(page, msg)` |

#### 4. 既存 POM クラスの活用提案

記録された操作に対応する POM メソッドがある場合は提案のみ行う（自動適用はしない）。

#### 5. test.step への分割（1挙動1ステップ）

記録された操作を 1つのPlaywrightアクション = 1つの `test.step()` で分割する。

**ステップ命名規則（日本語）：**

| アクション | ステップ名パターン | 例 |
|-----------|-------------------|----|
| `.click()` on button | 「{ボタン名}」ボタンをクリック | 「保存」ボタンをクリック |
| `.click()` on link | 「{リンク名}」リンクをクリック | 「ワークフロー管理」リンクをクリック |
| `.fill()` | {フィールド名}を入力 | ワークフロー名を入力 |
| `.check()` | 「{ラベル}」をチェック | 「必須」をチェック |
| `expect().toBeVisible()` | {要素}が表示されることを確認 | 成功メッセージが表示されることを確認 |
| `page.goto()` | {ページ名}に遷移 | ワークフロー管理画面に遷移 |

#### 6. アサーション追加の提案

記録されたコードにアサーションが不足している箇所で、追加を提案する。

#### 7. ESLint ルール適合 + コードスタイル統一

プロジェクトの ESLint ルールとコードスタイルに自動で適合させる。

### フェーズ4: テストファイルの作成

出力先とテスト名をユーザーに確認し、テストファイルを作成。ESLint チェック後、完了報告する。

### フェーズ5: テスト実行（オプション）

ユーザーが希望する場合、テストを実行。失敗した場合は原因を分析し、修正を提案する。

### フェーズ6: 一時ファイルのクリーンアップ

テストファイル作成完了後、一時ファイルを削除する。

Playwright Codegenとは

Playwright Codegenは、Playwrightに標準搭載されている操作記録ツールです。
ブラウザ上での操作がリアルタイムでTypeScriptコードに変換されます。

Autifyのような「ノーコード」感覚でテストの骨格を作成でき、プログラミング経験が少ないメンバーでも参加しやすいのが特徴です。

コマンドを実行すると、2つのウィンドウが開きます。

flowchart LR
    subgraph Browser["Chromiumブラウザ"]
        Action["ユーザー操作<br/>クリック・入力など"]
    end
    subgraph Inspector["Playwright Inspector"]
        Code["TypeScriptコード<br/>リアルタイム生成"]
        Copy["コピーボタン"]
    end
    Action --> Code
    Code --> Copy

• Chromiumブラウザ: 実際に操作を行うウィンドウ
• Playwright Inspector: 操作がコードとして記録されるウィンドウ

ブラウザで操作するたびに、Playwright Inspectorにコードが自動生成されていきます。

なぜPlaywright Codegenを選んだのか

kickflowでは現在、Autifyからの移行を進めています。
移行の詳細は前回の記事で紹介しましたが、QAメンバーがコードベースのテストに参加できる方法を模索していました。

検討したアプローチは2つありました。

Playwright Codegenは操作の忠実な再現が強みです。
複雑なシナリオやマルチユーザーでの検証など、実際の操作を正確にテスト化したい場合に適しています。

一方、Playwright MCPはURLを指定するだけでAIがページを分析してテストを生成します。
スモークテストの自動生成やカバレッジ拡大には便利ですが、複雑なビジネスロジックの再現は苦手です。

QAメンバーが新機能のテストを作成するには、Playwright Codegenの方が適していると判断しました。

従来の方法と /codegen-test スキルの比較

Playwright Codegenを採用したものの、当初はいくつかの手作業が残っていました。
そこで、これらを自動化する /codegen-test スキルをClaude Codeのカスタムスキルとして開発しました。

従来はCodegenで記録したコードをInspectorからコピーし、Claude Codeに貼り付けて整形を依頼する必要がありました。
/codegen-test では、コマンド1つでログインからコード整形まですべて自動化されます。

テスト作成ワークフロー

/codegen-test スキルを使ったテスト作成は、3つのステップで完結します。

flowchart TB
    Start["開始"]
    Step1["1. /codegen-test コマンド実行<br/>URL・認証情報を指定"]
    Step2["2. ブラウザで操作を記録<br/>ログイン済みの状態で開く"]
    Step3["3. ブラウザを閉じる<br/>AIが自動でクリーンアップ・整形"]
    Decision{"テスト成功？"}
    Complete["完了"]

    Start --> Step1
    Step1 --> Step2
    Step2 --> Step3
    Step3 --> Decision
    Decision -->|Yes| Complete
    Decision -->|No| Step3

ステップ1: /codegen-test コマンドの実行

Claude Codeでスラッシュコマンドを実行します。

/codegen-test https://example.kickflow.com/admin/workflows/new user@example.com password

第1引数にテスト対象のURL、第2引数にメールアドレス、第3引数にパスワードを指定します。
コマンド実行後、自動ログインが行われ、ログイン済みの状態でChromiumブラウザが開きます。

ステップ2: ブラウザで操作を記録

ログイン済みの状態でブラウザが開くので、すぐにテストしたい操作を始められます。
クリック、入力、選択など、すべての操作がバックグラウンドで記録されます。

Playwright Inspectorのツールバーには、アサーション（検証）を追加するボタンがあります。

• Assert text: テキストが表示されていることを確認
• Assert visible: 要素が表示されていることを確認
• Assert value: 入力値を確認

操作中のポイント:

• ミスクリックしても大丈夫 → AIが後で自動検出・除去します
• 日本語入力の切り替え操作も気にしなくてOK → 自動で除去されます
• ゆっくり操作して大丈夫 → 急ぐ必要はありません
• やり直したい場合 → そのまま操作し直してOK（AIが重複を検出します）

ステップ3: ブラウザを閉じてAI整形

操作が完了したら、ブラウザとPlaywright Inspectorの両方を閉じます。
Claude Codeに「完了」と入力すると、AIが以下の処理をすべて自動で行います。

• 余計な操作（KanjiMode、EisuなどのIME操作、重複クリック）の検出・削除
• ログイン処理の共通化（loginWithEmailヘルパーへの置き換え）
• Vuetifyコンポーネント操作のヘルパー関数適用
• test.stepでの日本語ステップ分割
• 既存Page Objectクラスの活用提案
• ESLintルール・コードスタイルへの適合
• テストファイルの出力

従来のようにコードをコピーして貼り付ける必要はありません。
テストが失敗した場合は、Claude Codeに「ここで落ちてるから直して」と伝えるだけで修正してくれます。

/codegen-test スキルのアーキテクチャ

全体の仕組み

/codegen-test は4つのフェーズで動作します。

flowchart TB
    Command["/codegen-test URL email password<br/>（Claude Codeでコマンド実行）"]
    Phase1["フェーズ1: 自動ログイン + Codegen起動<br/>ヘッドレスで自動ログイン → 認証状態を保存<br/>--load-storage で認証済みブラウザを開く<br/>--output でコードをファイルに自動保存"]
    Phase2["フェーズ2: ブラウザ操作<br/>ログイン不要で即操作開始<br/>ミスクリックもOK<br/>操作完了後にブラウザを閉じる"]
    Phase3["フェーズ3: AIクリーンアップ<br/>不要操作の除去<br/>ヘルパー関数の適用<br/>test.stepへの分割<br/>POM活用の提案"]
    Phase4["フェーズ4: テストファイル出力<br/>scenarios/{カテゴリ}/テスト名.spec.ts<br/>ESLintチェック → テスト実行"]

    Command --> Phase1
    Phase1 --> Phase2
    Phase2 --> Phase3
    Phase3 --> Phase4

使用している技術

自動ログインの仕組みは、Playwright Codegenの --load-storage フラグを活用しています。
事前にヘッドレスブラウザでログインし、認証状態（Cookie・ストレージ）をJSONファイルに保存。
Codegenはこのファイルを読み込んで、ログイン済みの状態でブラウザを起動します。

AIが自動でやってくれること

1. 不要な操作の除去

ブラウザ操作を記録すると、IME切り替えやミスクリックなどの「ノイズ」が混ざります。
AIがこれらを自動で検出・除去します。

Before（Codegenの生コード）:

await page.getByRole('textbox', { name: '部分一致' }).click();
await page.getByRole('textbox', { name: '部分一致' }).press('KanjiMode');
await page.getByRole('textbox', { name: '部分一致' }).fill('サンプル');
await page.getByRole('textbox', { name: '部分一致' }).press('Eisu');
await page.getByRole('textbox', { name: '部分一致' }).press('Enter');
await page.getByRole('textbox', { name: '部分一致' }).fill('サンプル');

After（AIクリーンアップ後）:

await page.getByRole('textbox', { name: '部分一致' }).fill('サンプル')
await page.getByRole('textbox', { name: '部分一致' }).press('Enter')

2. ログイン処理のヘルパー化

Before:

await page.getByTestId('loginBtn.email').click();
await page.getByLabel('メールアドレス *').fill('user@kickflow.com');
await page.getByLabel('パスワード *').fill('YourPassword');
await page.getByRole('button', { name: '続ける' }).click();

After:

await loginWithEmail(page, {
  email: TEST_EMAIL,
  password: TEST_PASSWORD,
  waitForUrl: /.*\/admin\/workflows\/new.*/,
})

3. Vuetifyヘルパーの適用

kickflowはVuetifyを使用しているため、コンボボックスやダイアログなどの操作が複雑になりがちです。
AIがプロジェクト共通のヘルパー関数に自動で置き換えます。

Before:

await page.getByRole('combobox', { name: 'カテゴリ' }).click();
await page.getByRole('option', { name: '経費' }).click();

After:

await selectComboboxOption(page, 'カテゴリ', '経費')

4. test.stepへの分割

操作を論理的なステップに分割し、日本語のステップ名を付けます。
テストレポートで「どの処理で失敗したか」が一目でわかるようになります。

Before（1つの長いテスト）:

test('テスト', async ({ page }) => {
  await page.goto('/signin')
  // ... 50行のフラットなコード
})

After（ステップで分割）:

test('申請者自身を承認者とする経路を作成し、削除できること', async ({ page }) => {
  await test.step('ログイン', async () => {
    await page.goto(`${TENANT_URL}/signin`)
    await loginWithEmail(page, { email: TEST_EMAIL, password: TEST_PASSWORD })
  })

  await test.step('経路名を入力', async () => {
    await page.getByRole('textbox', { name: '例: 課長・部長承認の経路' }).fill('自己承認')
  })

  await test.step('バージョンを保存して検証', async () => {
    await page.getByRole('button', { name: 'バージョンを保存' }).click()
    await expect(page.getByRole('heading')).toContainText('自己承認')
  })
})

5. POM（Page Object）活用の提案

プロジェクトには既に多数のPage Objectクラスがあります。
記録した操作と一致するものがある場合、AIが活用を提案します。

【POM活用の提案】
以下の操作は既存のPage Objectクラスで置き換えられます：
  - page.goto('/admin/workflows') → WorkflowListPage.navigateToWorkflowList()
  - page.getByLabel('フリーワード検索').fill('X') → WorkflowListPage.searchWorkflow('X')
適用しますか？

実際のコード例

経路の作成と削除テストから、/codegen-test で生成されたコードを紹介します。

import { test, expect } from '../../fixtures'
import { loginWithEmail } from '../../helpers/auth'
import { clickDialogButton, waitForToastWithMessage } from '../../helpers/ui'

// テナントURL
const TENANT_URL = 'https://hogehoge'

test.describe('経路の作成と削除（申請者自身）', () => {
  test('申請者自身を承認者とする経路を作成し、削除できること', async ({ page }) => {
    await test.step('ログイン', async () => {
      await page.goto(`${TENANT_URL}/signin`)
      await loginWithEmail(page, {
        email: TEST_EMAIL,
        password: TEST_PASSWORD,
        waitForUrl: /.*\/admin\/routes.*/,
      })
    })

    await test.step('経路の新規作成画面を開く', async () => {
      await page.goto(`${TENANT_URL}/admin/routes`)
      await page.getByRole('link', { name: '新規作成' }).click()
    })

    await test.step('経路名を入力', async () => {
      await page.getByRole('textbox', { name: '例: 課長・部長承認の経路' }).fill('自己承認')
    })

    await test.step('承認ステップを追加・設定', async () => {
      await page.getByRole('button', { name: 'ステップを追加' }).click()
      await page.getByRole('button', { name: 'ステップ情報:' }).click()
      await page.getByRole('textbox', { name: '例: 課長承認ステップ' }).fill('自己承認')
      await page.getByRole('button', { name: '承認者:' }).click()
      await page.getByText('申請者自身').click()
    })

    await test.step('バージョンを保存して検証', async () => {
      await page.getByRole('button', { name: 'バージョンを保存' }).click()
      await expect(page.getByRole('heading')).toContainText('自己承認')
    })

    await test.step('保存内容を検証', async () => {
      await page.getByRole('button', { name: '#1: 自己承認 申請者自身' }).click()
      await expect(page.getByRole('main')).toContainText('自己承認を許可する許可する')
    })

    await test.step('経路を削除', async () => {
      await page.getByRole('button', { name: '削除' }).click()
      await expect(page.getByRole('dialog')).toContainText('本当に経路を削除してよろしいですか？')
      await clickDialogButton(page, '削除')
      await waitForToastWithMessage(page, '削除しました')
    })
  })
})

ブラウザで操作しただけで、ヘルパー関数の適用・test.stepへの分割・アサーションの追加がすべて自動で行われています。

Playwright CodegenとPlaywright MCPの比較

Playwright CodegenとPlaywright MCPは、どちらもE2Eテストの作成を効率化するツールですが、アプローチが異なります。

使い分けの指針

Playwright Codegenが向いているケース:

• 複雑なビジネスロジックを検証するとき
• マルチユーザーシナリオ（権限確認など）をテストするとき
• 操作手順が明確に決まっているとき
• 再現性の高いテストを作成したいとき

Playwright MCPが向いているケース:

• ページの構造を理解してテストを生成したいとき
• 探索的にテストを作成したいとき
• AIとの対話でテストを改善していきたいとき

成果と今後の展望

成果

/codegen-test スキルの導入により、以下の成果が得られました。

• プログラミング経験が浅いQAメンバーでもE2Eテストを作成可能に
• コードのコピー・貼り付け・整形依頼が不要になり、テスト作成の手間を大幅に削減
• ヘルパー関数やPOMの自動適用により、コード品質の均一化を実現
• Claude Codeとの組み合わせでテスト修正・デバッグの効率化

今後の展望

• ヘルパー関数のさらなる充実: 頻出パターンをヘルパー化して、テスト作成の効率を向上
• Autifyからの移行完了: 2026年前半に移行完了を目指す

まとめ

Playwright Codegenの--load-storage（自動ログイン）と--output（自動ファイル保存）、そしてClaude Codeによる自動整形を組み合わせた /codegen-test スキルにより、コードを書けなくてもE2Eテストを作成できる環境を構築しました。

• ブラウザ操作を記録するだけでテストの骨格が完成
• AIが自動でクリーンアップ・整形してくれるので、プログラミング経験は不要
• ヘルパー関数・POMの自動適用により、コード品質も担保
• Playwright MCPとの使い分けで、適材適所のテスト戦略を実現

QAメンバーがコードベースのテストに参加できる体制が整い、テストカバレッジの向上と開発スピードの両立が可能になりました。

kickflowでは、一緒にプロダクトを創り上げてくれる仲間を募集しています!
少しでもご興味をお持ちいただけた方は、ぜひ採用サイトをご覧ください。

careers.kickflow.co.jp