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

自動テストが完了すると、テスト結果をローカルホスト上で確認することができます。

Claude.ai を活用することで、PlayWright のテストコード作成を効率化できます。特に：

• 自然言語での要件定義から質の高いコードを生成
• ベストプラクティスに基づいた実装
• 迅速なプロトタイピングが可能

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