{"record":{"id":"087526821f58d90e","repo":"vitest-dev/vitest","slug":"expected-dom-element-to-be-an-instance-of-element","errorCode":null,"errorMessage":"Expected DOM element to be an instance of Element, received ${typeof element}","messagePattern":"Expected DOM element to be an instance of Element, received (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/browser/src/client/tester/tester-utils.ts","lineNumber":11,"sourceCode":"import type { Locator, SelectorOptions, SerializedLocator, UserEventWheelDeltaOptions, UserEventWheelOptions } from 'vitest/browser'\nimport type { BrowserRPC } from '../client'\nimport type { BrowserTraceEntryStatus } from './trace'\nimport { __INTERNAL } from 'vitest/internal/browser'\nimport { getBrowserState, getWorkerState, now } from '../utils'\nimport { createBrowserTraceRangeId, recordBrowserTraceEntry } from './trace'\n\n/* @__NO_SIDE_EFFECTS__ */\nexport function convertElementToCssSelector(element: Element): string {\n  if (!element || !(element instanceof Element)) {\n    throw new Error(\n      `Expected DOM element to be an instance of Element, received ${typeof element}`,\n    )\n  }\n\n  return getUniqueCssSelector(element)\n}\n\nfunction escapeIdForCSSSelector(id: string) {\n  return id\n    .split('')\n    .map((char) => {\n      const code = char.charCodeAt(0)\n\n      if (char === ' ' || char === '#' || char === '.' || char === ':' || char === '[' || char === ']' || char === '>' || char === '+' || char === '~' || char === '\\\\') {\n        // Escape common special characters with backslashes\n        return `\\\\${char}`\n      }\n      else if (code >= 0x10000) {","sourceCodeStart":1,"sourceCodeEnd":29,"githubUrl":"https://github.com/vitest-dev/vitest/blob/1fa9837ec26533512fdcad8baebf249771bd340a/packages/browser/src/client/tester/tester-utils.ts#L1-L29","documentation":"Thrown by `convertElementToCssSelector` when its argument is falsy or not an `instanceof Element`. The function builds a unique CSS selector for a given DOM element so it can be serialized and re-resolved (e.g. sent to the browser command server); a non-Element cannot have a CSS path, so it is rejected with the received type name.","triggerScenarios":"Passing `null`/`undefined`, a Locator that failed to resolve, a plain object, a string selector, or a Node that is not an Element (text/comment node) to `convertElementToCssSelector`.","commonSituations":"Internal callers that received an unresolved element; user code reaching an internal helper with a wrong value; a Locator whose `.element()` returned null being passed through.","solutions":["Ensure the value is a real DOM `Element` before calling (e.g. guard with `instanceof Element`).","Resolve Locators to an element first and check for null.","Prefer the public Locator/serializer API rather than calling `convertElementToCssSelector` directly."],"exampleFix":"// before\nconvertElementToCssSelector(maybeNull)\n\n// after\nif (maybeNull instanceof Element) {\n  convertElementToCssSelector(maybeNull)\n}","handlingStrategy":"type-guard","validationCode":"function assertElement(el: unknown): asserts el is Element {\n  if (!(el instanceof Element)) {\n    throw new TypeError(`Expected Element, got ${typeof el}`)\n  }\n}\nassertElement(maybeEl)\nconvertElementToCssSelector(maybeEl)","typeGuard":"function isElement(el: unknown): el is Element {\n  return !!el && el instanceof Element\n}","tryCatchPattern":null,"preventionTips":["Null-check and `instanceof Element` before calling.","Prefer the public Locator API over internal helpers.","Resolve Locators strictly so missing elements fail earlier."],"tags":["internal","browser","dom","serialization"],"backgroundTag":null,"analyzedSha":"1fa9837ec26533512fdcad8baebf249771bd340a","analyzedAt":"2026-08-11T16:11:39.638Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}