feat(perform): test helper to use playwright commands in your tests

package.json

@@ -44,11 +44,13 @@
     ]
   },
   "dependencies": {
+    "@playwright/test": "^1.40.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@web/dev-server": "^0.4.0",
     "@web/dev-server-esbuild": "^1.0.0",
     "@web/test-runner": "^0.18.0",
+    "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^9.0.0",

web/perform.js

@@ -0,0 +1,18 @@
+import { executeServerCommand } from '@web/test-runner-commands';
+
+let i = 0;
+export const perform = async (fn, ...args) => {
+	let result;
+
+	const resultGrabber = `__grabCommandResult${++i}`;
+	window[resultGrabber] = (_result) => (result = _result);
+
+	await executeServerCommand('cz-perform', {
+		fn: fn.toString(),
+		args,
+		resultGrabber,
+	});
+
+	delete window[resultGrabber];
+	return result;
+};

web/performer.mjs

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+
+const perform = async (payload, context) => {
+	// eslint-disable-next-line no-eval
+	const fn = eval(payload.fn);
+	const result = await fn(context, ...payload.args);
+	await context.page.evaluate(
+		([grabber, result]) => window[grabber](result),
+		[payload.resultGrabber, result],
+	);
+	return true;
+};
+
+export const performer = () => ({
+	name: 'cz-performer',
+	// eslint-disable-next-line max-statements
+	async executeCommand({ command, payload, session }) {
+		if (command !== 'cz-perform') return;
+		if (session.browser.type !== 'playwright') return;
+
+		const page = session.browser.getPage(session.id);
+		return perform(payload, { session, page, expect });
+	},
+});

web/test-runner.mjs

@@ -1,6 +1,7 @@
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { nodeResolve } from './rollup.mjs';
+import { performer } from './performer.mjs';
 
 export default {
 	browsers: process.env.HEADED
@@ -26,5 +27,5 @@ export default {
 	files: ['**!(node_modules)/*.test.(j|t)s'],
 	testFramework: { config: { ui: 'tdd' } },
 	nodeResolve,
-	plugins: [esbuildPlugin({ ts: true })],
+	plugins: [esbuildPlugin({ ts: true }), performer()],
 };