【Storybook×Playwright】aumo Biz レポート画面へのフロントエンドテスト基盤構築の取り組み

'use client';
 
export function SampleButtonContainer() {
  const router = useRouter();
  const onClick = () => {
    router.push('/some-page');
  };
 
  return <SampleButton onClick={onClick} />;
}

export function SampleButton({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Button</button>;
}

// アプリケーション
export function SampleCardContainer() {
  const { data } = await fetchData();
  const { text } = data;
 
  return (
    <SampleCard
      text={text}
      button={<SampleButtonContainer />} // Container を注入
    />
  );
}
 
// Storybook
export const Default: StoryObj<typeof SampleCard> = {
  args: {
    text: 'サンプルカード',
    button: <SampleButton />, // Presenter を注入
  },
};

tests/
├── test-results/
│   ├── storybook-static/
│   ├── vrt-report/
│   ├── vrt-results/
│   └── vrt-snapshots/
└── vrt/
    └── storybook-visual.spec.ts

FROM mcr.microsoft.com/playwright:v1.56.1
 
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    fontconfig \
    fonts-noto \
    fonts-noto-cjk \
    fonts-noto-color-emoji \
    fonts-dejavu-core && \
    apt-get clean && \
    apt-get purge -y fonts-wqy-zenhei && \
    rm -rf /var/lib/apt/lists/*
 
RUN fc-cache -fv
 
RUN npm install @playwright/test@1.56.1 serve@14.2.5 --no-save

services:
  vrt:
    build:
      context: .
      dockerfile: docker/playwright/Dockerfile
    working_dir: /work
    ports:
      - '9323:9323'
    stdin_open: true
    volumes:
      - ./tests/test-results:/work/tests/test-results
      - ./tests/vrt:/work/tests/vrt
      - ./playwright.vrt.config.ts:/work/playwright.config.ts

import fs from 'node:fs';
import path from 'node:path';
import { expect, test } from '@playwright/test';
 
interface StoryEntry {
  id: string;
  title: string;
  name: string;
  type: 'story' | 'docs' | string;
}
 
interface StoryIndexJson {
  entries: Record<string, StoryEntry>;
}
 
const jsonPath = path.resolve(
  __dirname,
  '../test-results/storybook-static/index.json'
);
 
let stories: StoryIndexJson = { entries: {} };
 
if (fs.existsSync(jsonPath)) {
  stories = JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as StoryIndexJson;
}
 
const storyInfos = Object.values(stories.entries)
  .filter((s) => s.type === 'story')
  .map((s) => ({
    id: s.id,
    title: s.title,
    name: s.name,
  }));
 
for (const story of storyInfos) {
  test(`VRT: ${story.title} / ${story.name}`, async ({ page }) => {
    await page.goto(`iframe?id=${story.id}`, {
      waitUntil: 'networkidle',
    });
    await page.waitForTimeout(300);
    await page.evaluateHandle('document.fonts.ready');
    await page.evaluate(() => {
      document.documentElement.classList.add('dark');
    });
    await expect(page).toHaveScreenshot(`${story.id}.png`);
  });
 
  test(
    `VRT: ${story.title} / ${story.name} (dark)`,
    { tag: ['@dark'] },
    async ({ page }) => {
      await page.goto(`iframe?id=${story.id}`, {
        waitUntil: 'networkidle',
      });
      await page.waitForTimeout(300);
      await page.evaluateHandle('document.fonts.ready');
      await page.evaluate(() => {
        document.documentElement.classList.add('dark');
      });
      await expect(page).toHaveScreenshot(`${story.id}-dark.png`);
    }
  );
}

import { defineConfig, devices } from '@playwright/test';
 
const snapshotSuffix = process.env.SNAPSHOT_PATH || '/local';
 
export default defineConfig({
  testDir: './tests/vrt',
  outputDir: `./tests/test-results/vrt-results`,
  snapshotDir: `./tests/test-results/vrt-snapshots${snapshotSuffix}`,
 
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html', { open: 'never', outputFolder: 'tests/test-results/vrt-report' }],
    ['json', { outputFile: 'tests/test-results/test-results.json' }],
  ],
 
  use: {
    baseURL: 'http://localhost:6016',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    deviceScaleFactor: 4,
    video: 'off',
    headless: true,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], deviceScaleFactor: 2 },
    },
    {
      name: 'chromium-mobile',
      use: { ...devices['Pixel 7'], deviceScaleFactor: 2 },
    },
  ],
  webServer: {
    command: 'npx serve tests/test-results/storybook-static -l 6016',
    port: 6016,
    timeout: 120000,
  },
});

"scripts": {
  "storybook": "storybook dev -p 6006 --no-open",
  "storybook:build": "storybook build",
  "test:vrt": "pnpm storybook:build -o tests/test-results/storybook-static && docker compose exec -e SNAPSHOT_PATH=$SNAPSHOT_PATH vrt npx playwright@1.56.1 test",
  "test:vrt:update": "pnpm storybook:build -o tests/test-results/storybook-static && docker compose exec -e SNAPSHOT_PATH=$SNAPSHOT_PATH vrt npx playwright@1.56.1 test --update-snapshots",
  "test:vrt:report": "docker compose exec vrt npx playwright@1.56.1 show-report tests/test-results/vrt-report --host 0.0.0.0 --port 9323"
}