DoIt/playwright.config.ts
PCloud 36bee94ed6
feat: add Playwright for visual regression testing (#1440)
* feat: add Playwright for visual regression testing

* feat: update snapshot path template in Playwright configuration

* chore: change CI workflow to run on macOS and remove unused snapshot path template

* update snapshots

* feat: update visual regression tests to use toHaveScreenshot method

* feat: update screenshot expectation to use maxDiffPixelRatio

* feat: remove threshold from screenshot expectation for homepage test

* feat: add visual regression tests for multiple pages

* feat: update Playwright configuration and enhance visual regression tests

* feat: add Hugo setup to Playwright workflow

* feat: update Playwright workflow to install Hugo via Homebrew

* feat: update visual test pages by commenting out unused entries
2025-02-21 15:09:55 +00:00

89 lines
2.4 KiB
TypeScript

import { defineConfig, devices } from "@playwright/test";
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: "100%",
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
headless: true,
viewport: { width: 1280, height: 720 },
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
{
name: "firefox",
use: { ...devices["Desktop Firefox"] },
},
{
name: "webkit",
use: { ...devices["Desktop Safari"] },
},
/* Test against mobile viewports. */
{
name: "Mobile Chrome",
use: { ...devices["Pixel 5"] },
},
{
name: "Mobile Safari",
use: { ...devices["iPhone 12"] },
},
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: {
command:
"hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender --noHTTPCache --disableLiveReload --disableBrowserError --baseURL=http://127.0.0.1:1313",
url: "http://127.0.0.1:1313",
reuseExistingServer: !process.env.CI,
},
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0.02,
},
},
});