@vitest/browser-playwright 4.1.0-beta.5 → 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), "../..");
@@ -1090,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.5",
+  "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.5"
+    "vitest": "4.1.0-beta.6"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -51,12 +51,12 @@
   },
   "dependencies": {
     "tinyrainbow": "^3.0.3",
-    "@vitest/browser": "4.1.0-beta.5",
-    "@vitest/mocker": "4.1.0-beta.5"
+    "@vitest/mocker": "4.1.0-beta.6",
+    "@vitest/browser": "4.1.0-beta.6"
   },
   "devDependencies": {
     "playwright": "^1.58.2",
-    "vitest": "4.1.0-beta.5"
+    "vitest": "4.1.0-beta.6"
   },
   "scripts": {
     "build": "premove dist && pnpm rollup -c",