시각적 회귀 테스트 도입기

import { expect, test } from '@playwright/test';
 
test('should match DOM snapshot', async ({ page }) => {
  await page.goto('/about');
  const body = await page.locator('#__next').innerHTML();
  expect(body).toMatchSnapshot([`about.html`]);
});

import { expect, test } from '@playwright/test';
 
test('should match Screenshot', async ({ page }) => {
  await page.goto('/about');
  await expect(page).toHaveScreenshot({ fullPage: true });
});

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      # artifact에 playwright report를 업로드해 어디서 실패했는지 확인할 수 있다
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

{
  // ...
  "e2e:others": "pnpm playwright test --grep-invert /@/",
  "e2e:dom": "pnpm playwright test --grep '@dom-snapshot'",
  "e2e:screen": "pnpm playwright test --grep '@screen-snapshot'"
}

export enum MACRO_SUITE {
  DOM_SNAPSHOT = '@dom-snapshot',
  SCREEN_SNAPSHOT = '@screen-snapshot',
}
 
test.describe('about', () => {
  test(MACRO_SUITE.SCREEN_SNAPSHOT, async ({ page }) => {
    await screenshotFullPage({ page, url: `/about`, arg: [`about.png`] });
  });
 
  test(MACRO_SUITE.DOM_SNAPSHOT, async ({ page }) => {
    await gotoUrl({ page, url: '/about' });
    const body = await page.locator('#__next').innerHTML();
    expect(body).toMatchSnapshot([`about.html`]);
  });
 
  test('should redirect 404', async ({ page }) => {
    await gotoUrl({ page, url: '/something_wrong_path', timeout: 60_000 });
    await expect(page.getByText(/404 ERROR/)).toBeVisible();
  });
});

test.describe(MACRO_SUITE.SCREEN_SNAPSHOT, () => {
  for (let i = 0; i < urls.length; i++) {
    const url = urls[i];
 
    test(`${url}`, async ({ page }) => {
      await page.goto(`/posts/${url}`);
      await page.waitForTimeout(3000);
      await expect(page).toHaveScreenshot({ fullPage: true });
    });
  }
});

// Image 로딩 wait
const locators = page.locator('img');
const scrollPromises = (await locators.all()).map(async (locator) => {
  // https://playwright.dev/docs/api/class-locator#locator-scroll-into-view-if-needed
  // 이미지 요소가 준비되었는지 확인
  return await locator.scrollIntoViewIfNeeded();
});
await Promise.all(scrollPromises);
const imgLoadingPromises = (await locators.all()).map((locator) =>
  locator.evaluate<any, HTMLImageElement>(
    // 이미지 요소의 로딩 상태 확인
    (image) => image.complete || new Promise((f) => (image.onload = f)),
  ),
);
await Promise.all(imgLoadingPromises);
 
// Font wait
await page.evaluate(() => document.fonts.ready);

jobs:
  others:
    uses: './.github/workflows/e2e-reusable.yml'
    with:
      others: true
 
  dom-snapshot:
    uses: './.github/workflows/e2e-reusable.yml'
    with:
      dom-snapshot: true
 
  screen-snapshot:
    uses: './.github/workflows/e2e-reusable.yml'
    with:
      screen-snapshot: true

# playwright 설치 캐시
- name: Cache Playwright Browsers for Playwright's Version
  uses: actions/cache@v4
  with:
    # https://playwright.dev/docs/browsers#managing-browser-binaries
    path: ~/Library/Caches/ms-playwright
    key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
  id: cache-playwright-browsers
 
- name: Setup Playwright
  shell: bash
  if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
  run: pnpm e2e:install
 
# pnpm 설치 캐시
- name: Setup pnpm cache
  uses: actions/cache@v4
  with:
    path: ${{ env.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
    restore-keys: |
      ${{ runner.os }}-pnpm-store-
 
# Next.js Build and Export 캐시
- name: Restore Next.js related caches
  uses: actions/cache@v4
  with:
    path: |
      ${{ github.workspace }}/.next
      ${{ github.workspace }}/out
    key: ${{ runner.os }}-nextjs-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx', '**.md') }}-${{ inputs.e2e == 'true' && 'e2e' || 'default' }}
    restore-keys: |
      ${{ runner.os }}-nextjs-store-${{ hashFiles('**/pnpm-lock.yaml') }}-
  id: cache-nextjs-build
 
- name: Build and Export [default]
  shell: bash
  if: steps.cache-nextjs-build.outputs.cache-hit != 'true'
  run: pnpm e2e:build

jobs:
  my-job:
    runs-on: macos-latest

jobs:
  my-job:
    runs-on: macos-latest
    env:
      TZ: Asia/Seoul

export default defineConfig({
  // ...
  use: {
    browserName: 'webkit',
    timezoneId: 'Asia/Seoul',
  },
});

{
  "deploy-blog": "next build && next export",
  "e2e:build": "NEXT_PUBLIC_CI=true next build && next export"
}

useEffect(() => {
  if (process.env.NEXT_PUBLIC_CI) return;