@vitest/browser 2.0.4 → 2.1.0-beta.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { CDPSession, BrowserServerState as BrowserServerState$1, BrowserServerStateContext, BrowserServer as BrowserServer$1, WorkspaceProject, Vite, BrowserProvider, BrowserScript, Vitest, ProcessPool } from 'vitest/node';
 import { Plugin } from 'vitest/config';
 import * as vitest from 'vitest';
-import { File, TaskResultPack, AfterSuiteRunMeta, CancelReason, UserConsoleLog, SnapshotResult, ResolvedConfig } from 'vitest';
+import { File, TaskResultPack, AfterSuiteRunMeta, CancelReason, UserConsoleLog, SnapshotResult, SerializedConfig } from 'vitest';
 import { ErrorWithDiff } from '@vitest/utils';
 import { StackTraceParserOptions } from '@vitest/utils/source-map';
 
@@ -38,6 +38,8 @@ interface WebSocketBrowserHandlers {
     debug: (...args: string[]) => void;
     resolveId: (id: string, importer?: string) => Promise<{
         id: string;
+        url: string;
+        optimized: boolean;
     } | null>;
     triggerCommand: <T>(contextId: string, command: string, testPath: string | undefined, payload: unknown[]) => Promise<T>;
     resolveMock: (id: string, importer: string, hasFactory: boolean) => Promise<{
@@ -103,7 +105,8 @@ declare class BrowserServer implements BrowserServer$1 {
     testerHtml: Promise<string> | string;
     orchestratorHtml: Promise<string> | string;
     injectorJs: Promise<string> | string;
-    errorCatcherPath: Promise<string> | string;
+    errorCatcherUrl: string;
+    locatorsUrl: string | undefined;
     stateJs: Promise<string> | string;
     state: BrowserServerState;
     provider: BrowserProvider;
@@ -111,7 +114,7 @@ declare class BrowserServer implements BrowserServer$1 {
     private stackTraceOptions;
     constructor(project: WorkspaceProject, base: string);
     setServer(server: Vite.ViteDevServer): void;
-    getSerializableConfig(): ResolvedConfig;
+    getSerializableConfig(): SerializedConfig;
     resolveTesterUrl(pathname: string): {
         contextId: string;
         testFile: string;

package/dist/index.js

@@ -525,6 +525,7 @@ function getDepsCacheDir(config) {
 
 const debug$1 = createDebugger("vitest:browser:api");
 const BROWSER_API_PATH = "/__vitest_browser_api__";
+const VALID_ID_PREFIX = "/@id/";
 function setupBrowserRpc(server) {
   const project = server.project;
   const vite = server.vite;
@@ -565,10 +566,14 @@ function setupBrowserRpc(server) {
     const rpc = createBirpc(
       {
         async onUnhandledError(error, type) {
+          if (error && typeof error === "object") {
+            const _error = error;
+            _error.stacks = server.parseErrorStacktrace(_error);
+          }
           ctx.state.catchError(error, type);
         },
         async onCollected(files) {
-          ctx.state.collectFiles(files);
+          ctx.state.collectFiles(project, files);
           await ctx.report("onCollected", files);
         },
         async onTaskUpdate(packs) {
@@ -617,14 +622,34 @@ function setupBrowserRpc(server) {
           ctx.cancelCurrentRun(reason);
         },
         async resolveId(id, importer) {
-          const result = await project.server.pluginContainer.resolveId(
+          const resolved = await vite.pluginContainer.resolveId(
             id,
             importer,
             {
               ssr: false
             }
           );
-          return result;
+          if (!resolved) {
+            return null;
+          }
+          const isOptimized = resolved.id.startsWith(withTrailingSlash(vite.config.cacheDir));
+          let url;
+          const root = vite.config.root;
+          if (resolved.id.startsWith(withTrailingSlash(root))) {
+            url = resolved.id.slice(root.length);
+          } else if (resolved.id !== "/@react-refresh" && isAbsolute(resolved.id) && existsSync(cleanUrl(resolved.id))) {
+            url = join("/@fs/", resolved.id);
+          } else {
+            url = resolved.id;
+          }
+          if (url[0] !== "." && url[0] !== "/") {
+            url = id.startsWith(VALID_ID_PREFIX) ? id : VALID_ID_PREFIX + id.replace("\0", "__x00__");
+          }
+          return {
+            id: resolved.id,
+            url,
+            optimized: isOptimized
+          };
         },
         debug(...args) {
           ctx.logger.console.debug(...args);
@@ -727,6 +752,12 @@ function stringifyReplace(key, value) {
     return value;
   }
 }
+function withTrailingSlash(path) {
+  if (path[path.length - 1] !== "/") {
+    return `${path}/`;
+  }
+  return path;
+}
 
 class BrowserServerState {
   orchestrators = /* @__PURE__ */ new Map();
@@ -867,7 +898,12 @@ class BrowserServer {
       resolve(distRoot, "client/esm-client-injector.js"),
       "utf8"
     ).then((js) => this.injectorJs = js);
-    this.errorCatcherPath = resolve(distRoot, "client/error-catcher.js");
+    this.errorCatcherUrl = join("/@fs/", resolve(distRoot, "client/error-catcher.js"));
+    const builtinProviders = ["playwright", "webdriverio", "preview"];
+    const providerName = project.config.browser.provider || "preview";
+    if (builtinProviders.includes(providerName)) {
+      this.locatorsUrl = join("/@fs/", distRoot, "locators", `${providerName}.js`);
+    }
     this.stateJs = readFile$1(
       resolve(distRoot, "state.js"),
       "utf-8"
@@ -881,7 +917,8 @@ class BrowserServer {
   testerHtml;
   orchestratorHtml;
   injectorJs;
-  errorCatcherPath;
+  errorCatcherUrl;
+  locatorsUrl;
   stateJs;
   state;
   provider;
@@ -998,7 +1035,7 @@ const click = async (context, selector, options = {}) => {
   const provider = context.provider;
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe;
-    await tester.locator(`css=${selector}`).click({
+    await tester.locator(selector).click({
       timeout: 1e3,
       ...options
     });
@@ -1013,7 +1050,7 @@ const dblClick = async (context, selector, options = {}) => {
   const provider = context.provider;
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe;
-    await tester.locator(`css=${selector}`).dblclick(options);
+    await tester.locator(selector).dblclick(options);
   } else if (provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser;
     await browser.$(selector).doubleClick();
@@ -1025,7 +1062,7 @@ const tripleClick = async (context, selector, options = {}) => {
   const provider = context.provider;
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe;
-    await tester.locator(`css=${selector}`).click({
+    await tester.locator(selector).click({
       timeout: 1e3,
       ...options,
       clickCount: 3
@@ -1050,28 +1087,6 @@ var clickableInputTypes;
     clickableInputTypes["radio"] = "radio";
 })(clickableInputTypes || (clickableInputTypes = {}));
 
-const ClipboardStubControl = Symbol('Manage ClipboardSub');
-function isClipboardStub(clipboard) {
-    return !!(clipboard === null || clipboard === void 0 ? void 0 : clipboard[ClipboardStubControl]);
-}
-function resetClipboardStubOnView(window) {
-    if (isClipboardStub(window.navigator.clipboard)) {
-        window.navigator.clipboard[ClipboardStubControl].resetClipboardStub();
-    }
-}
-function detachClipboardStubFromView(window) {
-    if (isClipboardStub(window.navigator.clipboard)) {
-        window.navigator.clipboard[ClipboardStubControl].detachClipboardStub();
-    }
-}
-const g = globalThis;
-/* istanbul ignore else */ if (typeof g.afterEach === 'function') {
-    g.afterEach(()=>resetClipboardStubOnView(globalThis.window));
-}
-/* istanbul ignore else */ if (typeof g.afterAll === 'function') {
-    g.afterAll(()=>detachClipboardStubFromView(globalThis.window));
-}
-
 var editableInputTypes;
 (function(editableInputTypes) {
     editableInputTypes["text"] = "text";
@@ -1402,7 +1417,7 @@ var DOM_KEY_LOCATION;
     }
 ];
 
-const keyboard = async (context, text) => {
+const keyboard = async (context, text, state) => {
   function focusIframe() {
     if (!document.activeElement || document.activeElement.ownerDocument !== document || document.activeElement === document.body) {
       window.focus();
@@ -1414,7 +1429,9 @@ const keyboard = async (context, text) => {
   } else if (context.provider instanceof WebdriverBrowserProvider) {
     await context.browser.execute(focusIframe);
   }
+  const pressed = new Set(state.unreleased);
   await keyboardImplementation(
+    pressed,
     context.provider,
     context.contextId,
     text,
@@ -1436,9 +1453,11 @@ const keyboard = async (context, text) => {
     },
     true
   );
+  return {
+    unreleased: Array.from(pressed)
+  };
 };
-async function keyboardImplementation(provider, contextId, text, selectAll, skipRelease) {
-  const pressed = /* @__PURE__ */ new Set();
+async function keyboardImplementation(pressed, provider, contextId, text, selectAll, skipRelease) {
   if (provider instanceof PlaywrightBrowserProvider) {
     const page = provider.getPage(contextId);
     const actions = parseKeyDef(defaultKeyMap, text);
@@ -1501,7 +1520,8 @@ async function keyboardImplementation(provider, contextId, text, selectAll, skip
         }
       }
     }
-    await keyboard2.perform(skipRelease);
+    const allRelease = keyboard2.toJSON().actions.every((action) => action.type === "keyUp");
+    await keyboard2.perform(allRelease ? false : skipRelease);
   }
   return {
     pressed
@@ -1510,13 +1530,15 @@ async function keyboardImplementation(provider, contextId, text, selectAll, skip
 
 const type = async (context, selector, text, options = {}) => {
   const { skipClick = false, skipAutoClose = false } = options;
+  const unreleased = new Set(Reflect.get(options, "unreleased") ?? []);
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context;
-    const element = iframe.locator(`css=${selector}`);
+    const element = iframe.locator(selector);
     if (!skipClick) {
       await element.focus();
     }
     await keyboardImplementation(
+      unreleased,
       context.provider,
       context.contextId,
       text,
@@ -1530,6 +1552,7 @@ const type = async (context, selector, text, options = {}) => {
       await element.click();
     }
     await keyboardImplementation(
+      unreleased,
       context.provider,
       context.contextId,
       text,
@@ -1544,12 +1567,15 @@ const type = async (context, selector, text, options = {}) => {
   } else {
     throw new TypeError(`Provider "${context.provider.name}" does not support typing`);
   }
+  return {
+    unreleased: Array.from(unreleased)
+  };
 };
 
 const clear = async (context, selector) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context;
-    const element = iframe.locator(`css=${selector}`);
+    const element = iframe.locator(selector);
     await element.clear({
       timeout: 1e3
     });
@@ -1565,7 +1591,7 @@ const clear = async (context, selector) => {
 const fill = async (context, selector, text, options = {}) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context;
-    const element = iframe.locator(`css=${selector}`);
+    const element = iframe.locator(selector);
     await element.fill(text, { timeout: 1e3, ...options });
   } else if (context.provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser;
@@ -1579,12 +1605,12 @@ const selectOptions = async (context, selector, userValues, options = {}) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const value = userValues;
     const { iframe } = context;
-    const selectElement = iframe.locator(`css=${selector}`);
+    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(`css=${v.element}`).elementHandle();
+      const elementHandler = await iframe.locator(v.element).elementHandle();
       if (!elementHandler) {
         throw new Error(`Element not found: ${v.element}`);
       }
@@ -1627,22 +1653,23 @@ const tab = async (context, options = {}) => {
   throw new Error(`Provider "${provider.name}" doesn't support tab command`);
 };
 
-const dragAndDrop = async (context, source, target, options) => {
+const dragAndDrop = async (context, source, target, options_) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const frame = await context.frame();
     await frame.dragAndDrop(
-      `css=${source}`,
-      `css=${target}`,
+      source,
+      target,
       {
         timeout: 1e3,
-        ...options
+        ...options_
       }
     );
   } else if (context.provider instanceof WebdriverBrowserProvider) {
     const $source = context.browser.$(source);
     const $target = context.browser.$(target);
-    const duration = options?.duration ?? 10;
-    await context.browser.action("pointer").move({ duration: 0, origin: $source, x: 0, y: 0 }).down({ button: 0 }).move({ duration: 0, origin: "pointer", x: 0, y: 0 }).pause(duration).move({ duration: 0, origin: $target, x: 0, y: 0 }).move({ duration: 0, origin: "pointer", x: 1, y: 0 }).move({ duration: 0, origin: "pointer", x: -1, y: 0 }).up({ button: 0 }).perform();
+    const options = options_ || {};
+    const duration = options.duration ?? 10;
+    await context.browser.action("pointer").move({ duration: 0, origin: $source, x: options.sourceX ?? 0, y: options.sourceY ?? 0 }).down({ button: 0 }).move({ duration: 0, origin: "pointer", x: 0, y: 0 }).pause(duration).move({ duration: 0, origin: $target, x: options.targetX ?? 0, y: options.targetY ?? 0 }).move({ duration: 0, origin: "pointer", x: 1, y: 0 }).move({ duration: 0, origin: "pointer", x: -1, y: 0 }).up({ button: 0 }).perform();
   } else {
     throw new TypeError(`Provider "${context.provider.name}" does not support dragging elements`);
   }
@@ -1650,7 +1677,7 @@ const dragAndDrop = async (context, source, target, options) => {
 
 const hover = async (context, selector, options = {}) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
-    await context.iframe.locator(`css=${selector}`).hover({
+    await context.iframe.locator(selector).hover({
       timeout: 1e3,
       ...options
     });
@@ -1696,7 +1723,7 @@ const screenshot = async (context, name, options = {}) => {
   if (!context.testPath) {
     throw new Error(`Cannot take a screenshot without a test path`);
   }
-  const path = resolveScreenshotPath(
+  const path = options.path ? resolve(context.testPath, options.path) : resolveScreenshotPath(
     context.testPath,
     name,
     context.project.config
@@ -1705,8 +1732,8 @@ const screenshot = async (context, name, options = {}) => {
   await mkdir(dirname(path), { recursive: true });
   if (context.provider instanceof PlaywrightBrowserProvider) {
     if (options.element) {
-      const { element: css, ...config } = options;
-      const element = context.iframe.locator(`css=${css}`);
+      const { element: selector, ...config } = options;
+      const element = context.iframe.locator(`${selector}`);
       const buffer2 = await element.screenshot({
         timeout: 1e3,
         ...config,
@@ -1830,7 +1857,8 @@ export const server = {
   browser: ${JSON.stringify(server.project.config.browser.name)},
   commands: {
     ${commandsCode}
-  }
+  },
+  config: __vitest_browser_runner__.config,
 }
 export const commands = server.commands
 export const userEvent = ${getUserEvent(provider)}
@@ -1842,10 +1870,17 @@ function getUserEvent(provider) {
     return "__userEvent_CDP__";
   }
   return `{
-  ...__vitest_user_event__,
-  fill: async (element, text) => {
-    await __vitest_user_event__.clear(element)
-    await __vitest_user_event__.type(element, text)
+  ..._userEventSetup,
+  setup() {
+    const userEvent = __vitest_user_event__.setup()
+    userEvent.setup = this.setup
+    userEvent.fill = this.fill.bind(userEvent)
+    userEvent.dragAndDrop = this.dragAndDrop
+    return userEvent
+  },
+  async fill(element, text) {
+    await this.clear(element)
+    await this.type(element, text)
   },
   dragAndDrop: async () => {
     throw new Error('Provider "preview" does not support dragging elements')
@@ -1862,7 +1897,9 @@ async function getUserEventImport(provider, resolve2) {
   }
   return `import { userEvent as __vitest_user_event__ } from '${slash(
     `/@fs/${resolved.id}`
-  )}'`;
+  )}'
+const _userEventSetup = __vitest_user_event__.setup()
+`;
 }
 
 function injectDynamicImport(code, id, parse) {
@@ -1920,11 +1957,10 @@ async function resolveOrchestrator(server, url, res) {
     contextId = contexts[contexts.length - 1] ?? "none";
   }
   const files = server.state.getContext(contextId)?.files ?? [];
-  const config = server.getSerializableConfig();
   const injectorJs = typeof server.injectorJs === "string" ? server.injectorJs : await server.injectorJs;
   const injector = replacer(injectorJs, {
     __VITEST_PROVIDER__: JSON.stringify(server.provider.name),
-    __VITEST_CONFIG__: JSON.stringify(config),
+    __VITEST_CONFIG__: JSON.stringify(server.getSerializableConfig()),
     __VITEST_VITE_CONFIG__: JSON.stringify({
       root: server.vite.config.root
     }),
@@ -1960,7 +1996,7 @@ async function resolveOrchestrator(server, url, res) {
     __VITEST_TITLE__: "Vitest Browser Runner",
     __VITEST_SCRIPTS__: server.orchestratorScripts,
     __VITEST_INJECTOR__: `<script type="module">${injector}<\/script>`,
-    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherPath}"><\/script>`,
+    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherUrl}"><\/script>`,
     __VITEST_CONTEXT_ID__: JSON.stringify(contextId)
   });
 }
@@ -1983,10 +2019,9 @@ async function resolveTester(server, url, res) {
   const files = context?.files ?? [];
   const method = context?.method ?? "run";
   const injectorJs = typeof server.injectorJs === "string" ? server.injectorJs : await server.injectorJs;
-  const config = server.getSerializableConfig();
   const injector = replacer(injectorJs, {
     __VITEST_PROVIDER__: JSON.stringify(server.provider.name),
-    __VITEST_CONFIG__: JSON.stringify(config),
+    __VITEST_CONFIG__: JSON.stringify(server.getSerializableConfig()),
     __VITEST_FILES__: JSON.stringify(files),
     __VITEST_VITE_CONFIG__: JSON.stringify({
       root: server.vite.config.root
@@ -2000,7 +2035,7 @@ async function resolveTester(server, url, res) {
     const testerScripts = await server.formatScripts(
       project.config.browser.testerScripts
     );
-    const clientScript = `<script type="module" src="${config.base || "/"}@vite/client"><\/script>`;
+    const clientScript = `<script type="module" src="${server.project.config.base || "/"}@vite/client"><\/script>`;
     const stateJs = typeof server.stateJs === "string" ? server.stateJs : await server.stateJs;
     const stateScript = `<script type="module">${stateJs}<\/script>`;
     server.testerScripts = `${stateScript}${clientScript}${testerScripts}`;
@@ -2011,7 +2046,10 @@ async function resolveTester(server, url, res) {
     __VITEST_TITLE__: "Vitest Browser Tester",
     __VITEST_SCRIPTS__: server.testerScripts,
     __VITEST_INJECTOR__: `<script type="module">${injector}<\/script>`,
-    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherPath}"><\/script>`,
+    __VITEST_INTERNAL_SCRIPTS__: [
+      `<script type="module" src="${server.errorCatcherUrl}"><\/script>`,
+      server.locatorsUrl ? `<script type="module" src="${server.locatorsUrl}"><\/script>` : ""
+    ].join("\n"),
     __VITEST_APPEND__: `<script type="module">
 __vitest_browser_runner__.runningFiles = ${tests}
 __vitest_browser_runner__.iframeId = ${iframeId}