PlayWrightのテストコードをClaude.aiで生成して自動テスト

# はじめに
最近、Web アプリケーションの自動テストツールとして PlayWright が注目を集めています。本記事では、ChatGPT のライバルとして注目される Claude.ai を活用して、PlayWright のテストコードを効率的に生成する方法をご紹介します。
# PlayWrightとは
PlayWright は Microsoft が開発したモダンな Web テスト自動化フレームワークです。以下のような特徴があります：
* Chromium、Firefox、WebKit など主要なブラウザエンジンをサポート
* 自動待機機能による安定したテスト実行
* TypeScript/JavaScript での簡潔な API
* クロスプラットフォーム対応
* ヘッドレスモードでの高速な実行
# Claude.ai によるテストコード生成のメリット
* 自然言語での要件記述
* コンテキストを理解した適切なテストケースの提案
* ベストプラクティスに基づいたコード生成
* エラーハンドリングの実装
# テストコード生成の手順
## 1. テストシナリオの準備
まず、テストしたい機能を自然言語で記述します。例えば：
```
下記URLのサイトを自動テストを実施します。
playwrightのTypescriptコードを生成してください。
https://playwright.dev/
```
とプロンプト入力すると、下記のTypescriptテストコードを生成してくれます。
```sample.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Playwright Official Website Tests', () => {
  test.beforeEach(async ({ page }) => {
    // 各テストの前にトップページに移動
    await page.goto('https://playwright.dev/');
  });

  test('should have correct page title', async ({ page }) => {
    const title = await page.title();
    expect(title).toContain('Playwright');
  });

  test('should have visible logo', async ({ page }) => {
    const logo = page.locator('img[alt="Playwright"]').first();
    await expect(logo).toBeVisible();
  });

  test('should have working search functionality', async ({ page }) => {
    const searchButton = page.locator('button[aria-label="Search"]');
    await expect(searchButton).toBeVisible();
    await searchButton.click();
    
    const searchInput = page.locator('input[type="search"]');
    await expect(searchInput).toBeVisible();
  });

  test('should have main navigation links', async ({ page }) => {
    // 主要なナビゲーションリンクの存在確認
    const docs = page.getByRole('link', { name: 'Docs', exact: true });
    const api = page.getByRole('link', { name: 'API', exact: true });
    const community = page.getByRole('link', { name: 'Community', exact: true });

    await expect(docs).toBeVisible();
    await expect(api).toBeVisible();
    await expect(community).toBeVisible();
  });

  test('should load getting started guide', async ({ page }) => {
    const getStarted = page.getByRole('link', { name: 'Get started' }).first();
    await getStarted.click();
    
    // インストールガイドが表示されることを確認
    const installSection = page.locator('h1:has-text("Installation")');
    await expect(installSection).toBeVisible();
  });

  test('should have working dark mode toggle', async ({ page }) => {
    const darkModeButton = page.locator('button[aria-label="Switch between dark and light mode"]');
    await expect(darkModeButton).toBeVisible();
    
    // ダークモードに切り替え
    await darkModeButton.click();
    
    // bodyタグのdata-theme属性が変更されることを確認
    await expect(page.locator('html[data-theme="dark"]')).toBeVisible();
  });
});
```
## 2. テストコードの実行
生成されたコードをPlayWrightでテスト実行します。
PlayWrightのインストール方法は、Node.jsが入った環境で、`npm init playwright@latest`コマンドのみで数分で完了するので、ここでの説明は控えます。
下記コマンドでPlayWrightテスト実行が可能です。
```
npx playwright test sample.spec.ts
```
自動テストが完了すると、テスト結果をローカルホスト上で確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/ade0b440-df5b-b334-892b-4b12596c8f30.png)

Claude.ai を活用することで、PlayWright のテストコード作成を効率化できます。特に：
* 自然言語での要件定義から質の高いコードを生成
* ベストプラクティスに基づいた実装
* 迅速なプロトタイピングが可能

今後も AI による開発支援ツールは進化を続けると予想されます。効果的に活用することで、テスト工程の効率化と品質向上が期待できます。