@vitest/browser 2.1.0-beta.3 → 2.1.0-beta.5

package/dist/{index-BHH2eSIh.js → public-utils-D6S2-5kI.js}

@@ -1,4 +1,5 @@
-import { server, page } from '@vitest/browser/context';
+import { page } from '@vitest/browser/context';
+import { stringify } from 'vitest/utils';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -5510,213 +5511,53 @@ function getByRoleSelector(role, options = {}) {
   return `internal:role=${role}${props.map(([n, v]) => `[${n}=${v}]`).join("")}`;
 }
 
-// @__NO_SIDE_EFFECTS__
-function getBrowserState() {
-  return window.__vitest_browser_runner__;
+function getElementLocatorSelectors(element) {
+  const locator = page.elementLocator(element);
+  return {
+    getByAltText: (altText, options) => locator.getByAltText(altText, options),
+    getByLabelText: (labelText, options) => locator.getByLabelText(labelText, options),
+    getByPlaceholder: (placeholderText, options) => locator.getByPlaceholder(placeholderText, options),
+    getByRole: (role, options) => locator.getByRole(role, options),
+    getByTestId: (testId) => locator.getByTestId(testId),
+    getByText: (text, options) => locator.getByText(text, options),
+    getByTitle: (title, options) => locator.getByTitle(title, options)
+  };
 }
-// @__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.");
+function debug(el, maxLength, options) {
+  if (Array.isArray(el)) {
+    el.forEach((e) => console.log(prettyDOM(e, maxLength, options)));
+  } else {
+    console.log(prettyDOM(el, maxLength, options));
   }
-  return state;
 }
-// @__NO_SIDE_EFFECTS__
-function convertElementToCssSelector(element) {
-  if (!element || !(element instanceof Element)) {
-    throw new Error(
-      `Expected DOM element to be an instance of Element, received ${typeof element}`
-    );
+function prettyDOM(dom, maxLength = Number(import.meta.env.DEBUG_PRINT_LIMIT ?? 7e3), prettyFormatOptions = {}) {
+  if (maxLength === 0) {
+    return "";
   }
-  return getUniqueCssSelector(element);
-}
-function escapeIdForCSSSelector(id) {
-  return id.split("").map((char) => {
-    const code = char.charCodeAt(0);
-    if (char === " " || char === "#" || char === "." || char === ":" || char === "[" || char === "]" || char === ">" || char === "+" || char === "~" || char === "\\") {
-      return `\\${char}`;
-    } else if (code >= 65536) {
-      return `\\${code.toString(16).toUpperCase().padStart(6, "0")} `;
-    } else if (code < 32 || code === 127) {
-      return `\\${code.toString(16).toUpperCase().padStart(2, "0")} `;
-    } else if (code >= 128) {
-      return `\\${code.toString(16).toUpperCase().padStart(2, "0")} `;
-    } else {
-      return char;
-    }
-  }).join("");
-}
-function getUniqueCssSelector(el) {
-  const path = [];
-  let parent;
-  let hasShadowRoot = false;
-  while (parent = getParent(el)) {
-    if (parent.shadowRoot) {
-      hasShadowRoot = true;
-    }
-    const tag = el.tagName;
-    if (el.id) {
-      path.push(`#${escapeIdForCSSSelector(el.id)}`);
-    } else if (!el.nextElementSibling && !el.previousElementSibling) {
-      path.push(tag.toLowerCase());
-    } else {
-      let index = 0;
-      let sameTagSiblings = 0;
-      let elementIndex = 0;
-      for (const sibling of parent.children) {
-        index++;
-        if (sibling.tagName === tag) {
-          sameTagSiblings++;
-        }
-        if (sibling === el) {
-          elementIndex = index;
-        }
-      }
-      if (sameTagSiblings > 1) {
-        path.push(`${tag.toLowerCase()}:nth-child(${elementIndex})`);
-      } else {
-        path.push(tag.toLowerCase());
-      }
-    }
-    el = parent;
+  if (!dom) {
+    dom = document.body;
   }
-  return `${(/* @__PURE__ */ getBrowserState()).provider === "webdriverio" && hasShadowRoot ? ">>>" : ""}${path.reverse().join(" > ")}`;
-}
-function getParent(el) {
-  const parent = el.parentNode;
-  if (parent instanceof ShadowRoot) {
-    return parent.host;
+  if ("element" in dom && "all" in dom) {
+    dom = dom.element();
   }
-  return parent;
+  const type = typeof dom;
+  if (type !== "object" || !dom.outerHTML) {
+    const typeName = type === "object" ? dom.constructor.name : type;
+    throw new TypeError(`Expecting a valid DOM element, but got ${typeName}.`);
+  }
+  const pretty = stringify(dom, Number.POSITIVE_INFINITY, {
+    maxLength,
+    highlight: true,
+    ...prettyFormatOptions
+  });
+  return dom.outerHTML.length > maxLength ? `${pretty.slice(0, maxLength)}...` : pretty;
 }
+function getElementError(selector, container) {
+  const error = new Error(`Cannot find element with locator: ${asLocator("javascript", selector)}
 
-const selectorEngine = Ivya.create({
-  browser: ((name) => {
-    switch (name) {
-      case "edge":
-      case "chrome":
-        return "chromium";
-      case "safari":
-        return "webkit";
-      default:
-        return name;
-    }
-  })(server.config.browser.name),
-  testIdAttribute: server.config.browser.locators.testIdAttribute
-});
-class Locator {
-  _parsedSelector;
-  _pwSelector;
-  _forceElement;
-  click(options = {}) {
-    return this.triggerCommand("__vitest_click", this.selector, options);
-  }
-  dblClick(options = {}) {
-    return this.triggerCommand("__vitest_dblClick", this.selector, options);
-  }
-  tripleClick(options = {}) {
-    return this.triggerCommand("__vitest_tripleClick", this.selector, options);
-  }
-  clear() {
-    return this.triggerCommand("__vitest_clear", this.selector);
-  }
-  hover(options) {
-    return this.triggerCommand("__vitest_hover", this.selector, options);
-  }
-  unhover(options) {
-    return this.triggerCommand("__vitest_hover", "html > body", options);
-  }
-  fill(text, options) {
-    return this.triggerCommand("__vitest_fill", this.selector, text, options);
-  }
-  dropTo(target, options = {}) {
-    return this.triggerCommand(
-      "__vitest_dragAndDrop",
-      this.selector,
-      target.selector,
-      options
-    );
-  }
-  selectOptions(value) {
-    const values = (Array.isArray(value) ? value : [value]).map((v) => {
-      if (typeof v !== "string") {
-        const selector = "element" in v ? v.selector : selectorEngine.generateSelectorSimple(v);
-        return { element: selector };
-      }
-      return v;
-    });
-    return this.triggerCommand("__vitest_selectOptions", this.selector, values);
-  }
-  screenshot(options) {
-    return page.screenshot({
-      ...options,
-      element: this
-    });
-  }
-  getByRole(role, options) {
-    return this.locator(getByRoleSelector(role, options));
-  }
-  getByAltText(text, options) {
-    return this.locator(getByAltTextSelector(text, options));
-  }
-  getByLabelText(text, options) {
-    return this.locator(getByLabelSelector(text, options));
-  }
-  getByPlaceholder(text, options) {
-    return this.locator(getByPlaceholderSelector(text, options));
-  }
-  getByTestId(testId) {
-    return this.locator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId));
-  }
-  getByText(text, options) {
-    return this.locator(getByTextSelector(text, options));
-  }
-  getByTitle(title, options) {
-    return this.locator(getByTitleSelector(title, options));
-  }
-  query() {
-    if (this._forceElement) {
-      return this._forceElement;
-    }
-    const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector));
-    return selectorEngine.querySelector(parsedSelector, document.documentElement, true);
-  }
-  element() {
-    const element = this.query();
-    if (!element) {
-      throw new Error(`element not found: ${asLocator("javascript", this._pwSelector || this.selector)}`);
-    }
-    return element;
-  }
-  elements() {
-    if (this._forceElement) {
-      return [this._forceElement];
-    }
-    const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector));
-    return selectorEngine.querySelectorAll(parsedSelector, document.documentElement);
-  }
-  all() {
-    return this.elements().map((element) => this.elementLocator(element));
-  }
-  get state() {
-    return getBrowserState();
-  }
-  get worker() {
-    return getWorkerState();
-  }
-  get rpc() {
-    return this.worker.rpc;
-  }
-  triggerCommand(command, ...args) {
-    const filepath = this.worker.filepath || this.worker.current?.file?.filepath || void 0;
-    return this.rpc.triggerCommand(
-      this.state.contextId,
-      command,
-      filepath,
-      args
-    );
-  }
+${prettyDOM(container)}`);
+  error.name = "VitestBrowserElementError";
+  return error;
 }
 
-export { Locator as L, getByRoleSelector as a, getByTestIdSelector as b, getByAltTextSelector as c, getByPlaceholderSelector as d, getByTextSelector as e, getByTitleSelector as f, getByLabelSelector as g, convertElementToCssSelector as h, selectorEngine as s };
+export { Ivya as I, getByRoleSelector as a, getByTestIdSelector as b, getByAltTextSelector as c, getByPlaceholderSelector as d, getByTextSelector as e, getByTitleSelector as f, getByLabelSelector as g, getElementError as h, getElementLocatorSelectors as i, debug as j, prettyDOM as p };

package/dist/utils.js

@@ -0,0 +1,3 @@
+import '@vitest/browser/context';
+import 'vitest/utils';
+export { j as debug, h as getElementError, i as getElementLocatorSelectors, p as prettyDOM } from './public-utils-D6S2-5kI.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.5",
   "description": "Browser running for Vitest",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -44,6 +44,10 @@
       "types": "./dist/locators/index.d.ts",
       "default": "./dist/locators/index.js"
     },
+    "./utils": {
+      "types": "./utils.d.ts",
+      "default": "./dist/utils.js"
+    },
     "./*": "./*"
   },
   "main": "./dist/index.js",
@@ -58,7 +62,7 @@
   "peerDependencies": {
     "playwright": "*",
     "webdriverio": "*",
-    "vitest": "2.1.0-beta.3"
+    "vitest": "2.1.0-beta.5"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -78,7 +82,7 @@
     "msw": "^2.3.5",
     "sirv": "^2.0.4",
     "ws": "^8.18.0",
-    "@vitest/utils": "2.1.0-beta.3"
+    "@vitest/utils": "2.1.0-beta.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
@@ -93,10 +97,10 @@
     "playwright-core": "^1.45.3",
     "safaridriver": "^0.1.2",
     "webdriverio": "^8.39.1",
-    "@vitest/runner": "2.1.0-beta.3",
-    "@vitest/ui": "2.1.0-beta.3",
-    "@vitest/ws-client": "2.1.0-beta.3",
-    "vitest": "2.1.0-beta.3"
+    "@vitest/runner": "2.1.0-beta.5",
+    "@vitest/ui": "2.1.0-beta.5",
+    "@vitest/ws-client": "2.1.0-beta.5",
+    "vitest": "2.1.0-beta.5"
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:node && pnpm build:client",

package/utils.d.ts

@@ -0,0 +1,21 @@
+// should be in sync with tester/public-utils.ts
+// we cannot bundle it because vitest depend on the @vitest/browser and vise versa
+// fortunately, the file is quite small
+
+import { LocatorSelectors } from '@vitest/browser/context'
+import { StringifyOptions } from 'vitest/utils'
+
+export type PrettyDOMOptions = Omit<StringifyOptions, 'maxLength'>
+
+export declare function getElementLocatorSelectors(element: Element): LocatorSelectors
+export declare function debug(
+  el?: Element | Locator | null | (Element | Locator)[],
+  maxLength?: number,
+  options?: PrettyDOMOptions,
+): void
+export declare function prettyDOM(
+  dom?: Element | Locator | undefined | null,
+  maxLength?: number,
+  prettyFormatOptions?: PrettyDOMOptions,
+): string
+export declare function getElementError(selector: string, container?: Element): Error