@vitest/browser-playwright 4.0.0-beta.14

package/dist/index.js

@@ -0,0 +1,1099 @@
+import { parseKeyDef, resolveScreenshotPath, defineBrowserProvider } from '@vitest/browser';
+export { defineBrowserCommand } from '@vitest/browser';
+import { createManualModuleSource } from '@vitest/mocker/node';
+import c from 'tinyrainbow';
+import { createDebugger, isCSSRequest } from 'vitest/node';
+import { mkdir, unlink } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+function normalizeWindowsPath(input = "") {
+  if (!input) {
+    return input;
+  }
+  return input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
+}
+
+const _UNC_REGEX = /^[/\\]{2}/;
+const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+const _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+const _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
+const normalize = function(path) {
+  if (path.length === 0) {
+    return ".";
+  }
+  path = normalizeWindowsPath(path);
+  const isUNCPath = path.match(_UNC_REGEX);
+  const isPathAbsolute = isAbsolute(path);
+  const trailingSeparator = path[path.length - 1] === "/";
+  path = normalizeString(path, !isPathAbsolute);
+  if (path.length === 0) {
+    if (isPathAbsolute) {
+      return "/";
+    }
+    return trailingSeparator ? "./" : ".";
+  }
+  if (trailingSeparator) {
+    path += "/";
+  }
+  if (_DRIVE_LETTER_RE.test(path)) {
+    path += "/";
+  }
+  if (isUNCPath) {
+    if (!isPathAbsolute) {
+      return `//./${path}`;
+    }
+    return `//${path}`;
+  }
+  return isPathAbsolute && !isAbsolute(path) ? `/${path}` : path;
+};
+function cwd() {
+  if (typeof process !== "undefined" && typeof process.cwd === "function") {
+    return process.cwd().replace(/\\/g, "/");
+  }
+  return "/";
+}
+const resolve = function(...arguments_) {
+  arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+  let resolvedPath = "";
+  let resolvedAbsolute = false;
+  for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+    const path = index >= 0 ? arguments_[index] : cwd();
+    if (!path || path.length === 0) {
+      continue;
+    }
+    resolvedPath = `${path}/${resolvedPath}`;
+    resolvedAbsolute = isAbsolute(path);
+  }
+  resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute);
+  if (resolvedAbsolute && !isAbsolute(resolvedPath)) {
+    return `/${resolvedPath}`;
+  }
+  return resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path, allowAboveRoot) {
+  let res = "";
+  let lastSegmentLength = 0;
+  let lastSlash = -1;
+  let dots = 0;
+  let char = null;
+  for (let index = 0; index <= path.length; ++index) {
+    if (index < path.length) {
+      char = path[index];
+    } else if (char === "/") {
+      break;
+    } else {
+      char = "/";
+    }
+    if (char === "/") {
+      if (lastSlash === index - 1 || dots === 1) ; else if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            const lastSlashIndex = res.lastIndexOf("/");
+            if (lastSlashIndex === -1) {
+              res = "";
+              lastSegmentLength = 0;
+            } else {
+              res = res.slice(0, lastSlashIndex);
+              lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+            }
+            lastSlash = index;
+            dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "";
+            lastSegmentLength = 0;
+            lastSlash = index;
+            dots = 0;
+            continue;
+          }
+        }
+        if (allowAboveRoot) {
+          res += res.length > 0 ? "/.." : "..";
+          lastSegmentLength = 2;
+        }
+      } else {
+        if (res.length > 0) {
+          res += `/${path.slice(lastSlash + 1, index)}`;
+        } else {
+          res = path.slice(lastSlash + 1, index);
+        }
+        lastSegmentLength = index - lastSlash - 1;
+      }
+      lastSlash = index;
+      dots = 0;
+    } else if (char === "." && dots !== -1) {
+      ++dots;
+    } else {
+      dots = -1;
+    }
+  }
+  return res;
+}
+const isAbsolute = function(p) {
+  return _IS_ABSOLUTE_RE.test(p);
+};
+const relative = function(from, to) {
+  const _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  const _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0]) {
+    return _to.join("/");
+  }
+  const _fromCopy = [..._from];
+  for (const segment of _fromCopy) {
+    if (_to[0] !== segment) {
+      break;
+    }
+    _from.shift();
+    _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
+};
+const dirname = function(p) {
+  const segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
+  if (segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0])) {
+    segments[0] += "/";
+  }
+  return segments.join("/") || (isAbsolute(p) ? "/" : ".");
+};
+const basename = function(p, extension) {
+  const segments = normalizeWindowsPath(p).split("/");
+  let lastSegment = "";
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const val = segments[i];
+    if (val) {
+      lastSegment = val;
+      break;
+    }
+  }
+  return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
+};
+
+const clear = async (context, selector) => {
+	const { iframe } = context;
+	const element = iframe.locator(selector);
+	await element.clear();
+};
+
+const click = async (context, selector, options = {}) => {
+	const tester = context.iframe;
+	await tester.locator(selector).click(options);
+};
+const dblClick = async (context, selector, options = {}) => {
+	const tester = context.iframe;
+	await tester.locator(selector).dblclick(options);
+};
+const tripleClick = async (context, selector, options = {}) => {
+	const tester = context.iframe;
+	await tester.locator(selector).click({
+		...options,
+		clickCount: 3
+	});
+};
+
+const dragAndDrop = async (context, source, target, options_) => {
+	const frame = await context.frame();
+	await frame.dragAndDrop(source, target, options_);
+};
+
+const fill = async (context, selector, text, options = {}) => {
+	const { iframe } = context;
+	const element = iframe.locator(selector);
+	await element.fill(text, options);
+};
+
+const hover = async (context, selector, options = {}) => {
+	await context.iframe.locator(selector).hover(options);
+};
+
+const keyboard = async (context, text, state) => {
+	const frame = await context.frame();
+	await frame.evaluate(focusIframe);
+	const pressed = new Set(state.unreleased);
+	await keyboardImplementation(pressed, context.provider, context.sessionId, text, async () => {
+		const frame = await context.frame();
+		await frame.evaluate(selectAll);
+	}, true);
+	return { unreleased: Array.from(pressed) };
+};
+const keyboardCleanup = async (context, state) => {
+	const { provider, sessionId } = context;
+	if (!state.unreleased) {
+		return;
+	}
+	const page = provider.getPage(sessionId);
+	for (const key of state.unreleased) {
+		await page.keyboard.up(key);
+	}
+};
+// fallback to insertText for non US key
+// https://github.com/microsoft/playwright/blob/50775698ae13642742f2a1e8983d1d686d7f192d/packages/playwright-core/src/server/input.ts#L95
+const VALID_KEYS = new Set([
+	"Escape",
+	"F1",
+	"F2",
+	"F3",
+	"F4",
+	"F5",
+	"F6",
+	"F7",
+	"F8",
+	"F9",
+	"F10",
+	"F11",
+	"F12",
+	"Backquote",
+	"`",
+	"~",
+	"Digit1",
+	"1",
+	"!",
+	"Digit2",
+	"2",
+	"@",
+	"Digit3",
+	"3",
+	"#",
+	"Digit4",
+	"4",
+	"$",
+	"Digit5",
+	"5",
+	"%",
+	"Digit6",
+	"6",
+	"^",
+	"Digit7",
+	"7",
+	"&",
+	"Digit8",
+	"8",
+	"*",
+	"Digit9",
+	"9",
+	"(",
+	"Digit0",
+	"0",
+	")",
+	"Minus",
+	"-",
+	"_",
+	"Equal",
+	"=",
+	"+",
+	"Backslash",
+	"\\",
+	"|",
+	"Backspace",
+	"Tab",
+	"KeyQ",
+	"q",
+	"Q",
+	"KeyW",
+	"w",
+	"W",
+	"KeyE",
+	"e",
+	"E",
+	"KeyR",
+	"r",
+	"R",
+	"KeyT",
+	"t",
+	"T",
+	"KeyY",
+	"y",
+	"Y",
+	"KeyU",
+	"u",
+	"U",
+	"KeyI",
+	"i",
+	"I",
+	"KeyO",
+	"o",
+	"O",
+	"KeyP",
+	"p",
+	"P",
+	"BracketLeft",
+	"[",
+	"{",
+	"BracketRight",
+	"]",
+	"}",
+	"CapsLock",
+	"KeyA",
+	"a",
+	"A",
+	"KeyS",
+	"s",
+	"S",
+	"KeyD",
+	"d",
+	"D",
+	"KeyF",
+	"f",
+	"F",
+	"KeyG",
+	"g",
+	"G",
+	"KeyH",
+	"h",
+	"H",
+	"KeyJ",
+	"j",
+	"J",
+	"KeyK",
+	"k",
+	"K",
+	"KeyL",
+	"l",
+	"L",
+	"Semicolon",
+	";",
+	":",
+	"Quote",
+	"'",
+	"\"",
+	"Enter",
+	"\n",
+	"\r",
+	"ShiftLeft",
+	"Shift",
+	"KeyZ",
+	"z",
+	"Z",
+	"KeyX",
+	"x",
+	"X",
+	"KeyC",
+	"c",
+	"C",
+	"KeyV",
+	"v",
+	"V",
+	"KeyB",
+	"b",
+	"B",
+	"KeyN",
+	"n",
+	"N",
+	"KeyM",
+	"m",
+	"M",
+	"Comma",
+	",",
+	"<",
+	"Period",
+	".",
+	">",
+	"Slash",
+	"/",
+	"?",
+	"ShiftRight",
+	"ControlLeft",
+	"Control",
+	"MetaLeft",
+	"Meta",
+	"AltLeft",
+	"Alt",
+	"Space",
+	" ",
+	"AltRight",
+	"AltGraph",
+	"MetaRight",
+	"ContextMenu",
+	"ControlRight",
+	"PrintScreen",
+	"ScrollLock",
+	"Pause",
+	"PageUp",
+	"PageDown",
+	"Insert",
+	"Delete",
+	"Home",
+	"End",
+	"ArrowLeft",
+	"ArrowUp",
+	"ArrowRight",
+	"ArrowDown",
+	"NumLock",
+	"NumpadDivide",
+	"NumpadMultiply",
+	"NumpadSubtract",
+	"Numpad7",
+	"Numpad8",
+	"Numpad9",
+	"Numpad4",
+	"Numpad5",
+	"Numpad6",
+	"NumpadAdd",
+	"Numpad1",
+	"Numpad2",
+	"Numpad3",
+	"Numpad0",
+	"NumpadDecimal",
+	"NumpadEnter",
+	"ControlOrMeta"
+]);
+async function keyboardImplementation(pressed, provider, sessionId, text, selectAll, skipRelease) {
+	const page = provider.getPage(sessionId);
+	const actions = parseKeyDef(text);
+	for (const { releasePrevious, releaseSelf, repeat, keyDef } of actions) {
+		const key = keyDef.key;
+		// TODO: instead of calling down/up for each key, join non special
+		// together, and call `type` once for all non special keys,
+		// and then `press` for special keys
+		if (pressed.has(key)) {
+			if (VALID_KEYS.has(key)) {
+				await page.keyboard.up(key);
+			}
+			pressed.delete(key);
+		}
+		if (!releasePrevious) {
+			if (key === "selectall") {
+				await selectAll();
+				continue;
+			}
+			for (let i = 1; i <= repeat; i++) {
+				if (VALID_KEYS.has(key)) {
+					await page.keyboard.down(key);
+				} else {
+					await page.keyboard.insertText(key);
+				}
+			}
+			if (releaseSelf) {
+				if (VALID_KEYS.has(key)) {
+					await page.keyboard.up(key);
+				}
+			} else {
+				pressed.add(key);
+			}
+		}
+	}
+	if (!skipRelease && pressed.size) {
+		for (const key of pressed) {
+			if (VALID_KEYS.has(key)) {
+				await page.keyboard.up(key);
+			}
+		}
+	}
+	return { pressed };
+}
+function focusIframe() {
+	if (!document.activeElement || document.activeElement.ownerDocument !== document || document.activeElement === document.body) {
+		window.focus();
+	}
+}
+function selectAll() {
+	const element = document.activeElement;
+	if (element && typeof element.select === "function") {
+		element.select();
+	}
+}
+
+/**
+* Takes a screenshot using the provided browser context and returns a buffer and the expected screenshot path.
+*
+* **Note**: the returned `path` indicates where the screenshot *might* be found.
+* It is not guaranteed to exist, especially if `options.save` is `false`.
+*
+* @throws {Error} If the function is not called within a test or if the browser provider does not support screenshots.
+*/
+async function takeScreenshot(context, name, options) {
+	if (!context.testPath) {
+		throw new Error(`Cannot take a screenshot without a test path`);
+	}
+	const path = resolveScreenshotPath(context.testPath, name, context.project.config, options.path);
+	// playwright does not need a screenshot path if we don't intend to save it
+	let savePath;
+	if (options.save) {
+		savePath = normalize(path);
+		await mkdir(dirname(savePath), { recursive: true });
+	}
+	const mask = options.mask?.map((selector) => context.iframe.locator(selector));
+	if (options.element) {
+		const { element: selector,...config } = options;
+		const element = context.iframe.locator(selector);
+		const buffer = await element.screenshot({
+			...config,
+			mask,
+			path: savePath
+		});
+		return {
+			buffer,
+			path
+		};
+	}
+	const buffer = await context.iframe.locator("body").screenshot({
+		...options,
+		mask,
+		path: savePath
+	});
+	return {
+		buffer,
+		path
+	};
+}
+
+const selectOptions = async (context, selector, userValues, options = {}) => {
+	const value = userValues;
+	const { iframe } = context;
+	const selectElement = iframe.locator(selector);
+	const values = await Promise.all(value.map(async (v) => {
+		if (typeof v === "string") {
+			return v;
+		}
+		const elementHandler = await iframe.locator(v.element).elementHandle();
+		if (!elementHandler) {
+			throw new Error(`Element not found: ${v.element}`);
+		}
+		return elementHandler;
+	}));
+	await selectElement.selectOption(values, options);
+};
+
+const tab = async (context, options = {}) => {
+	const page = context.page;
+	await page.keyboard.press(options.shift === true ? "Shift+Tab" : "Tab");
+};
+
+const startTracing = async ({ context, project, provider, sessionId }) => {
+	if (isPlaywrightProvider(provider)) {
+		if (provider.tracingContexts.has(sessionId)) {
+			return;
+		}
+		provider.tracingContexts.add(sessionId);
+		const options = project.config.browser.trace;
+		await context.tracing.start({
+			screenshots: options.screenshots ?? true,
+			snapshots: options.snapshots ?? true,
+			sources: false
+		}).catch(() => {
+			provider.tracingContexts.delete(sessionId);
+		});
+		return;
+	}
+	throw new TypeError(`The ${provider.name} provider does not support tracing.`);
+};
+const startChunkTrace = async (command, { name, title }) => {
+	const { provider, sessionId, testPath, context } = command;
+	if (!testPath) {
+		throw new Error(`stopChunkTrace cannot be called outside of the test file.`);
+	}
+	if (isPlaywrightProvider(provider)) {
+		if (!provider.tracingContexts.has(sessionId)) {
+			await startTracing(command);
+		}
+		const path = resolveTracesPath(command, name);
+		provider.pendingTraces.set(path, sessionId);
+		await context.tracing.startChunk({
+			name,
+			title
+		});
+		return;
+	}
+	throw new TypeError(`The ${provider.name} provider does not support tracing.`);
+};
+const stopChunkTrace = async (context, { name }) => {
+	if (isPlaywrightProvider(context.provider)) {
+		const path = resolveTracesPath(context, name);
+		context.provider.pendingTraces.delete(path);
+		await context.context.tracing.stopChunk({ path });
+		return { tracePath: path };
+	}
+	throw new TypeError(`The ${context.provider.name} provider does not support tracing.`);
+};
+function resolveTracesPath({ testPath, project }, name) {
+	if (!testPath) {
+		throw new Error(`This command can only be called inside a test file.`);
+	}
+	const options = project.config.browser.trace;
+	const sanitizedName = `${project.name.replace(/[^a-z0-9]/gi, "-")}-${name}.trace.zip`;
+	if (options.tracesDir) {
+		return resolve(options.tracesDir, sanitizedName);
+	}
+	const dir = dirname(testPath);
+	const base = basename(testPath);
+	return resolve(dir, "__traces__", base, `${project.name.replace(/[^a-z0-9]/gi, "-")}-${name}.trace.zip`);
+}
+const deleteTracing = async (context, { traces }) => {
+	if (!context.testPath) {
+		throw new Error(`stopChunkTrace cannot be called outside of the test file.`);
+	}
+	if (isPlaywrightProvider(context.provider)) {
+		return Promise.all(traces.map((trace) => unlink(trace).catch((err) => {
+			if (err.code === "ENOENT") {
+				// Ignore the error if the file doesn't exist
+				return;
+			}
+			// Re-throw other errors
+			throw err;
+		})));
+	}
+	throw new Error(`provider ${context.provider.name} is not supported`);
+};
+const annotateTraces = async ({ project }, { testId, traces }) => {
+	const vitest = project.vitest;
+	await Promise.all(traces.map((trace) => {
+		const entity = vitest.state.getReportedEntityById(testId);
+		return vitest._testRun.annotate(testId, {
+			message: relative(project.config.root, trace),
+			type: "traces",
+			attachment: {
+				path: trace,
+				contentType: "application/octet-stream"
+			},
+			location: entity?.location ? {
+				file: entity.module.moduleId,
+				line: entity.location.line,
+				column: entity.location.column
+			} : undefined
+		});
+	}));
+};
+function isPlaywrightProvider(provider) {
+	return provider.name === "playwright";
+}
+
+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);
+	if (!skipClick) {
+		await element.focus();
+	}
+	await keyboardImplementation(unreleased, context.provider, context.sessionId, text, () => element.selectText(), skipAutoClose);
+	return { unreleased: Array.from(unreleased) };
+};
+
+const upload = async (context, selector, files, options) => {
+	const testPath = context.testPath;
+	if (!testPath) {
+		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);
+		}
+		return {
+			name: file.name,
+			mimeType: file.mimeType,
+			buffer: Buffer.from(file.base64, "base64")
+		};
+	});
+	await iframe.locator(selector).setInputFiles(playwrightFiles, options);
+};
+
+var commands = {
+	__vitest_upload: upload,
+	__vitest_click: click,
+	__vitest_dblClick: dblClick,
+	__vitest_tripleClick: tripleClick,
+	__vitest_takeScreenshot: takeScreenshot,
+	__vitest_type: type,
+	__vitest_clear: clear,
+	__vitest_fill: fill,
+	__vitest_tab: tab,
+	__vitest_keyboard: keyboard,
+	__vitest_selectOptions: selectOptions,
+	__vitest_dragAndDrop: dragAndDrop,
+	__vitest_hover: hover,
+	__vitest_cleanup: keyboardCleanup,
+	__vitest_deleteTracing: deleteTracing,
+	__vitest_startChunkTrace: startChunkTrace,
+	__vitest_startTracing: startTracing,
+	__vitest_stopChunkTrace: stopChunkTrace,
+	__vitest_annotateTraces: annotateTraces
+};
+
+const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
+const distRoot = resolve(pkgRoot, "dist");
+
+const debug = createDebugger("vitest:browser:playwright");
+const playwrightBrowsers = [
+	"firefox",
+	"webkit",
+	"chromium"
+];
+function playwright(options = {}) {
+	return defineBrowserProvider({
+		name: "playwright",
+		supportedBrowser: playwrightBrowsers,
+		options,
+		providerFactory(project) {
+			return new PlaywrightBrowserProvider(project, options);
+		}
+	});
+}
+class PlaywrightBrowserProvider {
+	name = "playwright";
+	supportsParallelism = true;
+	browser = null;
+	contexts = new Map();
+	pages = new Map();
+	mocker;
+	browserName;
+	browserPromise = null;
+	closing = false;
+	tracingContexts = new Set();
+	pendingTraces = new Map();
+	initScripts = [resolve(distRoot, "locators.js")];
+	constructor(project, options) {
+		this.project = project;
+		this.options = options;
+		this.browserName = project.config.browser.name;
+		this.mocker = this.createMocker();
+		for (const [name, command] of Object.entries(commands)) {
+			project.browser.registerCommand(name, command);
+		}
+		// make sure the traces are finished if the test hangs
+		process.on("SIGTERM", () => {
+			if (!this.browser) {
+				return;
+			}
+			const promises = [];
+			for (const [trace, contextId] of this.pendingTraces.entries()) {
+				promises.push((() => {
+					const context = this.contexts.get(contextId);
+					return context?.tracing.stopChunk({ path: trace });
+				})());
+			}
+			return Promise.allSettled(promises);
+		});
+	}
+	async openBrowser() {
+		await this._throwIfClosing();
+		if (this.browserPromise) {
+			debug?.("[%s] the browser is resolving, reusing the promise", this.browserName);
+			return this.browserPromise;
+		}
+		if (this.browser) {
+			debug?.("[%s] the browser is resolved, reusing it", this.browserName);
+			return this.browser;
+		}
+		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
+			};
+			if (typeof options.trace === "object" && options.trace.tracesDir) {
+				launchOptions.tracesDir = options.trace?.tracesDir;
+			}
+			const inspector = this.project.vitest.config.inspector;
+			if (inspector.enabled) {
+				// NodeJS equivalent defaults: https://nodejs.org/en/learn/getting-started/debugging#enable-inspector
+				const port = inspector.port || 9229;
+				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}`);
+			}
+			// start Vitest UI maximized only on supported browsers
+			if (this.project.config.browser.ui && this.browserName === "chromium") {
+				if (!launchOptions.args) {
+					launchOptions.args = [];
+				}
+				if (!launchOptions.args.includes("--start-maximized") && !launchOptions.args.includes("--start-fullscreen")) {
+					launchOptions.args.push("--start-maximized");
+				}
+			}
+			debug?.("[%s] initializing the browser with launch options: %O", this.browserName, launchOptions);
+			this.browser = await playwright[this.browserName].launch(launchOptions);
+			this.browserPromise = null;
+			return this.browser;
+		})();
+		return this.browserPromise;
+	}
+	createMocker() {
+		const idPreficates = new Map();
+		const sessionIds = new Map();
+		function createPredicate(sessionId, url) {
+			const moduleUrl = new URL(url, "http://localhost");
+			const predicate = (url) => {
+				if (url.searchParams.has("_vitest_original")) {
+					return false;
+				}
+				// different modules, ignore request
+				if (url.pathname !== moduleUrl.pathname) {
+					return false;
+				}
+				url.searchParams.delete("t");
+				url.searchParams.delete("v");
+				url.searchParams.delete("import");
+				// different search params, ignore request
+				if (url.searchParams.size !== moduleUrl.searchParams.size) {
+					return false;
+				}
+				// check that all search params are the same
+				for (const [param, value] of url.searchParams.entries()) {
+					if (moduleUrl.searchParams.get(param) !== value) {
+						return false;
+					}
+				}
+				return true;
+			};
+			const ids = sessionIds.get(sessionId) || [];
+			ids.push(moduleUrl.href);
+			sessionIds.set(sessionId, ids);
+			idPreficates.set(predicateKey(sessionId, moduleUrl.href), predicate);
+			return predicate;
+		}
+		function predicateKey(sessionId, url) {
+			return `${sessionId}:${url}`;
+		}
+		return {
+			register: async (sessionId, module) => {
+				const page = this.getPage(sessionId);
+				await page.route(createPredicate(sessionId, module.url), async (route) => {
+					if (module.type === "manual") {
+						const exports = Object.keys(await module.resolve());
+						const body = createManualModuleSource(module.url, exports);
+						return route.fulfill({
+							body,
+							headers: getHeaders(this.project.browser.vite.config)
+						});
+					}
+					// webkit doesn't support redirect responses
+					// https://github.com/microsoft/playwright/issues/18318
+					const isWebkit = this.browserName === "webkit";
+					if (isWebkit) {
+						let url;
+						if (module.type === "redirect") {
+							const redirect = new URL(module.redirect);
+							url = redirect.href.slice(redirect.origin.length);
+						} else {
+							const request = new URL(route.request().url());
+							request.searchParams.set("mock", module.type);
+							url = request.href.slice(request.origin.length);
+						}
+						const result = await this.project.browser.vite.transformRequest(url).catch(() => null);
+						if (!result) {
+							return route.continue();
+						}
+						let content = result.code;
+						if (result.map && "version" in result.map && result.map.mappings) {
+							const type = isDirectCSSRequest(url) ? "css" : "js";
+							content = getCodeWithSourcemap(type, content.toString(), result.map);
+						}
+						return route.fulfill({
+							body: content,
+							headers: getHeaders(this.project.browser.vite.config)
+						});
+					}
+					if (module.type === "redirect") {
+						return route.fulfill({
+							status: 302,
+							headers: { Location: module.redirect }
+						});
+					} else if (module.type === "automock" || module.type === "autospy") {
+						const url = new URL(route.request().url());
+						url.searchParams.set("mock", module.type);
+						return route.fulfill({
+							status: 302,
+							headers: { Location: url.href }
+						});
+					} else ;
+				});
+			},
+			delete: async (sessionId, id) => {
+				const page = this.getPage(sessionId);
+				const key = predicateKey(sessionId, id);
+				const predicate = idPreficates.get(key);
+				if (predicate) {
+					await page.unroute(predicate).finally(() => idPreficates.delete(key));
+				}
+			},
+			clear: async (sessionId) => {
+				const page = this.getPage(sessionId);
+				const ids = sessionIds.get(sessionId) || [];
+				const promises = ids.map((id) => {
+					const key = predicateKey(sessionId, id);
+					const predicate = idPreficates.get(key);
+					if (predicate) {
+						return page.unroute(predicate).finally(() => idPreficates.delete(key));
+					}
+					return null;
+				});
+				await Promise.all(promises).finally(() => sessionIds.delete(sessionId));
+			}
+		};
+	}
+	async createContext(sessionId) {
+		await this._throwIfClosing();
+		if (this.contexts.has(sessionId)) {
+			debug?.("[%s][%s] the context already exists, reusing it", sessionId, this.browserName);
+			return this.contexts.get(sessionId);
+		}
+		const browser = await this.openBrowser();
+		await this._throwIfClosing(browser);
+		const actionTimeout = this.options.actionTimeout;
+		const contextOptions = this.options.contextOptions ?? {};
+		const options = {
+			...contextOptions,
+			ignoreHTTPSErrors: true
+		};
+		if (this.project.config.browser.ui) {
+			options.viewport = null;
+		}
+		const context = await browser.newContext(options);
+		await this._throwIfClosing(context);
+		if (actionTimeout != null) {
+			context.setDefaultTimeout(actionTimeout);
+		}
+		debug?.("[%s][%s] the context is ready", sessionId, this.browserName);
+		this.contexts.set(sessionId, context);
+		return context;
+	}
+	getPage(sessionId) {
+		const page = this.pages.get(sessionId);
+		if (!page) {
+			throw new Error(`Page "${sessionId}" not found in ${this.browserName} browser.`);
+		}
+		return page;
+	}
+	getCommandsContext(sessionId) {
+		const page = this.getPage(sessionId);
+		return {
+			page,
+			context: this.contexts.get(sessionId),
+			frame() {
+				return new Promise((resolve, reject) => {
+					const frame = page.frame("vitest-iframe");
+					if (frame) {
+						return resolve(frame);
+					}
+					const timeout = setTimeout(() => {
+						const err = new Error(`Cannot find "vitest-iframe" on the page. This is a bug in Vitest, please report it.`);
+						reject(err);
+					}, 1e3).unref();
+					page.on("frameattached", (frame) => {
+						clearTimeout(timeout);
+						resolve(frame);
+					});
+				});
+			},
+			get iframe() {
+				return page.frameLocator("[data-vitest=\"true\"]");
+			}
+		};
+	}
+	async openBrowserPage(sessionId) {
+		await this._throwIfClosing();
+		if (this.pages.has(sessionId)) {
+			debug?.("[%s][%s] the page already exists, closing the old one", sessionId, this.browserName);
+			const page = this.pages.get(sessionId);
+			await page.close();
+			this.pages.delete(sessionId);
+		}
+		const context = await this.createContext(sessionId);
+		const page = await context.newPage();
+		debug?.("[%s][%s] the page is ready", sessionId, this.browserName);
+		await this._throwIfClosing(page);
+		this.pages.set(sessionId, page);
+		if (process.env.VITEST_PW_DEBUG) {
+			page.on("requestfailed", (request) => {
+				console.error("[PW Error]", request.resourceType(), "request failed for", request.url(), "url:", request.failure()?.errorText);
+			});
+		}
+		return page;
+	}
+	async openPage(sessionId, url) {
+		debug?.("[%s][%s] creating the browser page for %s", sessionId, this.browserName, url);
+		const browserPage = await this.openBrowserPage(sessionId);
+		debug?.("[%s][%s] browser page is created, opening %s", sessionId, this.browserName, url);
+		await browserPage.goto(url, { timeout: 0 });
+		await this._throwIfClosing(browserPage);
+	}
+	async _throwIfClosing(disposable) {
+		if (this.closing) {
+			debug?.("[%s] provider was closed, cannot perform the action on %s", this.browserName, String(disposable));
+			await disposable?.close();
+			this.pages.clear();
+			this.contexts.clear();
+			this.browser = null;
+			this.browserPromise = null;
+			throw new Error(`[vitest] The provider was closed.`);
+		}
+	}
+	async getCDPSession(sessionid) {
+		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;
+			},
+			on(event, listener) {
+				cdp.on(event, listener);
+			},
+			off(event, listener) {
+				cdp.off(event, listener);
+			},
+			once(event, listener) {
+				cdp.once(event, listener);
+			}
+		};
+	}
+	async close() {
+		debug?.("[%s] closing provider", this.browserName);
+		this.closing = true;
+		if (this.browserPromise) {
+			await this.browserPromise;
+			this.browserPromise = null;
+		}
+		const browser = this.browser;
+		this.browser = null;
+		await Promise.all([...this.pages.values()].map((p) => p.close()));
+		this.pages.clear();
+		await Promise.all([...this.contexts.values()].map((c) => c.close()));
+		this.contexts.clear();
+		await browser?.close();
+		debug?.("[%s] provider is closed", this.browserName);
+	}
+}
+function getHeaders(config) {
+	const headers = { "Content-Type": "application/javascript" };
+	for (const name in config.server.headers) {
+		headers[name] = String(config.server.headers[name]);
+	}
+	return headers;
+}
+function getCodeWithSourcemap(type, code, map) {
+	if (type === "js") {
+		code += `\n//# sourceMappingURL=${genSourceMapUrl(map)}`;
+	} else if (type === "css") {
+		code += `\n/*# sourceMappingURL=${genSourceMapUrl(map)} */`;
+	}
+	return code;
+}
+function genSourceMapUrl(map) {
+	if (typeof map !== "string") {
+		map = JSON.stringify(map);
+	}
+	return `data:application/json;base64,${Buffer.from(map).toString("base64")}`;
+}
+const directRequestRE = /[?&]direct\b/;
+function isDirectCSSRequest(request) {
+	return isCSSRequest(request) && directRequestRE.test(request);
+}
+
+export { PlaywrightBrowserProvider, playwright };