playwright.config.js

// @ts-check
import { tz } from '@date-fns/tz';
import { defineConfig, devices } from '@playwright/test';
import arkenv from 'arkenv';
import { ms } from 'convert';
import { formatISO9075 } from 'date-fns';

/** @typedef {NonNullable<import('@playwright/test').PlaywrightTestConfig['projects']>[number]} Project */

/** @type {Project} */
const setup = {
	name: 'setup',
	testMatch: /setup\/.*\.ts$/,
};

const dependencies = dependsOnTarget({
	live: ['setup'],
	dev: [],
	built: ['setup'],
});

/** @type {Project} */
const chromium = {
	name: 'chromium',
	dependencies,
	use: {
		...devices['Desktop Chrome'],
		launchOptions: {
			args: [
				'--use-fake-ui-for-media-stream',
				'--use-fake-device-for-media-stream',
				// i can't get the y4m conversion right...
				// default mock video stream is fine anyways
				// and .y4m files are extremely heavy, so it'd require
				// having ffmpeg on the CI server to convert a .mp4 to .y4m
				// '--use-file-for-fake-video-capture=' +
				// 	absoluteFixtureFilepath('camera/lil-fella.y4m'),
				...dependsOnTarget({
					dev: ['--max_old_space_size=2048'],
					live: [],
					built: [],
				}),
			],
		},
		contextOptions: {
			serviceWorkers: process.env.CI ? 'allow' : 'block',
		},
	},
};

/** @type {Project} */
const firefox = {
	name: 'firefox',
	dependencies,
	use: { ...devices['Desktop Firefox'] },
};

/** @type {Project} */
const webkit = {
	name: 'webkit',
	// Webkit causes too much issues. See if we can remove this
	// once https://github.com/microsoft/playwright/issues/18235 is fixed
	testMatch: /(core|performance)\.spec\.ts$/,
	dependencies,
	// Until we can get rid of the idb-opfs mocking,
	// it seems like it slows things down considerably
	timeout: ms('2min'),
	use: {
		...devices['Desktop Safari'],
		launchOptions: {
			args: dependsOnTarget({
				dev: ['--max_old_space_size=4096'],
				live: [],
				built: [],
			}),
		},
		contextOptions: {
			// See https://github.com/microsoft/playwright/issues/1090
			serviceWorkers: 'block',
		},
	},
};

/**
 * @see https://playwright.dev/docs/test-configuration
 */
export default defineConfig({
	/* Leave some time before github actions makes the job time out (1 hour), so the report can be deployed */
	globalTimeout: ms('20min'),
	timeout: dependsOnTarget({
		dev: ms('5min'),
		live: ms('1.5min'),
		built: ms('1.5min'),
	}),
	testDir: './tests',
	metadata: {
		generated: formatISO9075(new Date(), {
			in: tz('Europe/Paris'),
		}),
	},
	/* Run tests in files in parallel */
	fullyParallel: true,
	/* Fail the build on CI (in non-PR workflows) if you accidentally left test.only in the source code. */
	forbidOnly: !!process.env.CI && !process.env.GITHUB_REF?.endsWith('/merge'),
	/* Retry on CI only */
	retries: process.env.CI ? 2 : 0,
	/* Opt out of parallel tests. */
	workers: 1,
	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
	...(process.env.CI
		? {
				reporter: [
					['json', { outputFile: 'test-results.json' }],
					[process.env.SHARDING ? 'blob' : 'html'],
					['github'],
					['list'],
					...pleyeReporter(),
				],
			}
		: {}),
	/* 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: dependsOnTarget({
			live: process.env.BASE_URL,
			dev: 'http://localhost:5173',
			built: 'http://localhost:4173',
		}),

		// See https://github.com/microsoft/playwright/issues/16357
		bypassCSP: dependsOnTarget({
			live: true,
			dev: false,
			built: false,
		}),

		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
		trace: 'on-first-retry',

		// Right now, all tests assume French language.
		locale: 'fr-FR',

		// Ensure no TZ issues for assertions that depend on time
		timezoneId: 'Etc/UTC',

		// To enable strong typing within Svelte components, we currently can't use data-* attributes
		// See https://github.com/sveltejs/svelte/issues/14859
		// So we use a nonstandard attribute instead
		testIdAttribute: 'pw-testid',
	},

	/* Configure projects for major browsers */
	projects: dependsOnTarget({
		live: [setup, chromium],
		dev: [setup, chromium, firefox, webkit],
		built: [setup, chromium, webkit],
	}),

	/* Run your local dev server before starting the tests */
	webServer: dependsOnTarget({
		live: undefined,
		dev: {
			command: 'bun run dev',
			port: 5173,
			reuseExistingServer: true,
		},
		built: {
			command: 'bun run preview',
			port: 4173,
			reuseExistingServer: false,
		},
	}),
});

/**
 * @returns {[[string, import('./tests/reporters/pleye').PleyeParams]] | []}
 */
function pleyeReporter() {
	if (!process.env.PLEYE_API_KEY) {
		console.warn('PLEYE_API_KEY not set, skipping Pleye reporter setup');
		return [];
	}

	try {
		const env = arkenv({
			PLEYE_DEBUG: 'string',
			PLEYE_API_KEY: 'string > 8',
			JOB_ID: 'number',
			COMMIT_SHA: 'string > 10',
			// Empty string does not count as undefined or absent
			// Theres no way to fix this, so we just use process.env for this one
			// PR_NUMBER: 'number',
			'PR_TITLE?': 'string',
			TRACE_VIEWER_BASE_URL: [
				'string.url',
				':',
				(url, ctx) =>
					!url.endsWith('/') || ctx.reject('base url must not end with a slash'),
			],
		});

		/**
		 * @type {import('./tests/reporters/pleye').PleyeParams}
		 */
		const config = {
			debug: env.PLEYE_DEBUG === 'debug',
			apiKey: env.PLEYE_API_KEY || '',
			serverOrigin: 'https://pleye.gwen.works',
			githubJobId: env.JOB_ID,
			commitSha: env.COMMIT_SHA,
			traceViewerUrl: (sha1, extension) =>
				urlWithBase(env.TRACE_VIEWER_BASE_URL, '/trace/index.html', {
					trace: urlWithBase(env.TRACE_VIEWER_BASE_URL, `/data/${sha1 + extension}`),
				}),
			pullRequestNumber: process.env.PR_NUMBER
				? parseInt(process.env.PR_NUMBER, 10)
				: undefined,
		};

		return [['./tests/reporters/pleye.js', config]];
	} catch (e) {
		console.error('Failed to setup Pleye reporter:', e);
		return [];
	}
}

/**
 *
 * @template L, D, B
 * @param {object} param0
 * @param {L} param0.live - Value to return if we're checking against a live URL (meaning $BASE_URL is set)
 * @param {D} param0.dev - Value to return if we're checking against a dev server (meaning $CI is not set)
 * @param {B} param0.built - Value to return if we're checking against a built version (meaning $CI is set)
 * @returns {L | D | B}
 */
function dependsOnTarget({ live, dev, built }) {
	if (process.env.BASE_URL) return live;
	if (process.env.CI) return built;
	return dev;
}

/**
 *
 * @param {URL | string} base
 * @param {`/${string}`} pathname
 * @param {Record<string, { toString(): string }>} query
 */
function urlWithBase(base, pathname, query = {}) {
	if (!(base instanceof URL)) base = new URL(base);
	const search = '?' + new URLSearchParams({ ...base.searchParams, ...query });
	return new URL(base.pathname + pathname + search + base.hash, base);
}