mcpField
W
webapp-testing

webapp-testing

github.com/moizibnyousafテスト・品質1.2k162 回インストール6 週間前に更新
リポジトリ

webapp-testing について

Playwrightを使ったウェブアプリテスト用スキルです。ページ操作、アサーション、スクリーンショット、ログやページエラー、ネットワークのインターセプト、テスト実行を扱います。

主な機能

  1. 01ページの移動と操作
  2. 02フォーム項目の入力と選択
  3. 03ページや要素の状態を検証
  4. 04ページ全体や要素の撮影
  5. 05ログ監視とリクエストのインターセプト
  6. 06Playwrightテストの実行

活用シーン

  1. 01ページ遷移とフォームのテスト
  2. 02コンテンツやUI状態の検証
  3. 03レビュー用スクリーンショットの撮影
  4. 04テストでのAPIレスポンスの模擬

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill webapp-testing

インストール後、Claude Code で/webapp-testingを入力して読み込まれたか確認します。

詳細

Playwright によるウェブアプリのテスト

セットアップ

npm init playwright@latest

基本的なテスト構造

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/My App/);
});

test('can navigate to about page', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=About');
  await expect(page).toHaveURL(/.*about/);
});

よく使う操作

ナビゲーション
await page.goto('http://localhost:3000');
await page.goBack();
await page.reload();
クリック
await page.click('button');
await page.click('text=Submit');
await page.click('#submit-btn');
await page.click('[data-testid="submit"]');
フォーム入力
await page.fill('input[name="email"]', '[email protected]');
await page.fill('#password', 'secret123');
await page.selectOption('select#country', 'USA');
await page.check('input[type="checkbox"]');
待機
await page.waitForSelector('.loaded');
await page.waitForURL('**/dashboard');
await page.waitForResponse('**/api/data');
await page.waitForTimeout(1000); // Avoid if possible

アサーション

await expect(page.locator('h1')).toHaveText('Welcome');
await expect(page.locator('.items')).toHaveCount(5);
await expect(page.locator('button')).toBeEnabled();
await expect(page.locator('.modal')).toBeVisible();
await expect(page.locator('input')).toHaveValue('test');

スクリーンショット

// Full page
await page.screenshot({ path: 'screenshot.png', fullPage: true });

// Element only
await page.locator('.chart').screenshot({ path: 'chart.png' });

コンソールログ

page.on('console', msg => console.log(msg.text()));
page.on('pageerror', err => console.error(err.message));

ネットワークのインターセプト

await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ items: [] })
  });
});

テストの実行

# Run all tests
npx playwright test

# Run specific file
npx playwright test tests/login.spec.ts

# Run in headed mode
npx playwright test --headed

# Run with UI
npx playwright test --ui

コメント

Markdown 対応