Files
OpenHands/playwright.config.ts
T
dd18f8aee0 feat: add Playwright visual snapshot testing infrastructure (#392)
* feat: add Playwright visual snapshot testing infrastructure

- Add snapshot test file for home and settings pages
- Configure playwright.config.ts with snapshot settings
- Add npm scripts: test:e2e:snapshots and test:e2e:snapshots:update
- Create CI workflow (.github/workflows/snapshot-tests.yml)
- Include baseline snapshots for chromium

Closes #390

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: properly mock analytics consent in snapshot tests

- Add setupMocks helper with showConsentModal parameter
- Set user_consents_to_analytics: false to hide modal by default
- Add dedicated test for analytics consent modal appearance
- Document snapshot testing patterns in AGENTS.md

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: add explicit modal absence assertions in snapshot tests

- All non-modal tests now assert consent modal has count 0
- Use rootLayout consistently for all snapshots
- Tests will fail fast if modal incorrectly appears

Note: Snapshots need regeneration - CI will fail until baselines updated

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: dismiss consent modal before taking snapshots

- Add dismissConsentModal helper to click 'Confirm preferences'
- Call dismissConsentModal after page load in all non-modal tests
- Regenerate all baseline snapshots without modal overlay

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: make snapshot tests work in mock mode CI

- Add file API mock to prevent proxy errors
- Make consent modal test skip if modal doesn't appear in mock mode
- Tests now pass in both local and CI environments

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: generate snapshots in CI environment

- Add workflow_dispatch with update_snapshots option
- Remove local snapshots (will be generated in CI)
- CI can now update and commit snapshots automatically
- Update AGENTS.md with snapshot testing details

To generate snapshots: Run workflow manually with 'Update baseline snapshots' checked

Co-authored-by: openhands <openhands@all-hands.dev>

* chore: update baseline snapshots [skip ci]

* docs: add CI snapshot update instructions to AGENTS.md

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: address review comments

- Use setupMocks(page, true) for consent modal test instead of try-catch
- Align global threshold to 0.01 (1%) matching documented standard

Co-authored-by: openhands <openhands@all-hands.dev>

* chore: update baseline snapshots [skip ci]

* fix: stabilize flaky consent modal test

- Wait for root-layout to be visible before checking modal
- Add networkidle wait for settings query to resolve
- Increase modal visibility timeout to 10s for lazy-load

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: wait for settings API response to stabilize consent modal test

- Use Promise.all to wait for settings response during navigation
- Increase root-layout visibility timeout to 10s
- Ensures settings data is loaded before checking for modal

Co-authored-by: openhands <openhands@all-hands.dev>

* fix: increase timeouts for consent modal test

- Set test timeout to 60s
- Use networkidle for goto
- Increase element visibility timeouts to 15s

Co-authored-by: openhands <openhands@all-hands.dev>

---------

Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2026-05-12 19:07:42 -04:00

98 lines
2.8 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/e2e",
testIgnore: "**/e2e/live/**",
/* 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: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Snapshot configuration for visual regression tests */
snapshotDir: "./tests/e2e/__snapshots__",
snapshotPathTemplate:
"{snapshotDir}/{testFilePath}/{projectName}/{arg}{ext}",
expect: {
toHaveScreenshot: {
/* Threshold for pixel comparison (0-1, lower = stricter) */
threshold: 0.01,
/* Maximum allowed different pixels */
maxDiffPixels: 100,
},
},
/* 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://localhost:3001/",
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
/* Ignore SSL errors for browser agent test */
/* Solution inspired by StackOverflow post: https://stackoverflow.com/questions/67048422/ignore-ssl-errors-with-playwright-code-generation */
ignoreHTTPSErrors: true,
},
/* 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: "npm run dev:mock -- --port 3001",
url: "http://localhost:3001/",
reuseExistingServer: !process.env.CI,
},
});