@vitest/browser 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/client/__vitest_browser__/utils-Nd8hqrhP.js

@@ -0,0 +1,189 @@
+(function polyfill() {
+  const relList = document.createElement("link").relList;
+  if (relList && relList.supports && relList.supports("modulepreload")) return;
+  for (const link of document.querySelectorAll('link[rel="modulepreload"]')) processPreload(link);
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList") continue;
+      for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node);
+    }
+  }).observe(document, {
+    childList: true,
+    subtree: true
+  });
+  function getFetchOpts(link) {
+    const fetchOpts = {};
+    if (link.integrity) fetchOpts.integrity = link.integrity;
+    if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
+    if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include";
+    else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
+    else fetchOpts.credentials = "same-origin";
+    return fetchOpts;
+  }
+  function processPreload(link) {
+    if (link.ep) return;
+    link.ep = true;
+    const fetchOpts = getFetchOpts(link);
+    fetch(link.href, fetchOpts);
+  }
+})();
+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 _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+const _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
+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("/");
+};
+async function importId(id) {
+  const name = `/@id/${id}`.replace(/\\/g, "/");
+  return (/* @__PURE__ */ getBrowserState()).wrapModule(() => import(
+    /* @vite-ignore */
+    name
+  ));
+}
+async function importFs(id) {
+  const name = `/@fs/${id}`.replace(/\\/g, "/");
+  return (/* @__PURE__ */ getBrowserState()).wrapModule(() => import(
+    /* @vite-ignore */
+    name
+  ));
+}
+const moduleRunner = {
+  isBrowser: true,
+  import: (id) => {
+    if (id[0] === "/" || id[1] === ":") {
+      return importFs(id);
+    }
+    return importId(id);
+  }
+};
+const now = globalThis.performance ? globalThis.performance.now.bind(globalThis.performance) : Date.now;
+function getConfig() {
+  return (/* @__PURE__ */ getBrowserState()).config;
+}
+// @__NO_SIDE_EFFECTS__
+function getBrowserState() {
+  return window.__vitest_browser_runner__;
+}
+// @__NO_SIDE_EFFECTS__
+function getWorkerState() {
+  const state = window.__vitest_worker__;
+  if (!state) {
+    throw new Error("Worker state is not found. This is an issue with Vitest. Please, open an issue.");
+  }
+  return state;
+}
+export {
+  getConfig as a,
+  resolve as b,
+  getWorkerState as c,
+  getBrowserState as g,
+  moduleRunner as m,
+  now as n,
+  relative as r
+};

package/dist/client/orchestrator.html

@@ -26,8 +26,8 @@
     {__VITEST_INJECTOR__}
     {__VITEST_ERROR_CATCHER__}
     {__VITEST_SCRIPTS__}
-    <script type="module" crossorigin src="/__vitest_browser__/orchestrator-pTEf6o0n.js"></script>
-    <link rel="modulepreload" crossorigin href="/__vitest_browser__/utils-BYUpz6v6.js">
+    <script type="module" crossorigin src="/__vitest_browser__/orchestrator-BfoS0x4w.js"></script>
+    <link rel="modulepreload" crossorigin href="/__vitest_browser__/utils-Nd8hqrhP.js">
   </head>
   <body>
     <div id="vitest-tester"></div>

package/dist/client/tester/locators.d.ts

@@ -0,0 +1,69 @@
+import type { LocatorByRoleOptions, LocatorOptions, LocatorScreenshotOptions, MarkOptions, SelectorOptions, UserEventClearOptions, UserEventClickOptions, UserEventDragAndDropOptions, UserEventFillOptions, UserEventHoverOptions, UserEventSelectOptions, UserEventUploadOptions, UserEventWheelOptions } from "vitest/browser";
+import { Ivya } from "ivya";
+export { ensureAwaited } from "../utils.js";
+export { convertElementToCssSelector, getIframeScale, processTimeoutOptions } from "./tester-utils.js";
+export { getByAltTextSelector, getByLabelSelector, getByPlaceholderSelector, getByRoleSelector, getByTestIdSelector, getByTextSelector, getByTitleSelector } from "ivya";
+export declare const selectorEngine: Ivya;
+export declare abstract class Locator {
+	abstract selector: string;
+	private _parsedSelector;
+	protected _container?: Element | undefined;
+	protected _pwSelector?: string | undefined;
+	protected _pwLocator?: string | undefined;
+	protected _errorSource?: Error;
+	constructor();
+	click(options?: UserEventClickOptions): Promise<void>;
+	dblClick(options?: UserEventClickOptions): Promise<void>;
+	tripleClick(options?: UserEventClickOptions): Promise<void>;
+	wheel(options: UserEventWheelOptions): Promise<void>;
+	clear(options?: UserEventClearOptions): Promise<void>;
+	hover(options?: UserEventHoverOptions): Promise<void>;
+	unhover(options?: UserEventHoverOptions): Promise<void>;
+	fill(text: string, options?: UserEventFillOptions): Promise<void>;
+	upload(files: string | string[] | File | File[], options?: UserEventUploadOptions): Promise<void>;
+	dropTo(target: Locator, options?: UserEventDragAndDropOptions): Promise<void>;
+	selectOptions(value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[], options?: UserEventSelectOptions): Promise<void>;
+	screenshot(options: Omit<LocatorScreenshotOptions, "base64"> & {
+		base64: true;
+	}): Promise<{
+		path: string;
+		base64: string;
+	}>;
+	screenshot(options?: LocatorScreenshotOptions): Promise<string>;
+	mark(name: string, options?: MarkOptions): Promise<void>;
+	protected abstract locator(selector: string): Locator;
+	protected abstract elementLocator(element: Element): Locator;
+	getByRole(role: string, options?: LocatorByRoleOptions): Locator;
+	getByAltText(text: string | RegExp, options?: LocatorOptions): Locator;
+	getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator;
+	getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator;
+	getByTestId(testId: string | RegExp): Locator;
+	getByText(text: string | RegExp, options?: LocatorOptions): Locator;
+	getByTitle(title: string | RegExp, options?: LocatorOptions): Locator;
+	filter(filter: LocatorOptions): Locator;
+	and(locator: Locator): Locator;
+	or(locator: Locator): Locator;
+	query(): HTMLElement | SVGElement | null;
+	element(): HTMLElement | SVGElement;
+	elements(): (HTMLElement | SVGElement)[];
+	get length(): number;
+	all(): Locator[];
+	nth(index: number): Locator;
+	first(): Locator;
+	last(): Locator;
+	toString(): string;
+	serialize(): SerializedLocator;
+	asLocator(): string;
+	toJSON(): SerializedLocator;
+	findElement(options_?: SelectorOptions): Promise<HTMLElement | SVGElement>;
+	protected triggerCommand<T>(command: string, ...args: any[]): Promise<T>;
+}
+export declare function triggerCommandWithTrace<T>(options: {
+	name: string;
+	arguments: unknown[];
+	errorSource?: Error | undefined;
+}): Promise<T>;
+export interface SerializedLocator {
+	selector: string;
+	locator: string;
+}

package/dist/client/tester/tester.html

@@ -5,8 +5,8 @@
     <link rel="icon" href="{__VITEST_FAVICON__}" type="image/svg+xml">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vitest Browser Tester</title>
-    <script type="module" crossorigin src="/__vitest_browser__/tester-CIKiUsoz.js"></script>
-    <link rel="modulepreload" crossorigin href="/__vitest_browser__/utils-BYUpz6v6.js">
+    <script type="module" crossorigin src="/__vitest_browser__/tester-BJtW9QqZ.js"></script>
+    <link rel="modulepreload" crossorigin href="/__vitest_browser__/utils-Nd8hqrhP.js">
   </head>
   <body>
   </body>

package/dist/client/tester/trace.d.ts

@@ -1,4 +1,5 @@
 import type { Task } from "@vitest/runner";
+import type { SerializedLocator } from "./locators.js";
 export interface BrowserTraceData {
 	retry: number;
 	repeats: number;
@@ -20,7 +21,7 @@ export interface BrowserTraceEntry {
 		line: number;
 		column: number;
 	};
-	selector?: string;
+	element?: SerializedLocator;
 	snapshot: TraceSnapshot;
 }
 interface TraceSnapshot {

package/dist/context.js

@@ -74,19 +74,9 @@ function getTraceStateKey(testId, repeats, retry) {
 }
 // TODO: should we avoid accumulating? send and immediately clear each entry to save memory?
 function recordBrowserTraceEntry(task, options) {
-	// TODO: trace-view currently receives selectors after locator/action resolution,
-	// so provider-specific lowered selectors can leak into snapshot lookup. Preserve
-	// the original locator selector, or record the target node id before lowering.
-	// for example, this causes shadow dom selectors to fail with `>>>` marker.
-	// For now, remove trivial `html >` prefix generated by convertElementToCssSelector.
-	// this is also necessary to `engine.querySelector + document.documentElement`
-	// to find an element on webdriverio
-	if (options.selector?.startsWith("html >")) {
-		options.selector = options.selector.slice(6);
-	}
 	const attemptInfo = getBrowserState().browserTraceAttempts.get(task.id);
 	const relativeStartTime = (options.startTime ?? now()) - attemptInfo.startTime;
-	const snapshot = takeSnapshot(options.selector);
+	const snapshot = takeSnapshot(options.element);
 	const entry = {
 		...options,
 		startTime: relativeStartTime,
@@ -110,7 +100,7 @@ function recordBrowserTraceEntry(task, options) {
 // selector engine inside the snapshot iframe at view time via injected script.
 // Our approach resolves at collection time (same moment as snapshot) — simpler but
 // requires Mirror plumbing. nodeId-based lookup also works across shadow DOM, unlike querySelector.
-function takeSnapshot(selector) {
+function takeSnapshot(serializedLocator) {
 	const { snapshot, createMirror } = getBrowserState().browserTraceDomSnapshot;
 	const traceView = getBrowserState().config.browser.traceView;
 	const engine = getBrowserState().selectorEngine;
@@ -137,9 +127,9 @@ function takeSnapshot(selector) {
 		const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1);
 		result.pseudoClassIds[className] = ids;
 	}
-	if (selector) {
+	if (serializedLocator) {
 		try {
-			const el = engine.querySelector(engine.parseSelector(selector), document.documentElement, false);
+			const el = engine.querySelector(engine.parseSelector(serializedLocator._pwSelector ?? serializedLocator.selector), document.documentElement, false);
 			if (!el) {
 				result.selectorResolution = "missing";
 			} else {
@@ -262,19 +252,28 @@ function processTimeoutOptions(options_) {
 }
 const provider$1 = getBrowserState().provider;
 const kElementLocator = Symbol.for("$$vitest:locator-resolved");
-async function convertToSelector(elementOrLocator, options) {
+async function serializeElement(elementOrLocator, options) {
 	if (!elementOrLocator) {
 		throw new Error("Expected element or locator to be defined.");
 	}
 	if (elementOrLocator instanceof Element) {
-		return convertElementToCssSelector(elementOrLocator);
+		const selector = convertElementToCssSelector(elementOrLocator);
+		return {
+			selector,
+			locator: __INTERNAL._asLocator("javascript", selector)
+		};
 	}
 	if (isLocator(elementOrLocator)) {
 		if (provider$1 === "playwright" || kElementLocator in elementOrLocator) {
-			return elementOrLocator.selector;
+			return elementOrLocator.serialize();
 		}
 		const element = await elementOrLocator.findElement(options);
-		return convertElementToCssSelector(element);
+		const selector = convertElementToCssSelector(element);
+		const locator = __INTERNAL._asLocator("javascript", selector);
+		return {
+			selector,
+			locator
+		};
 	}
 	throw new Error("Expected element or locator to be an instance of Element or Locator.");
 }
@@ -380,9 +379,9 @@ function createUserEvent(__tl_user_event_base__, options) {
 		},
 		type(element, text, options) {
 			return ensureAwaited(async (error) => {
-				const selector = await convertToSelector(element, options);
+				const serializedElement = await serializeElement(element, options);
 				const { unreleased } = await triggerCommand("__vitest_type", [
-					selector,
+					serializedElement,
 					text,
 					{
 						...options,
@@ -566,7 +565,7 @@ const page = {
 		screenshotIds[repeatCount] ??= {};
 		screenshotIds[repeatCount][taskName] = number + 1;
 		const name = options.path || `${taskName.replace(/[^a-z0-9]/gi, "-")}-${number}.png`;
-		const [element, ...mask] = await Promise.all([options.element ? convertToSelector(options.element, options) : undefined, ..."mask" in options ? options.mask.map((el) => convertToSelector(el, options)) : []]);
+		const [element, ...mask] = await Promise.all([options.element ? serializeElement(options.element, options) : undefined, ..."mask" in options ? options.mask.map((el) => serializeElement(el, options)) : []]);
 		const normalizedOptions = "mask" in options ? {
 			...options,
 			mask
@@ -754,7 +753,7 @@ function prettyDOM(dom, maxLength = Number(defaultOptions?.maxLength ?? import.m
 	return dom.outerHTML.length > maxLength ? `${pretty.slice(0, maxLength)}...` : pretty;
 }
 function getElementError(selector, container) {
-	const error = new Error(`Cannot find element with locator: ${__INTERNAL._asLocator("javascript", selector)}\n\n${prettyDOM(container)}`);
+	const error = new Error(`Cannot find element with locator: ${typeof selector === "string" ? __INTERNAL._asLocator("javascript", selector) : selector.asLocator()}\n\n${prettyDOM(container)}`);
 	error.name = "VitestBrowserElementError";
 	return error;
 }