@vitest/browser 3.2.0-beta.2 → 3.2.0-beta.3

package/dist/index.js

@@ -13,12 +13,12 @@ import { fileURLToPath } from 'node:url';
 import crypto from 'node:crypto';
 import { mkdir, rm, readFile as readFile$1 } from 'node:fs/promises';
 import { parseErrorStacktrace, parseStacktrace } from '@vitest/utils/source-map';
-import { P as PlaywrightBrowserProvider, W as WebdriverBrowserProvider } from './webdriver-D7k26Na7.js';
+import { P as PlaywrightBrowserProvider, W as WebdriverBrowserProvider } from './webdriver-B1QbgqhC.js';
 import { resolve as resolve$1, basename as basename$1, dirname as dirname$1, normalize as normalize$1 } from 'node:path';
 import { WebSocketServer } from 'ws';
 import * as nodeos from 'node:os';
 
-var version = "3.2.0-beta.2";
+var version = "3.2.0-beta.3";
 
 const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
@@ -351,15 +351,19 @@ function slash(path) {
 
 async function resolveOrchestrator(globalServer, url, res) {
 	let sessionId = url.searchParams.get("sessionId");
+	// it's possible to open the page without a context
 	if (!sessionId) {
 		const contexts = [...globalServer.children].flatMap((p) => [...p.state.orchestrators.keys()]);
 		sessionId = contexts[contexts.length - 1] ?? "none";
 	}
+	// it's ok to not have a session here, especially in the preview provider
+	// because the user could refresh the page which would remove the session id from the url
 	const session = globalServer.vitest._browserSessions.getSession(sessionId);
 	const browserProject = session?.project.browser || [...globalServer.children][0];
 	if (!browserProject) {
 		return;
 	}
+	// ignore uknown pages
 	if (sessionId && sessionId !== "none" && !globalServer.vitest._browserSessions.sessionIds.has(sessionId)) {
 		return;
 	}
@@ -375,6 +379,7 @@ async function resolveOrchestrator(globalServer, url, res) {
 		__VITEST_PROVIDED_CONTEXT__: JSON.stringify(stringify(browserProject.project.getProvidedContext())),
 		__VITEST_API_TOKEN__: JSON.stringify(globalServer.vitest.config.api.token)
 	});
+	// disable CSP for the orchestrator as we are the ones controlling it
 	res.removeHeader("Content-Security-Policy");
 	if (!globalServer.orchestratorScripts) {
 		globalServer.orchestratorScripts = (await globalServer.formatScripts(globalServer.config.browser.orchestratorScripts)).map((script) => {
@@ -387,6 +392,7 @@ async function resolveOrchestrator(globalServer, url, res) {
 		}).join("\n");
 	}
 	let baseHtml = typeof globalServer.orchestratorHtml === "string" ? globalServer.orchestratorHtml : await globalServer.orchestratorHtml;
+	// if UI is enabled, use UI HTML and inject the orchestrator script
 	if (globalServer.config.browser.ui) {
 		const manifestContent = globalServer.manifest instanceof Promise ? await globalServer.manifest : globalServer.manifest;
 		const jsEntry = manifestContent["orchestrator.html"].file;
@@ -413,6 +419,7 @@ function disableCache(res) {
 	res.setHeader("Content-Type", "text/html; charset=utf-8");
 }
 function allowIframes(res) {
+	// remove custom iframe related headers to allow the iframe to load
 	res.removeHeader("X-Frame-Options");
 }
 
@@ -438,6 +445,8 @@ function createOrchestratorMiddleware(parentServer) {
 async function resolveTester(globalServer, url, res, next) {
 	const csp = res.getHeader("Content-Security-Policy");
 	if (typeof csp === "string") {
+		// add frame-ancestors to allow the iframe to be loaded by Vitest,
+		// but keep the rest of the CSP
 		res.setHeader("Content-Security-Policy", csp.replace(/frame-ancestors [^;]+/, "frame-ancestors *"));
 	}
 	const sessionId = url.searchParams.get("sessionId") || "none";
@@ -572,6 +581,7 @@ var BrowserPlugin = (parentServer, base = "/") => {
 			name: "vitest:browser",
 			async configureServer(server) {
 				parentServer.setServer(server);
+				// eslint-disable-next-line prefer-arrow-callback
 				server.middlewares.use(function vitestHeaders(_req, res, next) {
 					const headers = server.config.server.headers;
 					if (headers) {
@@ -604,6 +614,7 @@ var BrowserPlugin = (parentServer, base = "/") => {
 				}
 				const uiEnabled = parentServer.config.browser.ui;
 				if (uiEnabled) {
+					// eslint-disable-next-line prefer-arrow-callback
 					server.middlewares.use(`${base}__screenshot-error`, function vitestBrowserScreenshotError(req, res) {
 						if (!req.url) {
 							res.statusCode = 404;
@@ -642,6 +653,11 @@ var BrowserPlugin = (parentServer, base = "/") => {
 					});
 				}
 				server.middlewares.use((req, res, next) => {
+					// 9000 mega head move
+					// Vite always caches optimized dependencies, but users might mock
+					// them in _some_ tests, while keeping original modules in others
+					// there is no way to configure that in Vite, so we patch it here
+					// to always ignore the cache-control set by Vite in the next middleware
 					if (req.url && versionRegexp.test(req.url) && !req.url.includes("chunk-")) {
 						res.setHeader("Cache-Control", "no-cache");
 						const setHeader = res.setHeader.bind(res);
@@ -660,10 +676,13 @@ var BrowserPlugin = (parentServer, base = "/") => {
 			name: "vitest:browser:tests",
 			enforce: "pre",
 			async config() {
+				// this plugin can be used in different projects, but all of them
+				// have the same `include` pattern, so it doesn't matter which project we use
 				const project = parentServer.project;
 				const { testFiles: allTestFiles } = await project.globTestFiles();
 				const browserTestFiles = allTestFiles.filter((file) => getFilePoolName(project, file) === "browser");
 				const setupFiles = toArray(project.config.setupFiles);
+				// replace env values - cannot be reassign at runtime
 				const define = {};
 				for (const env in project.config.env || {}) {
 					const stringValue = JSON.stringify(project.config.env[env]);
@@ -735,8 +754,10 @@ var BrowserPlugin = (parentServer, base = "/") => {
 				if (svelte) {
 					exclude.push("vitest-browser-svelte");
 				}
+				// since we override the resolution in the esbuild plugin, Vite can no longer optimizer it
 				const vue = isPackageExists("vitest-browser-vue", fileRoot);
 				if (vue) {
+					// we override them in the esbuild plugin so optimizer can no longer intercept it
 					include.push("vitest-browser-vue", "vitest-browser-vue > @vue/test-utils", "vitest-browser-vue > @vue/test-utils > @vue/compiler-core");
 				}
 				const vueTestUtils = isPackageExists("@vue/test-utils", fileRoot);
@@ -787,6 +808,7 @@ var BrowserPlugin = (parentServer, base = "/") => {
 			},
 			transform(code, id) {
 				if (id.includes(parentServer.vite.config.cacheDir) && id.includes("loupe.js")) {
+					// loupe bundle has a nastry require('util') call that leaves a warning in the console
 					const utilRequire = "nodeUtil = require_util();";
 					return code.replace(utilRequire, " ".repeat(utilRequire.length));
 				}
@@ -829,11 +851,12 @@ var BrowserPlugin = (parentServer, base = "/") => {
 		{
 			name: "vitest:browser:in-source-tests",
 			transform(code, id) {
+				const filename = cleanUrl(id);
 				const project = parentServer.vitest.getProjectByName(parentServer.config.name);
-				if (!project._isCachedTestFile(id) || !code.includes("import.meta.vitest")) {
+				if (!project._isCachedTestFile(filename) || !code.includes("import.meta.vitest")) {
 					return;
 				}
-				const s = new MagicString(code, { filename: cleanUrl(id) });
+				const s = new MagicString(code, { filename });
 				s.prepend(`import.meta.vitest = __vitest_index__;\n`);
 				return {
 					code: s.toString(),
@@ -844,6 +867,7 @@ var BrowserPlugin = (parentServer, base = "/") => {
 		{
 			name: "vitest:browser:worker",
 			transform(code, id, _options) {
+				// https://github.com/vitejs/vite/blob/ba56cf43b5480f8519349f7d7fe60718e9af5f1a/packages/vite/src/node/plugins/worker.ts#L46
 				if (/(?:\?|&)worker_file&type=\w+(?:&|$)/.test(id)) {
 					const s = new MagicString(code);
 					s.prepend("globalThis.__vitest_browser_runner__ = { wrapDynamicImport: f => f() };\n");
@@ -898,6 +922,8 @@ var BrowserPlugin = (parentServer, base = "/") => {
 						}
 					}
 				} else {
+					// inject the reset style only in the default template,
+					// allowing users to customize the style in their own template
 					testerTags.push({
 						tag: "style",
 						children: `
@@ -969,6 +995,8 @@ body {
 				const esbuildPlugin = {
 					name: "test-utils-rewrite",
 					setup(build) {
+						// test-utils: resolve to CJS instead of the browser because the browser version expects a global Vue object
+						// compiler-core: only CJS version allows slots as strings
 						build.onResolve({ filter: /^@vue\/(test-utils|compiler-core)$/ }, (args) => {
 							const resolved = getRequire().resolve(args.path, { paths: [args.importer] });
 							return { path: resolved };
@@ -1006,6 +1034,7 @@ function resolveCoverageFolder(vitest) {
 	if (!htmlReporter) {
 		return undefined;
 	}
+	// reportsDirectory not resolved yet
 	const root = resolve(options.root || process.cwd(), options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory);
 	const subdir = Array.isArray(htmlReporter) && htmlReporter.length > 1 && "subdir" in htmlReporter[1] ? htmlReporter[1].subdir : undefined;
 	if (!subdir || typeof subdir !== "string") {
@@ -1121,6 +1150,7 @@ const dragAndDrop = async (context, source, target, options_) => {
 		const $target = context.browser.$(target);
 		const options = options_ || {};
 		const duration = options.duration ?? 10;
+		// https://github.com/webdriverio/webdriverio/issues/8022#issuecomment-1700919670
 		await context.browser.action("pointer").move({
 			duration: 0,
 			origin: $source,
@@ -1625,6 +1655,7 @@ function assertFileAccess(path, project) {
 const readFile = async ({ project }, path, options = {}) => {
 	const filepath = resolve$1(project.config.root, path);
 	assertFileAccess(filepath, project);
+	// never return a Buffer
 	if (typeof options === "object" && !options.encoding) {
 		options.encoding = "utf-8";
 	}
@@ -2015,6 +2046,8 @@ const keyboardCleanup = async (context, state) => {
 		throw new TypeError(`Provider "${context.provider.name}" does not support keyboard api`);
 	}
 };
+// 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",
@@ -2230,6 +2263,9 @@ async function keyboardImplementation(pressed, provider, sessionId, text, select
 		const actions = parseKeyDef(defaultKeyMap, 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);
@@ -2296,6 +2332,7 @@ async function keyboardImplementation(pressed, provider, sessionId, text, select
 				}
 			}
 		}
+		// seems like webdriverio doesn't release keys automatically if skipRelease is true and all events are keyUp
 		const allRelease = keyboard.toJSON().actions.every((action) => action.type === "keyUp");
 		await keyboard.perform(allRelease ? false : skipRelease);
 	}
@@ -2454,12 +2491,12 @@ const upload = async (context, selector, files, options) => {
 	if (!testPath) {
 		throw new Error(`Cannot upload files outside of a test`);
 	}
-	const testDir = dirname(testPath);
+	const root = context.project.config.root;
 	if (context.provider instanceof PlaywrightBrowserProvider) {
 		const { iframe } = context;
 		const playwrightFiles = files.map((file) => {
 			if (typeof file === "string") {
-				return resolve(testDir, file);
+				return resolve(root, file);
 			}
 			return {
 				name: file.name,
@@ -2476,7 +2513,7 @@ const upload = async (context, selector, files, options) => {
 		}
 		const element = context.browser.$(selector);
 		for (const file of files) {
-			const filepath = resolve(testDir, file);
+			const filepath = resolve(root, file);
 			const remoteFilePath = await context.browser.uploadFile(filepath);
 			await element.addValue(remoteFilePath);
 		}
@@ -2485,6 +2522,14 @@ const upload = async (context, selector, files, options) => {
 	}
 };
 
+const viewport = async (context, options) => {
+	if (context.provider instanceof WebdriverBrowserProvider) {
+		await context.provider.setViewport(options);
+	} else {
+		throw new TypeError(`Provider ${context.provider.name} doesn't support "viewport" command`);
+	}
+};
+
 var builtinCommands = {
 	readFile,
 	removeFile,
@@ -2503,7 +2548,8 @@ var builtinCommands = {
 	__vitest_selectOptions: selectOptions,
 	__vitest_dragAndDrop: dragAndDrop,
 	__vitest_hover: hover,
-	__vitest_cleanup: keyboardCleanup
+	__vitest_cleanup: keyboardCleanup,
+	__vitest_viewport: viewport
 };
 
 class BrowserServerState {
@@ -2599,6 +2645,7 @@ class ParentBrowserProject {
 	children = new Set();
 	vitest;
 	config;
+	// cache for non-vite source maps
 	sourceMapCache = new Map();
 	constructor(project, base) {
 		this.project = project;
@@ -2612,6 +2659,7 @@ class ParentBrowserProject {
 					return this.sourceMapCache.get(id);
 				}
 				const result = this.vite.moduleGraph.getModuleById(id)?.transformResult;
+				// this can happen for bundled dependencies in node_modules/.vite
 				if (result && !result.map) {
 					const sourceMapUrl = this.retrieveSourceMapURL(result.code);
 					if (!sourceMapUrl) {
@@ -2635,6 +2683,8 @@ class ParentBrowserProject {
 				if (modUrl) {
 					return resolvedPath;
 				}
+				// some browsers (looking at you, safari) don't report queries in stack traces
+				// the next best thing is to try the first id that this file resolves to
 				const files = this.vite.moduleGraph.getModulesByFile(resolvedPath);
 				if (files && files.size) {
 					return files.values().next().value.id;
@@ -2645,6 +2695,7 @@ class ParentBrowserProject {
 		for (const [name, command] of Object.entries(builtinCommands)) {
 			this.commands[name] ??= command;
 		}
+		// validate names because they can't be used as identifiers
 		for (const command in project.config.browser.commands) {
 			if (!/^[a-z_$][\w$]*$/i.test(command)) {
 				throw new Error(`Invalid command name "${command}". Only alphanumeric characters, $ and _ are allowed.`);
@@ -2765,7 +2816,10 @@ class ParentBrowserProject {
 	}
 	retrieveSourceMapURL(source) {
 		const re = /\/\/[@#]\s*sourceMappingURL=([^\s'"]+)\s*$|\/\*[@#]\s*sourceMappingURL=[^\s*'"]+\s*\*\/\s*$/gm;
+		// Keep executing the search to find the *last* sourceMappingURL to avoid
+		// picking up sourceMappingURLs from comments, strings, etc.
 		let lastMatch, match;
+		// eslint-disable-next-line no-cond-assign
 		while (match = re.exec(source)) {
 			lastMatch = match;
 		}
@@ -2964,6 +3018,7 @@ function setupBrowserRpc(globalServer, defaultMockerRegistry) {
 		}
 		if (type === "orchestrator") {
 			const session = vitest._browserSessions.getSession(sessionId);
+			// it's possible the session was already resolved by the preview provider
 			session?.connected();
 		}
 		const project = vitest.getProjectByName(projectName);
@@ -2984,10 +3039,12 @@ function setupBrowserRpc(globalServer, defaultMockerRegistry) {
 				if (type === "orchestrator") {
 					vitest._browserSessions.destroySession(sessionId);
 				}
+				// this will reject any hanging methods if there are any
 				rpc.$close(new Error(`[vitest] Browser connection was closed while running tests. Was the page closed unexpectedly?`));
 			});
 		});
 	});
+	// we don't throw an error inside a stream because this can segfault the process
 	function error(err) {
 		console.error(err);
 		vitest.state.catchError(err, "RPC Error");
@@ -3124,6 +3181,8 @@ function setupBrowserRpc(globalServer, defaultMockerRegistry) {
 			},
 			async registerMock(sessionId, module) {
 				if (!mocker) {
+					// make sure modules are not processed yet in case they were imported before
+					// and were not mocked
 					mockResolver.invalidate([module.id]);
 					if (module.type === "manual") {
 						const mock = ManualMockedModule.fromJSON(module, async () => {
@@ -3194,7 +3253,10 @@ function setupBrowserRpc(globalServer, defaultMockerRegistry) {
 		return rpc;
 	}
 }
+// Serialization support utils.
 function cloneByOwnProperties(value) {
+	// Clones the value's properties into a new Object. The simpler approach of
+	// Object.assign() won't work in the case that properties are not enumerable.
 	return Object.getOwnPropertyNames(value).reduce((clone, prop) => ({
 		...clone,
 		[prop]: value[prop]
@@ -3255,7 +3317,7 @@ function createBrowserPool(vitest) {
 		vitest.onCancel(() => {
 			isCancelled = true;
 		});
-		await Promise.all([...groupedFiles.entries()].map(async ([project, files]) => {
+		const initialisedPools = await Promise.all([...groupedFiles.entries()].map(async ([project, files]) => {
 			await project._initBrowserProvider();
 			if (!project.browser) {
 				throw new TypeError(`The browser server was not initialized${project.name ? ` for the "${project.name}" project` : ""}. This is a bug in Vitest. Please, open a new issue with reproduction.`);
@@ -3267,8 +3329,34 @@ function createBrowserPool(vitest) {
 			const pool = ensurePool(project);
 			vitest.state.clearFiles(project, files);
 			providers.add(project.browser.provider);
-			await pool.runTests(method, files);
+			return {
+				pool,
+				provider: project.browser.provider,
+				runTests: () => pool.runTests(method, files)
+			};
 		}));
+		if (isCancelled) {
+			return;
+		}
+		const parallelPools = [];
+		const nonParallelPools = [];
+		for (const result of initialisedPools) {
+			if (!result) {
+				return;
+			}
+			if (result.provider.mocker && result.provider.supportsParallelism) {
+				parallelPools.push(result.runTests);
+			} else {
+				nonParallelPools.push(result.runTests);
+			}
+		}
+		await Promise.all(parallelPools.map((runTests) => runTests()));
+		for (const runTests of nonParallelPools) {
+			if (isCancelled) {
+				return;
+			}
+			await runTests();
+		}
 	};
 	function getThreadsCount(project) {
 		const config = project.config.browser;
@@ -3339,6 +3427,8 @@ class BrowserPool {
 			debug?.("all orchestrators are ready, not creating more");
 			return this._promise;
 		}
+		// open the minimum amount of tabs
+		// if there is only 1 file running, we don't need 8 tabs running
 		const workerCount = Math.min(this.options.maxWorkers - this.orchestrators.size, files.length);
 		const promises = [];
 		for (let i = 0; i < workerCount; i++) {
@@ -3347,6 +3437,7 @@ class BrowserPool {
 			const project = this.project.name;
 			debug?.("[%s] creating session for %s", sessionId, project);
 			const page = this.openPage(sessionId).then(() => {
+				// start running tests on the page when it's ready
 				this.runNextTest(method, sessionId);
 			});
 			promises.push(page);
@@ -3371,6 +3462,7 @@ class BrowserPool {
 	}
 	finishSession(sessionId) {
 		this.readySessions.add(sessionId);
+		// the last worker finished running tests
 		if (this.readySessions.size === this.orchestrators.size) {
 			this._promise?.resolve();
 			this._promise = undefined;
@@ -3384,10 +3476,14 @@ class BrowserPool {
 		if (!file) {
 			debug?.("[%s] no more tests to run", sessionId);
 			const isolate = this.project.config.browser.isolate;
+			// we don't need to cleanup testers if isolation is enabled,
+			// because cleanup is done at the end of every test
 			if (isolate) {
 				this.finishSession(sessionId);
 				return;
 			}
+			// we need to cleanup testers first because there is only
+			// one iframe and it does the cleanup only after everything is completed
 			const orchestrator = this.getOrchestrator(sessionId);
 			orchestrator.cleanupTesters().catch((error) => this.reject(error)).finally(() => this.finishSession(sessionId));
 			return;
@@ -3398,6 +3494,7 @@ class BrowserPool {
 		const orchestrator = this.getOrchestrator(sessionId);
 		debug?.("[%s] run test %s", sessionId, file);
 		this.setBreakpoint(sessionId, file).then(() => {
+			// this starts running tests inside the orchestrator
 			orchestrator.createTesters({
 				method,
 				files: [file],
@@ -3406,6 +3503,7 @@ class BrowserPool {
 				debug?.("[%s] test %s finished running", sessionId, file);
 				this.runNextTest(method, sessionId);
 			}).catch((error) => {
+				// if user cancells the test run manually, ignore the error and exit gracefully
 				if (this.project.vitest.isCancelling && error instanceof Error && error.message.startsWith("Browser connection was closed while running tests")) {
 					this.cancel();
 					this._promise?.resolve();

package/dist/locators/index.d.ts

@@ -278,6 +278,7 @@ interface SelectorEngine {
     queryAll: (root: SelectorRoot, selector: string | any) => Element[];
 }
 
+// we prefer using playwright locators because they are more powerful and support Shadow DOM
 declare const selectorEngine: Ivya;
 declare abstract class Locator {
 	abstract selector: string;

package/dist/providers.js

@@ -1,4 +1,4 @@
-import { W as WebdriverBrowserProvider, P as PlaywrightBrowserProvider } from './webdriver-D7k26Na7.js';
+import { W as WebdriverBrowserProvider, P as PlaywrightBrowserProvider } from './webdriver-B1QbgqhC.js';
 import '@vitest/mocker/node';
 import 'tinyrainbow';
 import 'vitest/node';
@@ -9,6 +9,7 @@ class PreviewBrowserProvider {
 	project;
 	open = false;
 	getSupportedBrowsers() {
+		// `none` is not restricted to certain browsers.
 		return [];
 	}
 	isOpen() {

package/dist/state.js

@@ -3,6 +3,7 @@
 
   /* @__NO_SIDE_EFFECTS__ */
   function getBrowserState() {
+  	// @ts-expect-error not typed global
   	return window.__vitest_browser_runner__;
   }
 
@@ -40,7 +41,9 @@
   	},
   	providedContext: {}
   };
+  // @ts-expect-error not typed global
   globalThis.__vitest_browser__ = true;
+  // @ts-expect-error not typed global
   globalThis.__vitest_worker__ = state;
   getBrowserState().cdp = createCdp();
   function rpc() {

package/dist/{webdriver-D7k26Na7.js → webdriver-B1QbgqhC.js}

@@ -59,6 +59,7 @@ class PlaywrightBrowserProvider {
 				headless: options.headless
 			};
 			if (this.project.config.inspector.enabled) {
+				// NodeJS equivalent defaults: https://nodejs.org/en/learn/getting-started/debugging#enable-inspector
 				const port = this.project.config.inspector.port || 9229;
 				const host = this.project.config.inspector.host || "127.0.0.1";
 				launchOptions.args ||= [];
@@ -66,6 +67,7 @@ class PlaywrightBrowserProvider {
 				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 = [];
@@ -90,15 +92,18 @@ class PlaywrightBrowserProvider {
 				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;
@@ -109,9 +114,12 @@ class PlaywrightBrowserProvider {
 			const ids = sessionIds.get(sessionId) || [];
 			ids.push(moduleUrl.href);
 			sessionIds.set(sessionId, ids);
-			idPreficates.set(moduleUrl.href, predicate);
+			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);
@@ -124,16 +132,19 @@ class PlaywrightBrowserProvider {
 							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) {
-						const url = module.type === "redirect" ? (() => {
-							const url = new URL(module.redirect);
-							return url.href.slice(url.origin.length);
-						})() : (() => {
-							const url = new URL(route.request().url());
-							url.searchParams.set("mock", module.type);
-							return url.href.slice(url.origin.length);
-						})();
+						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();
@@ -165,18 +176,20 @@ class PlaywrightBrowserProvider {
 			},
 			delete: async (sessionId, id) => {
 				const page = this.getPage(sessionId);
-				const predicate = idPreficates.get(id);
+				const key = predicateKey(sessionId, id);
+				const predicate = idPreficates.get(key);
 				if (predicate) {
-					await page.unroute(predicate).finally(() => idPreficates.delete(id));
+					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 predicate = idPreficates.get(id);
+					const key = predicateKey(sessionId, id);
+					const predicate = idPreficates.get(key);
 					if (predicate) {
-						return page.unroute(predicate).finally(() => idPreficates.delete(id));
+						return page.unroute(predicate).finally(() => idPreficates.delete(key));
 					}
 					return null;
 				});
@@ -359,6 +372,8 @@ class WebdriverBrowserProvider {
 	project;
 	options;
 	closing = false;
+	iframeSwitched = false;
+	topLevelContext;
 	getSupportedBrowsers() {
 		return webdriverBrowsers;
 	}
@@ -368,14 +383,19 @@ class WebdriverBrowserProvider {
 		this.browserName = browser;
 		this.options = options;
 	}
+	isIframeSwitched() {
+		return this.iframeSwitched;
+	}
 	async switchToTestFrame() {
 		const page = this.browser;
+		// support wdio@9
 		if (page.switchFrame) {
 			await page.switchFrame(page.$("iframe[data-vitest]"));
 		} else {
 			const iframe = await page.findElement("css selector", "iframe[data-vitest]");
 			await page.switchToFrame(iframe);
 		}
+		this.iframeSwitched = true;
 	}
 	async switchToMainFrame() {
 		const page = this.browser;
@@ -384,6 +404,20 @@ class WebdriverBrowserProvider {
 		} else {
 			await page.switchToParentFrame();
 		}
+		this.iframeSwitched = false;
+	}
+	async setViewport(options) {
+		if (this.topLevelContext == null || !this.browser) {
+			throw new Error(`The browser has no open pages.`);
+		}
+		await this.browser.send({
+			method: "browsingContext.setViewport",
+			params: {
+				context: this.topLevelContext,
+				devicePixelRatio: 1,
+				viewport: options
+			}
+		});
 	}
 	getCommandsContext() {
 		return { browser: this.browser };
@@ -407,6 +441,7 @@ class WebdriverBrowserProvider {
 			capabilities: this.buildCapabilities()
 		};
 		debug?.("[%s] opening the browser with options: %O", this.browserName, remoteOptions);
+		// TODO: close everything, if browser is closed from the outside
 		this.browser = await remote(remoteOptions);
 		await this._throwIfClosing();
 		return this.browser;
@@ -432,6 +467,7 @@ class WebdriverBrowserProvider {
 				args: newArgs
 			};
 		}
+		// start Vitest UI maximized only on supported browsers
 		if (options.ui && (browser === "chrome" || browser === "edge")) {
 			const key = browser === "chrome" ? "goog:chromeOptions" : "ms:edgeOptions";
 			const args = capabilities[key]?.args || [];
@@ -449,6 +485,7 @@ class WebdriverBrowserProvider {
 		const browserInstance = await this.openBrowser();
 		debug?.("[%s][%s] browser page is created, opening %s", sessionId, this.browserName, url);
 		await browserInstance.url(url);
+		this.topLevelContext = await browserInstance.getWindowHandle();
 		await this._throwIfClosing("opening the url");
 	}
 	async _throwIfClosing(action) {
@@ -462,6 +499,8 @@ class WebdriverBrowserProvider {
 		debug?.("[%s] closing provider", this.browserName);
 		this.closing = true;
 		await Promise.all([this.browser?.sessionId ? this.browser?.deleteSession?.() : null]);
+		// TODO: right now process can only exit with timeout, if we use browser
+		// needs investigating
 		process.exit();
 	}
 }