Add --open option (#87)

src/server/cli/test-runner.js

@@ -30,7 +30,7 @@ async function getTestRunnerOptions(argv = []) {
 			name: 'watch',
 			type: Boolean,
 			description: 'Reload tests on file changes. Allows debugging in all browsers.',
-			order: 9
+			order: 10
 		},
 
 		// d2l-test-runner options
@@ -42,8 +42,8 @@ async function getTestRunnerOptions(argv = []) {
 		},
 		{
 			name: 'chrome',
-			type: Boolean,
-			longAlias: 'chromium'
+			longAlias: 'chromium',
+			type: Boolean
 		},
 		{
 			name: 'config',
@@ -70,7 +70,7 @@ async function getTestRunnerOptions(argv = []) {
 			name: 'golden',
 			type: Boolean,
 			description: 'Generate new golden screenshots. Ignored unless group is "vdiff".',
-			order: 10
+			order: 12
 		},
 		{
 			name: 'grep',
@@ -83,7 +83,13 @@ async function getTestRunnerOptions(argv = []) {
 			name: 'help',
 			type: Boolean,
 			description: 'Print usage information and exit',
-			order: 12
+			order: 13
+		},
+		{
+			name: 'open',
+			type: Boolean,
+			description: 'Open the browser in headed mode',
+			order: 11
 		},
 		{
 			name: 'safari',

src/server/headed-mode-plugin.js

@@ -1,13 +1,13 @@
 import { globSync } from 'glob';
 
-export function headedMode({ watch, pattern }) {
+export function headedMode({ open, watch, pattern }) {
 
 	const files = globSync(pattern, { ignore: 'node_modules/**', posix: true });
 
 	return {
 		name: 'brightspace-headed-mode',
 		async transform(context) {
-			if (watch && files.includes(context.path.slice(1))) {
+			if ((watch || open) && files.includes(context.path.slice(1))) {
 				return `debugger;\n${context.body}`;
 			}
 		}

src/server/wtr-config.js

@@ -123,6 +123,7 @@ export class WTRConfig {
 		const {
 			timeout = timeoutConfig,
 			grep,
+			open,
 			watch
 		} = this.#cliArgs;
 
@@ -131,7 +132,7 @@ export class WTRConfig {
 		const config = {};
 
 		if (timeout) config.timeout = String(timeout);
-		if (watch) config.timeout = '0';
+		if (open || watch) config.timeout = '0';
 		if (grep) config.grep = grep;
 
 		return Object.keys(config).length && { testFramework: { config } };
@@ -143,7 +144,7 @@ export class WTRConfig {
 		...passthroughConfig
 	} = {}) {
 
-		const { files, filter, golden, grep, group, watch } = this.#cliArgs;
+		const { files, filter, golden, grep, group, open, watch } = this.#cliArgs;
 		const passthroughGroupNames = passthroughConfig.groups?.map(g => g.name) ?? [];
 
 		if (!['test', 'vdiff', ...passthroughGroupNames].includes(group)) {
@@ -185,12 +186,13 @@ export class WTRConfig {
 		// convert all browsers to playwright
 		config.groups.forEach(g => g.browsers = this.getBrowsers(g.browsers));
 
-		if (watch) {
+		if (open || watch) {
 			config.plugins ??= [];
 			const currentPattern = files || config.groups.find(g => g.name === group)?.files;
 
 			config.plugins.push(headedMode({
 				pattern: currentPattern,
+				open,
 				watch
 			}));
 		}
@@ -204,9 +206,13 @@ export class WTRConfig {
 		if (!Array.isArray(browsers)) throw new TypeError('browsers must be an array');
 
 		return [...new Set(browsers)].map((b) => playwrightLauncher({
-			concurrency: b === 'firefox' ? 1 : undefined, // focus in Firefox unreliable if concurrency > 1 (https://github.com/modernweb-dev/web/issues/238)
+			concurrency: b === 'firefox' || this.#cliArgs.open ? 1 : undefined, // focus in Firefox unreliable if concurrency > 1 (https://github.com/modernweb-dev/web/issues/238)
 			product: b,
-			createBrowserContext: ({ browser }) => browser.newContext({ deviceScaleFactor: 2, reducedMotion: 'reduce' })
+			createBrowserContext: ({ browser }) => browser.newContext({ deviceScaleFactor: 2, reducedMotion: 'reduce' }),
+			launchOptions: {
+				headless: !this.#cliArgs.open,
+				devtools: false
+			}
 		}));
 	}
 

test/server/cli/test-runner.test.js

@@ -25,7 +25,7 @@ describe('runner.getOptions()', () => {
 
 	it('should not forward disallowed or stolen options', async() => {
 		const disallowed = ['--browsers', '--playwright', '--puppeteer', '--groups', '--manual'];
-		const stolen = ['--config'];
+		const stolen = ['--config', '--open'];
 		const opts = await runner.getOptions([ ...disallowed, ...stolen, '--unknown-allowed']);
 		expect(opts.argv).to.deep.equal(['--group', 'test', '--unknown-allowed']);
 	});

test/server/wtr-config.test.js

@@ -56,7 +56,7 @@ describe('WTRConfig', () => {
 		});
 
 		it('should set timeout to 0 and add headedMode plugin when headed', () => {
-			['watch'].forEach(mode => {
+			['open', 'watch'].forEach(mode => {
 				const wtrConfig = new WTRConfig({ timeout: 4000, [mode]: true });
 				const config = wtrConfig.create({ timeout: 3000 });
 				expect(config.plugins).to.have.length(1);