chadtmiller.com/knotless

// Screenshots of every page of the web interface, in light and dark, on a
// desktop and a phone, compared pixel for pixel with the ones checked in;
// and the social cards the pages name, which are the same in any browser,
// so are taken once, as the `card` project.
//
//   just shots          take them again, replacing the baselines
//   just shots-check    fail on any pixel that differs
//
// Baselines are per platform: fonts render differently on each.

import { defineConfig, devices } from '@playwright/test'
import { base } from './world.mjs'

const desktop = { viewport: { width: 1280, height: 800 }, deviceScaleFactor: 2 }
const phone = {
  ...devices['iPhone 13'],
  browserName: 'chromium',
  defaultBrowserType: 'chromium',
  deviceScaleFactor: 2,
}

export default defineConfig({
  testDir: '.',
  testMatch: 'views.spec.mjs',
  globalSetup: './setup.mjs',
  outputDir: '../../target/shots/results',
  snapshotPathTemplate: '{testDir}/baseline/{platform}/{arg}-{projectName}{ext}',
  fullyParallel: true,
  reporter: [['list']],
  expect: {
    toHaveScreenshot: { maxDiffPixels: 0, threshold: 0, animations: 'disabled', caret: 'hide', scale: 'device' },
    toMatchSnapshot: { maxDiffPixels: 0, threshold: 0 },
  },
  use: { baseURL: base, locale: 'en-US', timezoneId: 'UTC' },
  projects: [
    { name: 'desktop-light', use: { ...desktop, colorScheme: 'light' } },
    { name: 'desktop-dark', use: { ...desktop, colorScheme: 'dark' } },
    { name: 'phone-light', use: { ...phone, colorScheme: 'light' } },
    { name: 'phone-dark', use: { ...phone, colorScheme: 'dark' } },
    { name: 'card', testMatch: 'cards.spec.mjs' },
  ],
})