Merge pull request #20 from microcmsio/feature/add-e2e-test

PlaywrightでE2Eテストを追加

Author: himaratsu

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 22
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:e2e
+      env:
+        MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
+        MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+playwright-report
+test-results

README.md

@@ -31,6 +31,15 @@ microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の
 開発環境 → http://localhost:3000  
 本番環境 → https://xxxxxxxx.vercel.app/ など
 
+### GitHub Actionsへの環境変数の設定
+
+このリポジトリではPlaywrightによるE2Eテストが実装されています。
+GitHubに変更をプッシュする、あるいはPull Requestを作成すると自動でテストが実行されます。
+
+利用するにはGitHub Actionsのシークレットへの設定が必要です。
+[こちらの手順](https://docs.github.com/ja/actions/how-tos/write-workflows/choose-what-workflows-do/use-secrets)に従って、`MICROCMS_API_KEY`と`MICROCMS_SERVICE_DOMAIN`をシークレットに設定してください。
+
+
 ## 開発の仕方
 
 1. パッケージのインストール

e2e/article-detail.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('記事詳細ページ', () => {
+  let articleUrl: string;
+
+  test.beforeEach(async ({ page }) => {
+    // まず記事一覧ページに行き、最初の記事のURLを取得
+    await page.goto('/');
+    const firstArticleLink = page.locator('a[href*="/articles/"]').first();
+    await expect(firstArticleLink).toBeVisible();
+    articleUrl = await firstArticleLink.getAttribute('href') || '/articles/test';
+  });
+
+  test('記事詳細ページが正しく表示される', async ({ page }) => {
+    await page.goto(articleUrl);
+
+    // ページが正常に読み込まれることを確認
+    await expect(page).not.toHaveTitle('404');
+
+    // 記事のコンテンツが存在することを確認（最初に見つかった要素のみ）
+    const articleContent = page.locator('article').or(
+      page.locator('[data-testid="article-content"]')
+    ).or(
+      page.locator('main')
+    ).first();
+    
+    await expect(articleContent).toBeVisible();
+  });
+
+  test('記事タイトルが表示される', async ({ page }) => {
+    await page.goto(articleUrl);
+
+    // H1タグまたはタイトルが表示されることを確認（最初に見つかった要素のみ）
+    const title = page.locator('h1').or(
+      page.locator('[data-testid="article-title"]')
+    ).first();
+    
+    await expect(title).toBeVisible();
+    await expect(title).not.toBeEmpty();
+  });
+
+  test('記事の日付が表示される', async ({ page }) => {
+    await page.goto(articleUrl);
+
+    // 日付要素が存在することを確認
+    const dateElement = page.locator('[data-testid="article-date"]').or(
+      page.locator('time')
+    ).or(
+      page.locator('*').filter({ hasText: /\d{4}[-/]\d{1,2}[-/]\d{1,2}/ }).first()
+    );
+    
+    // 日付が存在する場合のみテスト
+    const dateCount = await dateElement.count();
+    if (dateCount > 0) {
+      await expect(dateElement.first()).toBeVisible();
+    }
+  });
+
+  test('記事の本文が表示される', async ({ page }) => {
+    await page.goto(articleUrl);
+
+    // 記事本文のコンテンツが存在することを確認
+    const content = page.locator('div').filter({ hasText: /\w+/ }).first();
+    
+    await expect(content).toBeVisible();
+  });
+
+  test('ホームページに戻るナビゲーションが機能する', async ({ page }) => {
+    await page.goto(articleUrl);
+
+    // ホームページリンクまたはロゴをクリック
+    const homeLink = page.locator('a[href="/"]').or(
+      page.locator('[data-testid="home-link"]')
+    ).first();
+    
+    // ホームリンクが存在する場合のみテスト
+    const homeLinkCount = await homeLink.count();
+    if (homeLinkCount > 0) {
+      await homeLink.click();
+      await expect(page).toHaveURL('/');
+    }
+  });
+});

e2e/articles-list.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('記事一覧ページ', () => {
+  test('記事一覧ページが正しく表示される', async ({ page }) => {
+    await page.goto('/');
+
+    // ページタイトルが存在することを確認
+    await expect(page).toHaveTitle(/Blog/);
+
+    // 記事リストが表示されることを確認
+    const articleList = page.locator('[data-testid="article-list"]').or(
+      page.locator('article').first()
+    ).or(
+      page.locator('a[href*="/articles/"]').first()
+    );
+    
+    // 記事が存在するか確認
+    await expect(articleList).toBeVisible();
+  });
+
+  test('記事リンクをクリックして詳細ページに遷移できる', async ({ page }) => {
+    await page.goto('/');
+
+    // 最初の記事リンクを取得してクリック
+    const firstArticleLink = page.locator('a[href*="/articles/"]').first();
+    await expect(firstArticleLink).toBeVisible();
+    
+    const href = await firstArticleLink.getAttribute('href');
+    await firstArticleLink.click();
+
+    // 記事詳細ページに遷移したことを確認
+    await expect(page).toHaveURL(new RegExp(href!));
+  });
+
+  test('ページネーションが表示される（記事が多い場合）', async ({ page }) => {
+    await page.goto('/');
+
+    // ページネーションが存在するかチェック（存在しない場合はスキップ）
+    const pagination = page.locator('[data-testid="pagination"]').or(
+      page.locator('nav').or(
+        page.locator('a[href*="/p/"]')
+      )
+    );
+    
+    const paginationCount = await pagination.count();
+    if (paginationCount > 0) {
+      await expect(pagination.first()).toBeVisible();
+    }
+  });
+});

package-lock.json

@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
+    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "prettier": {
     "trailingComma": "all",
@@ -37,5 +39,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.8.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.54.2"
   }
 }

package.json

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});