enso/app/gui2/playwright.config.ts

/** @file Playwright browser testing configuration. */
/** Note that running Playwright in CI poses a number of issues:
 * - `backdrop-filter: blur` is disabled, due to issues with Chromium's `--disable-gpu` flag
 * (see below).
 * - System validation dialogs are not reliable between computers, as they may have different
 * default fonts. */
import { defineConfig } from '@playwright/test'
import net from 'net'

const DEBUG = process.env.DEBUG_E2E === 'true'

async function findFreePortInRange(min: number, max: number) {
  for (let i = 0; i < 50; i++) {
    const portToCheck = Math.floor(Math.random() * (max - min + 1)) + min
    if (await checkAvailablePort(portToCheck)) return portToCheck
  }
  throw new Error('Failed to find a free port.')
}

function checkAvailablePort(port: number) {
  return new Promise((resolve, reject) => {
    const server = net.createServer()
    server
      .unref()
      .on('error', (e: any) => ('EADDRINUSE' === e.code ? resolve(false) : reject(e)))
      .listen({ host: '0.0.0.0', port }, () => server.close(() => resolve(true)))
  })
}

const portFromEnv = parseInt(process.env.PLAYWRIGHT_PORT ?? '', 10)
const PORT = Number.isFinite(portFromEnv) ? portFromEnv : await findFreePortInRange(4300, 4999)
// Make sure to set the env to actual port that is being used. This is necessary for workers to
// pick up the same configuration.
process.env.PLAYWRIGHT_PORT = `${PORT}`

export default defineConfig({
  globalSetup: './e2e/setup.ts',
  testDir: './e2e',
  forbidOnly: !!process.env.CI,
  repeatEach: process.env.CI ? 3 : 1,
  ...(process.env.CI ? { workers: 1 } : {}),
  timeout: 60000,
  expect: {
    timeout: 5000,
    toHaveScreenshot: { threshold: 0 },
  },
  reporter: 'html',
  use: {
    headless: !DEBUG,
    actionTimeout: 5000,
    trace: 'retain-on-failure',
    viewport: { width: 1920, height: 1750 },
    ...(DEBUG ?
      {}
    : {
        launchOptions: {
          ignoreDefaultArgs: ['--headless'],
          args: [
            // Much closer to headful Chromium than classic headless.
            '--headless=new',
            // Required for `backdrop-filter: blur` to work.
            '--use-angle=swiftshader',
            // FIXME: `--disable-gpu` disables `backdrop-filter: blur`, which is not handled by
            // the software (CPU) compositor. This SHOULD be fixed eventually, but this flag
            // MUST stay as CI does not have a GPU.
            '--disable-gpu',
            // Fully disable GPU process.
            '--disable-software-rasterizer',
            // Disable text subpixel antialiasing.
            '--font-render-hinting=none',
            '--disable-skia-runtime-opts',
            '--disable-system-font-check',
            '--disable-font-subpixel-positioning',
            '--disable-lcd-text',
          ],
        },
      }),
  },
  // projects: [
  // {
  //   name: 'chromium',
  //   use: {
  //     ...devices['Desktop Chrome'],
  //   },
  // },
  // {
  //   name: 'firefox',
  //   use: {
  //     ...devices['Desktop Firefox'],
  //   },
  // },
  // {
  //   name: 'webkit',
  //   use: {
  //     ...devices['Desktop Safari'],
  //   },
  // },
  // {
  //   name: 'Mobile Chrome',
  //   use: {
  //     ...devices['Pixel 5'],
  //   },
  // },
  // {
  //   name: 'Mobile Safari',
  //   use: {
  //     ...devices['iPhone 12'],
  //   },
  // },
  // ],
  webServer: {
    env: {
      E2E: 'true',
    },
    command:
      process.env.CI || process.env.PROD ?
        `npx vite build && npx vite preview --port ${PORT} --strictPort`
      : `npx vite dev --port ${PORT}`,
    // Build from scratch apparently can take a while on CI machines.
    timeout: 120 * 1000,
    port: PORT,
    // We use our special, mocked version of server, thus do not want to re-use user's one.
    reuseExistingServer: false,
  },
})