actual/packages/desktop-client/playwright.config.js

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

expect.extend({
  async toMatchThemeScreenshots(locator) {
    // Disable screenshot assertions in regular e2e tests;
    // only enable them when doing VRT tests
    if (!process.env.VRT) {
      return {
        message: () => 'passed',
        pass: true,
      };
    }

    const config = {
      // eslint-disable-next-line rulesdir/typography
      mask: [locator.locator('[data-vrt-mask="true"]')],
      maxDiffPixels: 5,
    };

    // Get the data-theme attribute from page.
    // If there is a page() function, it means that the locator
    // is not a page object but a locator object.
    const dataThemeLocator =
      typeof locator.page === 'function'
        ? locator.page().locator('[data-theme]')
        : locator.locator('[data-theme]');

    // Check lightmode
    await locator.evaluate(() => window.Actual.setTheme('auto'));
    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'auto');
    const lightmode = await expect(locator).toHaveScreenshot(config);

    if (lightmode && !lightmode.pass) {
      return lightmode;
    }

    // Switch to darkmode and check
    await locator.evaluate(() => window.Actual.setTheme('dark'));
    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'dark');
    const darkmode = await expect(locator).toHaveScreenshot(config);

    // Assert on
    if (darkmode && !darkmode.pass) {
      return darkmode;
    }

    // Switch to midnight theme and check
    await locator.evaluate(() => window.Actual.setTheme('midnight'));
    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'midnight');
    const midnightMode = await expect(locator).toHaveScreenshot(config);

    // Assert on
    if (midnightMode && !midnightMode.pass) {
      return midnightMode;
    }

    // Switch back to lightmode
    await locator.evaluate(() => window.Actual.setTheme('auto'));
    return {
      message: () => 'pass',
      pass: true,
    };
  },
});

// eslint-disable-next-line import/no-unused-modules, import/no-default-export
export default defineConfig({
  timeout: 30000, // 30 seconds
  retries: 1,
  testDir: 'e2e/',
  reporter: !process.env.CI ? [['html', { open: 'never' }]] : undefined,
  use: {
    userAgent: 'playwright',
    screenshot: 'on',
    browserName: 'chromium',
    baseURL: process.env.E2E_START_URL ?? 'http://localhost:3001',
    trace: 'on-first-retry',
    ignoreHTTPSErrors: true,
  },
  expect: {
    toHaveScreenshot: { maxDiffPixels: 5 },
  },
});