Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 1

12345678910111213141516171819202122232425262728293031import { devices, defineConfig } from '@playwright/test';

export default defineConfig({
  workers: process.env.CI ? '100%' : undefined,
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], locale: 'ja-JP' },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'], locale: 'ja-JP' },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'], locale: 'ja-JP' },
    },
    {
      name: 'chromium mobile',
      use: { ...devices['Galaxy S9+'], locale: 'ja-JP' },
    },
    {
      name: 'webkit mobile',
      use: { ...devices['iPhone 13'], locale: 'ja-JP' },
    },
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
  reporter: 'html',
});

123456import { test, expect } from '@playwright/test';

test('visual landing page test', async ({ page }) => {
  await page.goto('');
  await expect(page).toHaveScreenshot({ fullPage: true });
});

123456789101112131415161718192021222324252627282930313233343536373839404142name: e2e
on: [deployment_status]

jobs:
  visual-tests:
    name: "basic visual comparison tests"
    timeout-minutes: 5
    runs-on: ubuntu-latest
    container: mcr.microsoft.com/playwright:v1.31.2-focal
    steps:
      - uses: actions/checkout@v3
      
      - run: corepack enable
          
      - uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --ignore-scripts
      
      - name: Get Vercel's Alias Preview URL
        id: alias-preview-url
        uses: justincase-jp/vercel-preview-url-alias@0.2.1
        with:
          vercel_access_token: ${{ secrets.VERCEL_ACCESS_TOKEN }}
          vercel_project_id: ${{ secrets.VERCEL_PROJECT_ID }}
          fail_when_cancelled: false

      - name: Tests
        if: steps.alias-preview-url.outputs.status == 'READY'
        run: HOME=/root pnpm e2e
        env:
          BASE_URL: https://${{ steps.alias-preview-url.outputs.preview_url_origin }}

      - name: Upload HTML report as artifact.
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: visual-tests
          path: playwright-report

1234567891011FROM mcr.microsoft.com/playwright:v1.31.2-focal

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN corepack enable && pnpm install

COPY . .

CMD [ "pnpm", "e2e:upd" ]

12345678910version: '3.8'
services:
  e2e-visual-generator:
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - BASE_URL=https://next-startbootstrap-agency.vercel.app/
    volumes:
      - ./e2e:/app/e2e

12345678910111213import { test, expect } from '@playwright/test';

test('visual landing page test', async ({ page }) => {
  await page.goto('');

  // remove vercel live comments part
  const vercelPreviewComments = await page.$('vercel-live-feedback');
  if (vercelPreviewComments) {
    await vercelPreviewComments.evaluate((node) => node.remove());
  }

  await expect(page).toHaveScreenshot({ fullPage: true });
});