【自動化】playwright-mcpを駆使し、ソフトウェアテストの設計から実行、テスト結果の出力までの自動化を試みる

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

- navigation:
    - list:
        - listitem:
            - link "ホーム"
        - listitem:
            - link "概要"
        - listitem:
            - link "お問い合わせ"

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless"]
    }
  }
}

mise use -g node@lts

npx --version

which npx

where npx

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

    "command": "/Users/{ユーザー名}/.local/share/mise/installs/node/22.14.0/bin/npx"

    "command": "C:\Users\{ユーザー名}\scoop\apps\mise\current\mise\installs\node\22.14.0\npx.cmd"

# Sqripts.com のテストケース

## 1. ナビゲーションとリンクテスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|1.1|ヘッダーナビゲーションリンクの動作確認|Sqripts.comのトップページにアクセスする|1. 各ナビゲーションリンク（テクノロジー、品質、エンジニアリング、スクリプター、特集、ニュース、資料ダウンロード、Sqriptsについて）をクリックする|各リンクをクリックすると対応するページに正しく遷移する|
|1.2|「新規登録・ログイン」リンクの動作確認|Sqripts.comのトップページにアクセスする|1. 「新規登録・ログイン」リンクをクリックする|ログインページに正しく遷移する|
|1.3|フッターリンクの動作確認|Sqripts.comのトップページにアクセスする|1. フッター内の全てのリンクを一つずつクリックする|各リンクが正しく対応するページに遷移する|
|1.4|記事カテゴリタグリンクの動作確認|任意の記事ページを開く|1. 記事に付与されているカテゴリタグ（品質、エンジニアリング、ソフトウェアテストなど）をクリックする|対応するカテゴリページに正しく遷移する|

## 2. コンテンツ表示テスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|2.1|おすすめ記事セクションの表示確認|Sqripts.comのトップページにアクセスする|1. 「RECOMMEND おすすめ記事」セクションを確認する|おすすめ記事が正しく表示され、タイトル、日付、カテゴリ、著者情報が表示されている|
|2.2|最新記事セクションの表示確認|Sqripts.comのトップページにアクセスする|1. 「LATEST 最新記事」セクションを確認する<br>2. 複数の記事が表示されていることを確認する|複数の最新記事がサムネイル画像、タイトル、日付、カテゴリ、著者情報と共に表示されている|
|2.3|ランキングセクションの表示確認|Sqripts.comのトップページにアクセスする|1. 「RANKING アクセスランキング」セクションを確認する|人気記事が順位付けされて表示されている|
|2.4|著者情報の表示確認|任意の記事ページを開く|1. 記事内の著者情報（名前、画像）を確認する|著者の名前と画像が正しく表示されている|
|2.5|記事本文の表示確認|任意の記事ページを開く|1. 記事のタイトル、日付、カテゴリ、本文を確認する|記事の全コンテンツが正しく表示されている|

## 3. 機能テスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|3.1|「もっと見る」ボタンの動作確認|Sqripts.comのトップページにアクセスする|1. 最新記事セクション下部の「もっと見る」リンクをクリックする|記事一覧ページに正しく遷移し、より多くの記事が表示される|
|3.2|タグによる記事絞り込み機能確認|Sqripts.comのトップページにアクセスする|1. 「#TAGS 人気のタグ」セクションから任意のタグ（例：「AI」「ソフトウェアテスト」）をクリックする|選択したタグに関連する記事のみが表示されるページに遷移する|
|3.3|イベント・ニュースバナーの確認|Sqripts.comのトップページにアクセスする|1. 「EVENT・NEWS」セクションのバナーをクリックする|バナーに対応するイベントページやニュースページに正しく遷移する|

## 4. レスポンシブデザインテスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|4.1|モバイル表示確認|モバイルデバイスまたはブラウザの開発者ツールでモバイル表示を有効にする|1. Sqripts.comのトップページを表示する<br>2. 画面をスクロールし、各セクションの表示を確認する|全てのコンテンツがモバイル画面に適切に表示され、レイアウトが崩れない|
|4.2|タブレット表示確認|タブレットデバイスまたはブラウザの開発者ツールでタブレット表示を有効にする|1. Sqripts.comのトップページを表示する<br>2. 画面をスクロールし、各セクションの表示を確認する|全てのコンテンツがタブレット画面に適切に表示され、レイアウトが崩れない|
|4.3|画面回転時の表示確認|モバイルデバイスまたはブラウザの開発者ツールでモバイル表示を有効にする|1. Sqripts.comのトップページを表示する<br>2. 画面を横向きに回転させる|横向き表示でもコンテンツが適切に表示される|

## 5. パフォーマンステスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|5.1|トップページの読み込み速度確認|ブラウザの開発者ツールを開く|1. 開発者ツールのNetworkタブを有効にする<br>2. Sqripts.comのトップページをリロードする<br>3. 読み込み完了時間を確認する|ページの読み込み時間が3秒以内である|
|5.2|画像の最適化確認|ブラウザの開発者ツールを開く|1. 開発者ツールのNetworkタブを有効にする<br>2. Sqripts.comのトップページをリロードする<br>3. 画像ファイルのサイズを確認する|画像が適切に最適化されており、大きなファイルサイズの画像がない|
|5.3|記事ページの読み込み速度確認|ブラウザの開発者ツールを開く|1. 開発者ツールのNetworkタブを有効にする<br>2. 任意の記事ページを開く<br>3. 読み込み完了時間を確認する|記事ページの読み込み時間が3秒以内である|

## 6. 機能性テスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|6.1|検索機能の動作確認|Sqripts.comのトップページにアクセスする|1. 検索ボックスにキーワード（例：「テスト自動化」）を入力する<br>2. 検索を実行する|入力したキーワードに関連する記事が検索結果に表示される|
|6.2|新規登録機能の確認|「新規登録・ログイン」ページにアクセスする|1. 新規登録に必要な情報を入力する<br>2. 登録ボタンをクリックする|アカウントが正常に作成され、ログイン状態となる|
|6.3|ログイン機能の確認|「新規登録・ログイン」ページにアクセスする|1. 既存アカウントの情報を入力する<br>2. ログインボタンをクリックする|正常にログインでき、ログイン状態となる|

## 7. アクセシビリティテスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|7.1|画像の代替テキスト確認|ブラウザの開発者ツールを開く|1. トップページの画像要素を検査する<br>2. alt属性の値を確認する|全ての重要な画像に適切な代替テキストが設定されている|
|7.2|キーボードナビゲーション確認|Sqripts.comのトップページにアクセスする|1. マウスを使用せず、Tabキーのみでページ内を移動する<br>2. Enterキーでリンクを開く|キーボードのみでページのすべての機能にアクセスできる|
|7.3|フォントサイズの変更確認|Sqripts.comのトップページにアクセスする|1. ブラウザの設定でフォントサイズを大きくする（Ctrl + または Cmd +）|コンテンツが読みやすく表示され、レイアウトが崩れない|

## 8. セキュリティテスト

|ID|テスト項目|前提条件|テスト手順|期待結果|
|---|---|---|---|---|
|8.1|HTTPSプロトコルの確認|ブラウザでSqripts.comにアクセスする|1. URLバーの鍵アイコンを確認する|サイトがHTTPSで保護されている|
|8.2|パスワード強度の確認|「新規登録・ログイン」ページにアクセスする|1. 新規登録フォームで弱いパスワードを入力する|強度が不足しているパスワードを拒否または警告が表示される|

## 9. クロスブラウザテスト

| ID  | テスト項目        | 前提条件                   | テスト手順                                                                     | 期待結果                   |
| --- | ------------ | ---------------------- | ------------------------------------------------------------------------- | ---------------------- |
| 9.1 | Chrome互換性確認  | Google Chromeブラウザを起動する | 1. Sqripts.comのトップページにアクセスする<br>2. 各セクションの表示を確認する<br>3. リンクをクリックして動作を確認する | すべての機能とデザインが正常に表示・動作する |
| 9.2 | Firefox互換性確認 | Firefoxブラウザを起動する       | 1. Sqripts.comのトップページにアクセスする<br>2. 各セクションの表示を確認する<br>3. リンクをクリックして動作を確認する | すべての機能とデザインが正常に表示・動作する |
| 9.3 | Safari互換性確認  | Safariブラウザを起動する        | 1. Sqripts.comのトップページにアクセスする<br>2. 各セクションの表示を確認する<br>3. リンクをクリックして動作を確認する | すべての機能とデザインが正常に表示・動作する |

// navigation.spec.ts - Sqripts.comヘッダーナビゲーションリンクのテスト

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

test("1.1 ヘッダーナビゲーションリンクの動作確認", async ({ page }) => {
  // ナビゲーションリンクとその期待されるURLを定義
  const navLinks = [
    { name: "テクノロジー", url: "https://sqripts.com/category/technology/" },
    { name: "品質", url: "https://sqripts.com/category/quality/" },
    {
      name: "エンジニアリング",
      url: "https://sqripts.com/category/engineering/",
    },
    { name: "スクリプター", url: "https://sqripts.com/writer/" },
    { name: "特集", url: "https://sqripts.com/feature/" },
    { name: "ニュース", url: "https://sqripts.com/news/" },
    { name: "資料ダウンロード", url: "/document/" },
    { name: "Sqriptsについて", url: "https://sqripts.com/about/" },
  ];

  // テスト結果を保存する配列
  const results = [];

  // テスト開始時刻を記録
  const startTime = new Date();
  console.log(`テスト開始: ${startTime.toLocaleString()}`);

  try {
    // ホームページに移動
    console.log("Sqripts.comに移動中...");
    await page.goto("https://sqripts.com/");
    await page.waitForLoadState("domcontentloaded");

    console.log("ホームページのスクリーンショットを取得");
    await page.screenshot({ path: "./screenshots/homepage.png" });

    // 各ナビゲーションリンクをテスト
    for (const link of navLinks) {
      try {
        console.log(`ナビゲーションリンクをテスト中: ${link.name}`);

        // ナビゲーションリンクを見つけてクリック
        // ナビゲーションは通常、HTMLではnavタグに含まれているため、このセレクタを使用
        const linkElement = await page
          .locator(`nav >> text="${link.name}"`)
          .first();

        // クリック前にスクロールして要素を表示
        await linkElement.scrollIntoViewIfNeeded();

        // リンク要素がクリック可能かどうかを確認
        await expect(linkElement).toBeVisible();
        await expect(linkElement).toBeEnabled();

        // リンク要素をクリック
        await linkElement.click();

        // ページ遷移の完了を待機
        await page.waitForLoadState("networkidle");

        // 現在のURLを取得
        const currentUrl = page.url();

        // 遷移先ページのスクリーンショットを保存
        await page.screenshot({ path: `./screenshots/${link.name}-page.png` });

        // 期待されるURLに遷移したかどうかを確認
        // 相対URLの場合はベースURLを考慮する
        const expectedUrl = link.url.startsWith("http")
          ? link.url
          : `https://sqripts.com${link.url}`;
        const passed =
          currentUrl === expectedUrl || currentUrl.includes(link.url);

        // テスト結果を保存
        results.push({
          link: link.name,
          expectedUrl: expectedUrl,
          actualUrl: currentUrl,
          passed,
        });

        // コンソールにテスト結果を出力
        if (passed) {
          console.log(`✅ ${currentUrl} に正常に遷移しました`);
        } else {
          console.log(
            `❌ 遷移に失敗しました。期待値: ${expectedUrl}, 実際: ${currentUrl}`
          );
        }

        // 次のテストのためにホームページに戻る
        await page.goto("https://sqripts.com/");
        await page.waitForLoadState("domcontentloaded");
      } catch (error) {
        console.error(`エラー発生 ${link.name}のテスト中: ${error}`);
        results.push({
          link: link.name,
          expectedUrl: link.url,
          actualUrl: "Error",
          passed: false,
          error: error.toString(),
        });
      }
    }
  } catch (error) {
    console.error(`ホームページへの移動に失敗: ${error}`);
  }

  // テスト終了時刻を記録
  const endTime = new Date();
  const testDuration = (endTime.getTime() - startTime.getTime()) / 1000;
  console.log(`テスト終了: ${endTime.toLocaleString()}`);
  console.log(`テスト所要時間: ${testDuration}秒`);

  // テスト結果レポートを生成
  let passCount = 0;
  let failCount = 0;

  console.log("\n========== テスト結果レポート ==========");
  console.log("ヘッダーナビゲーションリンクテスト結果:");
  console.log("===================================");

  for (const result of results) {
    if (result.passed) {
      passCount++;
      console.log(`✅ ${result.link}: 成功`);
      console.log(`   期待値: ${result.expectedUrl}`);
      console.log(`   実際: ${result.actualUrl}`);
    } else {
      failCount++;
      console.log(`❌ ${result.link}: 失敗`);
      console.log(`   期待値: ${result.expectedUrl}`);
      console.log(`   実際: ${result.actualUrl}`);
      if (result.error) {
        console.log(`   エラー: ${result.error}`);
      }
    }
    console.log("-----------------------------------");
  }

  console.log(`\n概要: ${passCount}成功, ${failCount}失敗`);
  console.log("===================================");

  // すべてのナビゲーションリンクが正常に動作したことを検証
  expect(failCount).toBe(0);
});

// playwright.config.ts - Playwrightの設定ファイル

import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  testDir: "./tests",
  timeout: 60000, // タイムアウトを60秒に設定
  reporter: [
    ["html"], // HTMLレポートを生成
    ["list"], // コンソールに結果リストを表示
    ["json", { outputFile: "test-results.json" }], // JSON形式のレポートも生成
  ],
  use: {
    // ブラウザの設定
    headless: false, // テスト実行時にブラウザを表示（視覚的に確認するため）
    viewport: { width: 1280, height: 720 }, // ブラウザのビューポートサイズ
    ignoreHTTPSErrors: true, // HTTPS証明書エラーを無視
    screenshot: "only-on-failure", // 失敗時のみスクリーンショットを撮影
    video: "on-first-retry", // 最初の再試行時にビデオを記録
    trace: "on-first-retry", // 最初の再試行時にトレースを記録

    // アクションのタイムアウト設定
    actionTimeout: 10000, // アクション（クリックなど）のタイムアウトを10秒に設定
    navigationTimeout: 15000, // ナビゲーション（ページ遷移）のタイムアウトを15秒に設定
  },
  // 並列実行の設定
  workers: 1, // シーケンシャルにテストを実行（ナビゲーションテストの場合は順序が重要）
  // プロジェクト固有の設定
  projects: [
    {
      name: "chromium",
      use: { browserName: "chromium" },
    },
    {
      name: "firefox",
      use: { browserName: "firefox" },
    },
    {
      name: "webkit",
      use: { browserName: "webkit" },
    },
  ],
  // フォルダ構造の設定
  outputDir: "test-results/", // テスト結果の出力ディレクトリ
};

export default config;

# 新しいディレクトリを作成
mkdir sqripts-test
cd sqripts-test

# npm プロジェクトを初期化
npm init -y

# Playwright をインストール
npm install -D @playwright/test

# Playwright ブラウザをインストール
npx playwright install

# スクリーンショットを保存するディレクトリを作成
mkdir screenshots

mkdir tests
touch tests/navigation.spec.ts
touch playwright.config.ts

# 新しいディレクトリを作成
mkdir sqripts-test
cd sqripts-test

# npm プロジェクトを初期化
npm init -y

# Playwright をインストール
npm install -D @playwright/test

# Playwright ブラウザをインストール
npx playwright install

# スクリーンショットを保存するディレクトリを作成
mkdir screenshots

# テストディレクトリとファイルを作成
mkdir tests
New-Item -Path tests/navigation.spec.ts -ItemType File
New-Item -Path playwright.config.ts -ItemType File

npx playwright test