@vitest/browser-playwright 4.1.0-beta.4 → 4.1.0-beta.6

package/README.md

@@ -1,6 +1,6 @@
 # @vitest/browser-playwright
 
-[![NPM version](https://img.shields.io/npm/v/@vitest/browser-playwright?color=a1b858&label=)](https://www.npmjs.com/package/@vitest/browser-playwright)
+[![NPM version](https://img.shields.io/npm/v/@vitest/browser-playwright?color=a1b858&label=)](https://npmx.dev/package/@vitest/browser-playwright)
 
 Run your Vitest [browser tests](https://vitest.dev/guide/browser/) using [playwright](https://playwright.dev/docs/api/class-playwright) API. Note that Vitest does not use playwright as a test runner, but only as a browser provider.
 

package/dist/index.d.ts

@@ -102,7 +102,8 @@ type PWScreenshotOptions = NonNullable<Parameters<Page["screenshot"]>[0]>;
 type PWSelectOptions = NonNullable<Parameters<Page["selectOption"]>[2]>;
 type PWDragAndDropOptions = NonNullable<Parameters<Page["dragAndDrop"]>[2]>;
 type PWSetInputFiles = NonNullable<Parameters<Page["setInputFiles"]>[2]>;
-type PWCDPSession = CDPSession;
+type PWCDPSession = Pick<CDPSession, "send" | "on" | "off" | "once">;
+
 declare module "vitest/browser" {
 	interface UserEventHoverOptions extends PWHoverOptions {}
 	interface UserEventClickOptions extends PWClickOptions {}
@@ -119,4 +120,4 @@ declare module "vitest/browser" {
 }
 
 export { PlaywrightBrowserProvider, playwright };
-export type { PlaywrightProviderOptions };
+export type { PWCDPSession as CDPSession, PlaywrightProviderOptions };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { parseKeyDef, resolveScreenshotPath, defineBrowserProvider } from '@vitest/browser';
+import { asLocator, parseKeyDef, resolveScreenshotPath, defineBrowserProvider } from '@vitest/browser';
 export { defineBrowserCommand } from '@vitest/browser';
 import { createManualModuleSource } from '@vitest/mocker/node';
 import c from 'tinyrainbow';
@@ -169,23 +169,28 @@ const basename = function(p, extension) {
   return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
 };
 
+// strip iframe locator part from the trace description e.g.
+// - locator('[data-vitest="true"]').contentFrame().getByRole('button')
+//     ⇓
+// - getByRole('button')
+function getDescribedLocator(context, selector) {
+	const locator = context.iframe.locator(selector);
+	return typeof locator.describe === "function" ? locator.describe(asLocator("javascript", selector)) : locator;
+}
+
 const clear = async (context, selector) => {
-	const { iframe } = context;
-	const element = iframe.locator(selector);
+	const element = getDescribedLocator(context, selector);
 	await element.clear();
 };
 
 const click = async (context, selector, options = {}) => {
-	const tester = context.iframe;
-	await tester.locator(selector).click(options);
+	await getDescribedLocator(context, selector).click(options);
 };
 const dblClick = async (context, selector, options = {}) => {
-	const tester = context.iframe;
-	await tester.locator(selector).dblclick(options);
+	await getDescribedLocator(context, selector).dblclick(options);
 };
 const tripleClick = async (context, selector, options = {}) => {
-	const tester = context.iframe;
-	await tester.locator(selector).click({
+	await getDescribedLocator(context, selector).click({
 		...options,
 		clickCount: 3
 	});
@@ -197,13 +202,12 @@ const dragAndDrop = async (context, source, target, options_) => {
 };
 
 const fill = async (context, selector, text, options = {}) => {
-	const { iframe } = context;
-	const element = iframe.locator(selector);
+	const element = getDescribedLocator(context, selector);
 	await element.fill(text, options);
 };
 
 const hover = async (context, selector, options = {}) => {
-	await context.iframe.locator(selector).hover(options);
+	await getDescribedLocator(context, selector).hover(options);
 };
 
 const keyboard = async (context, text, state) => {
@@ -512,10 +516,10 @@ async function takeScreenshot(context, name, options) {
 		savePath = normalize(path);
 		await mkdir(dirname(savePath), { recursive: true });
 	}
-	const mask = options.mask?.map((selector) => context.iframe.locator(selector));
+	const mask = options.mask?.map((selector) => getDescribedLocator(context, selector));
 	if (options.element) {
 		const { element: selector, ...config } = options;
-		const element = context.iframe.locator(selector);
+		const element = getDescribedLocator(context, selector);
 		const buffer = await element.screenshot({
 			...config,
 			mask,
@@ -526,7 +530,7 @@ async function takeScreenshot(context, name, options) {
 			path
 		};
 	}
-	const buffer = await context.iframe.locator("body").screenshot({
+	const buffer = await getDescribedLocator(context, "body").screenshot({
 		...options,
 		mask,
 		path: savePath
@@ -539,13 +543,12 @@ async function takeScreenshot(context, name, options) {
 
 const selectOptions = async (context, selector, userValues, options = {}) => {
 	const value = userValues;
-	const { iframe } = context;
-	const selectElement = iframe.locator(selector);
+	const selectElement = getDescribedLocator(context, selector);
 	const values = await Promise.all(value.map(async (v) => {
 		if (typeof v === "string") {
 			return v;
 		}
-		const elementHandler = await iframe.locator(v.element).elementHandle();
+		const elementHandler = await getDescribedLocator(context, v.element).elementHandle();
 		if (!elementHandler) {
 			throw new Error(`Element not found: ${v.element}`);
 		}
@@ -569,7 +572,7 @@ const startTracing = async ({ context, project, provider, sessionId }) => {
 		await context.tracing.start({
 			screenshots: options.screenshots ?? true,
 			snapshots: options.snapshots ?? true,
-			sources: false
+			sources: options.sources ?? true
 		}).catch(() => {
 			provider.tracingContexts.delete(sessionId);
 		});
@@ -605,6 +608,68 @@ const stopChunkTrace = async (context, { name }) => {
 	}
 	throw new TypeError(`The ${context.provider.name} provider does not support tracing.`);
 };
+const markTrace = async (context, payload) => {
+	if (isPlaywrightProvider(context.provider)) {
+		// skip if tracing is not active
+		// this is only safe guard and this isn't expected to happen since
+		// runner already checks if tracing is active before sending this command
+		if (!context.provider.tracingContexts.has(context.sessionId)) {
+			return;
+		}
+		const { name, selector, stack } = payload;
+		const location = parseLocation(context, stack);
+		// mark trace via group/groupEnd with dummy calls to force snapshot.
+		// https://github.com/microsoft/playwright/issues/39308
+		await context.context.tracing.group(name, { location });
+		try {
+			if (selector) {
+				const locator = getDescribedLocator(context, selector);
+				if (typeof locator._expect === "function") {
+					await locator._expect("to.be.attached", {
+						isNot: false,
+						timeout: 1
+					});
+				} else {
+					await context.page.evaluate(() => 0);
+				}
+			} else {
+				await context.page.evaluate(() => 0);
+			}
+		} catch {}
+		await context.context.tracing.groupEnd();
+		return;
+	}
+	throw new TypeError(`The ${context.provider.name} provider does not support tracing.`);
+};
+const groupTraceStart = async (context, payload) => {
+	if (isPlaywrightProvider(context.provider)) {
+		if (!context.provider.tracingContexts.has(context.sessionId)) {
+			return;
+		}
+		const { name, stack } = payload;
+		const location = parseLocation(context, stack);
+		await context.context.tracing.group(name, { location });
+		return;
+	}
+	throw new TypeError(`The ${context.provider.name} provider does not support tracing.`);
+};
+const groupTraceEnd = async (context) => {
+	if (isPlaywrightProvider(context.provider)) {
+		if (!context.provider.tracingContexts.has(context.sessionId)) {
+			return;
+		}
+		await context.context.tracing.groupEnd();
+		return;
+	}
+	throw new TypeError(`The ${context.provider.name} provider does not support tracing.`);
+};
+function parseLocation(context, stack) {
+	if (!stack) {
+		return;
+	}
+	const parsedStacks = context.project.browser.parseStacktrace(stack);
+	return parsedStacks[0];
+}
 function resolveTracesPath({ testPath, project }, name) {
 	if (!testPath) {
 		throw new Error(`This command can only be called inside a test file.`);
@@ -665,8 +730,7 @@ function isPlaywrightProvider(provider) {
 const type = async (context, selector, text, options = {}) => {
 	const { skipClick = false, skipAutoClose = false } = options;
 	const unreleased = new Set(Reflect.get(options, "unreleased") ?? []);
-	const { iframe } = context;
-	const element = iframe.locator(selector);
+	const element = getDescribedLocator(context, selector);
 	if (!skipClick) {
 		await element.focus();
 	}
@@ -680,7 +744,6 @@ const upload = async (context, selector, files, options) => {
 		throw new Error(`Cannot upload files outside of a test`);
 	}
 	const root = context.project.config.root;
-	const { iframe } = context;
 	const playwrightFiles = files.map((file) => {
 		if (typeof file === "string") {
 			return resolve(root, file);
@@ -691,7 +754,7 @@ const upload = async (context, selector, files, options) => {
 			buffer: Buffer.from(file.base64, "base64")
 		};
 	});
-	await iframe.locator(selector).setInputFiles(playwrightFiles, options);
+	await getDescribedLocator(context, selector).setInputFiles(playwrightFiles, options);
 };
 
 const wheel = async (context, selector, options) => {
@@ -724,7 +787,10 @@ var commands = {
 	__vitest_startChunkTrace: startChunkTrace,
 	__vitest_startTracing: startTracing,
 	__vitest_stopChunkTrace: stopChunkTrace,
-	__vitest_annotateTraces: annotateTraces
+	__vitest_annotateTraces: annotateTraces,
+	__vitest_markTrace: markTrace,
+	__vitest_groupTraceStart: groupTraceStart,
+	__vitest_groupTraceEnd: groupTraceEnd
 };
 
 const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
@@ -799,17 +865,6 @@ class PlaywrightBrowserProvider {
 		this.browserPromise = (async () => {
 			const options = this.project.config.browser;
 			const playwright = await import('playwright');
-			if (this.options.connectOptions) {
-				if (this.options.launchOptions) {
-					this.project.vitest.logger.warn(c.yellow(`Found both ${c.bold(c.italic(c.yellow("connect")))} and ${c.bold(c.italic(c.yellow("launch")))} options in browser instance configuration.
-          Ignoring ${c.bold(c.italic(c.yellow("launch")))} options and using ${c.bold(c.italic(c.yellow("connect")))} mode.
-          You probably want to remove one of the two options and keep only the one you want to use.`));
-				}
-				const browser = await playwright[this.browserName].connect(this.options.connectOptions.wsEndpoint, this.options.connectOptions);
-				this.browser = browser;
-				this.browserPromise = null;
-				return this.browser;
-			}
 			const launchOptions = {
 				...this.options.launchOptions,
 				headless: options.headless
@@ -824,8 +879,10 @@ class PlaywrightBrowserProvider {
 				const host = inspector.host || "127.0.0.1";
 				launchOptions.args ||= [];
 				launchOptions.args.push(`--remote-debugging-port=${port}`);
-				launchOptions.args.push(`--remote-debugging-address=${host}`);
-				this.project.vitest.logger.log(`Debugger listening on ws://${host}:${port}`);
+				if (host !== "localhost" && host !== "127.0.0.1" && host !== "::1") {
+					this.project.vitest.logger.warn(`Custom inspector host "${host}" will be ignored. Chromium only allows remote debugging on localhost.`);
+				}
+				this.project.vitest.logger.log(`Debugger listening on ws://127.0.0.1:${port}`);
 			}
 			// start Vitest UI maximized only on supported browsers
 			if (this.project.config.browser.ui && this.browserName === "chromium") {
@@ -837,6 +894,23 @@ class PlaywrightBrowserProvider {
 				}
 			}
 			debug?.("[%s] initializing the browser with launch options: %O", this.browserName, launchOptions);
+			if (this.options.connectOptions) {
+				let { wsEndpoint, headers = {}, ...connectOptions } = this.options.connectOptions;
+				if ("x-playwright-launch-options" in headers) {
+					this.project.vitest.logger.warn(c.yellow("Detected \"x-playwright-launch-options\" in connectOptions.headers. Provider config launchOptions is ignored."));
+				} else {
+					headers = {
+						...headers,
+						"x-playwright-launch-options": JSON.stringify(launchOptions)
+					};
+				}
+				this.browser = await playwright[this.browserName].connect(wsEndpoint, {
+					...connectOptions,
+					headers
+				});
+				this.browserPromise = null;
+				return this.browser;
+			}
 			let persistentContextOption = this.options.persistentContext;
 			if (persistentContextOption && openBrowserOptions.parallel) {
 				persistentContextOption = false;
@@ -1082,18 +1156,17 @@ class PlaywrightBrowserProvider {
 		const page = this.getPage(sessionid);
 		const cdp = await page.context().newCDPSession(page);
 		return {
-			async send(method, params) {
-				const result = await cdp.send(method, params);
-				return result;
+			send(method, params) {
+				return cdp.send(method, params);
 			},
 			on(event, listener) {
-				cdp.on(event, listener);
+				return cdp.on(event, listener);
 			},
 			off(event, listener) {
-				cdp.off(event, listener);
+				return cdp.off(event, listener);
 			},
 			once(event, listener) {
-				cdp.once(event, listener);
+				return cdp.once(event, listener);
 			}
 		};
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser-playwright",
   "type": "module",
-  "version": "4.1.0-beta.4",
+  "version": "4.1.0-beta.6",
   "description": "Browser running for Vitest using playwright",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -42,7 +42,7 @@
   ],
   "peerDependencies": {
     "playwright": "*",
-    "vitest": "4.1.0-beta.4"
+    "vitest": "4.1.0-beta.6"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -51,12 +51,12 @@
   },
   "dependencies": {
     "tinyrainbow": "^3.0.3",
-    "@vitest/browser": "4.1.0-beta.4",
-    "@vitest/mocker": "4.1.0-beta.4"
+    "@vitest/mocker": "4.1.0-beta.6",
+    "@vitest/browser": "4.1.0-beta.6"
   },
   "devDependencies": {
-    "playwright": "^1.58.1",
-    "vitest": "4.1.0-beta.4"
+    "playwright": "^1.58.2",
+    "vitest": "4.1.0-beta.6"
   },
   "scripts": {
     "build": "premove dist && pnpm rollup -c",