6장: 시각적 회귀 테스트

[기준 이미지] vs [현재 이미지]
  -> 1px 안티앨리어싱 차이 -> 실패 (위양성)
  -> 날짜 텍스트 변경 -> 실패 (위양성)
  -> 버튼 누락 -> 실패 (진양성)
 
모두 "실패"로 보고되어 진짜 문제를 놓치기 쉽습니다.

import { test } from "@playwright/test";
import { Eyes, Target, Configuration, BatchInfo } from "@applitools/eyes-playwright";
 
test.describe("시각적 회귀 테스트 -- Applitools", () => {
  let eyes: Eyes;
 
  test.beforeEach(async () => {
    eyes = new Eyes();
    const config = new Configuration();
    config.setBatch(new BatchInfo("Sprint 42 Visual Tests"));
    config.setApiKey(process.env.APPLITOOLS_API_KEY!);
    
    // 반응형 테스트를 위한 다중 뷰포트
    config.addBrowser(1920, 1080, "chrome");
    config.addBrowser(1366, 768, "firefox");
    config.addBrowser(375, 812, "chrome"); // 모바일
    
    eyes.setConfiguration(config);
  });
 
  test.afterEach(async () => {
    await eyes.close();
  });
 
  test("메인 페이지 시각적 검증", async ({ page }) => {
    await eyes.open(page, "MyApp", "메인 페이지");
    await page.goto("/");
 
    // 전체 페이지 캡처
    await eyes.check("전체 페이지", Target.window().fully());
 
    // 특정 영역만 캡처
    await eyes.check(
      "헤더 영역",
      Target.region("#header").strict()
    );
 
    // 동적 콘텐츠 무시
    await eyes.check(
      "메인 콘텐츠",
      Target.region("#main-content")
        .ignoreRegions(".ad-banner", ".datetime-display")
        .layout()
    );
  });
 
  test("다크 모드 시각적 검증", async ({ page }) => {
    await eyes.open(page, "MyApp", "다크 모드");
    await page.goto("/");
 
    // 다크 모드 전환
    await page.click("[data-testid='theme-toggle']");
    await page.waitForTimeout(300); // 트랜지션 완료 대기
 
    await eyes.check("다크 모드 전체", Target.window().fully().strict());
  });
});

import { test } from "@playwright/test";
import percySnapshot from "@percy/playwright";
 
test.describe("시각적 회귀 테스트 -- Percy", () => {
  test("메인 페이지 스냅샷", async ({ page }) => {
    await page.goto("/");
    await percySnapshot(page, "메인 페이지", {
      widths: [375, 768, 1280, 1920],
      minHeight: 1024,
    });
  });
 
  test("상품 목록 페이지 스냅샷", async ({ page }) => {
    await page.goto("/products");
    
    // 데이터 로딩 완료 대기
    await page.waitForSelector("[data-testid='product-list']");
    
    await percySnapshot(page, "상품 목록", {
      percyCSS: `
        .ad-banner { display: none !important; }
        .timestamp { visibility: hidden !important; }
      `,
    });
  });
});

npm install --save-dev chromatic
npx chromatic --project-token=YOUR_TOKEN

import { Page } from "@playwright/test";
 
/**
 * 시각적 테스트를 위해 동적 콘텐츠를 안정화합니다.
 */
export async function stabilizeForVisualTest(page: Page): Promise<void> {
  await page.addStyleTag({
    content: `
      /* 애니메이션 비활성화 */
      *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
      }
 
      /* 캐러셀 자동 전환 비활성화 */
      .carousel { animation-play-state: paused !important; }
 
      /* 커서 깜빡임 비활성화 */
      * { caret-color: transparent !important; }
    `,
  });
 
  // 날짜/시간 표시를 고정값으로 대체
  await page.evaluate(() => {
    document.querySelectorAll("[data-dynamic='date']").forEach((el) => {
      el.textContent = "2026-01-01";
    });
    document.querySelectorAll("[data-dynamic='time']").forEach((el) => {
      el.textContent = "12:00:00";
    });
  });
 
  // 이미지 로딩 완료 대기
  await page.evaluate(() => {
    return Promise.all(
      Array.from(document.images)
        .filter((img) => !img.complete)
        .map(
          (img) =>
            new Promise((resolve) => {
              img.onload = resolve;
              img.onerror = resolve;
            })
        )
    );
  });
}

import { test, expect } from "@playwright/test";
 
const viewports = [
  { name: "모바일", width: 375, height: 812 },
  { name: "태블릿", width: 768, height: 1024 },
  { name: "데스크톱", width: 1280, height: 800 },
  { name: "와이드", width: 1920, height: 1080 },
];
 
for (const viewport of viewports) {
  test(`${viewport.name} 뷰포트에서 메인 페이지 검증`, async ({ page }) => {
    await page.setViewportSize({
      width: viewport.width,
      height: viewport.height,
    });
    await page.goto("/");
 
    // 레이아웃 모드로 비교 -- 콘텐츠 차이 무시, 구조만 검증
    const screenshot = await page.screenshot({ fullPage: true });
    expect(screenshot).toMatchSnapshot(
      `main-page-${viewport.name}.png`,
      { threshold: 0.05 }
    );
  });
}

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
 
const meta: Meta<typeof Button> = {
  title: "UI/Button",
  component: Button,
  argTypes: {
    variant: {
      control: "select",
      options: ["primary", "secondary", "danger", "ghost"],
    },
    size: {
      control: "select",
      options: ["sm", "md", "lg"],
    },
  },
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Primary: Story = {
  args: { variant: "primary", children: "기본 버튼" },
};
 
export const Secondary: Story = {
  args: { variant: "secondary", children: "보조 버튼" },
};
 
export const Danger: Story = {
  args: { variant: "danger", children: "삭제" },
};
 
export const AllVariants: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", padding: "16px" }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  ),
};
 
export const Disabled: Story = {
  args: { variant: "primary", children: "비활성", disabled: true },
};