fix(browser): locator.element() returns HTMLElement or SVGElement (#8440)

sheremet-va · web-flow · commit c1ac15c6b229 · 2025-08-15T18:05:48.000+02:00
diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts
@@ -544,15 +544,15 @@ export interface Locator extends LocatorSelectors {
    *
    * @see {@link https://vitest.dev/guide/browser/locators#element}
    */
-  element(): Element
+  element(): HTMLElement | SVGElement
   /**
    * Returns an array of elements matching the selector.
    *
    * If no elements match the selector, an empty array is returned.
    *
    * @see {@link https://vitest.dev/guide/browser/locators#elements}
    */
-  elements(): Element[]
+  elements(): (HTMLElement | SVGElement)[]
   /**
    * Returns an element matching the selector.
    *
@@ -561,7 +561,7 @@ export interface Locator extends LocatorSelectors {
    *
    * @see {@link https://vitest.dev/guide/browser/locators#query}
    */
-  query(): Element | null
+  query(): HTMLElement | SVGElement | null
   /**
    * Wraps an array of `.elements()` matching the selector in a new `Locator`.
    *
diff --git a/packages/browser/src/client/tester/locators/index.ts b/packages/browser/src/client/tester/locators/index.ts
@@ -204,22 +204,22 @@ export abstract class Locator {
     return this.locator(`internal:or=${JSON.stringify(locator._pwSelector || locator.selector)}`)
   }
 
-  public query(): Element | null {
+  public query(): HTMLElement | SVGElement | null {
     const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector))
-    return selectorEngine.querySelector(parsedSelector, document.documentElement, true)
+    return selectorEngine.querySelector(parsedSelector, document.documentElement, true) as HTMLElement | SVGElement
   }
 
-  public element(): Element {
+  public element(): HTMLElement | SVGElement {
     const element = this.query()
     if (!element) {
       throw getElementError(this._pwSelector || this.selector, this._container || document.body)
     }
     return element
   }
 
-  public elements(): Element[] {
+  public elements(): (HTMLElement | SVGElement)[] {
     const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector))
-    return selectorEngine.querySelectorAll(parsedSelector, document.documentElement)
+    return selectorEngine.querySelectorAll(parsedSelector, document.documentElement) as (HTMLElement | SVGElement)[]
   }
 
   public all(): Locator[] {

Original file line number	Diff line number	Diff line change
`@@ -544,15 +544,15 @@ export interface Locator extends LocatorSelectors {`
`544`	`544`	`*`
`545`	`545`	`* @see {@link https://vitest.dev/guide/browser/locators#element}`
`546`	`546`	`*/`
`547`		`- element(): Element`
	`547`	`+ element(): HTMLElement \| SVGElement`
`548`	`548`	`/**`
`549`	`549`	`* Returns an array of elements matching the selector.`
`550`	`550`	`*`
`551`	`551`	`* If no elements match the selector, an empty array is returned.`
`552`	`552`	`*`
`553`	`553`	`* @see {@link https://vitest.dev/guide/browser/locators#elements}`
`554`	`554`	`*/`
`555`		`- elements(): Element[]`
	`555`	`+ elements(): (HTMLElement \| SVGElement)[]`
`556`	`556`	`/**`
`557`	`557`	`* Returns an element matching the selector.`
`558`	`558`	`*`
`@@ -561,7 +561,7 @@ export interface Locator extends LocatorSelectors {`
`561`	`561`	`*`
`562`	`562`	`* @see {@link https://vitest.dev/guide/browser/locators#query}`
`563`	`563`	`*/`
`564`		`- query(): Element \| null`
	`564`	`+ query(): HTMLElement \| SVGElement \| null`
`565`	`565`	`/**`
`566`	`566`	* Wraps an array of `.elements()` matching the selector in a new `Locator`.
`567`	`567`	`*`
Original file line number	Diff line number	Diff line change
`@@ -204,22 +204,22 @@ export abstract class Locator {`
`204`	`204`	return this.locator(`internal:or=${JSON.stringify(locator._pwSelector \|\| locator.selector)}`)
`205`	`205`	`}`
`206`	`206`
`207`		`- public query(): Element \| null {`
	`207`	`+ public query(): HTMLElement \| SVGElement \| null {`
`208`	`208`	`const parsedSelector = this._parsedSelector \|\| (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector \|\| this.selector))`
`209`		`- return selectorEngine.querySelector(parsedSelector, document.documentElement, true)`
	`209`	`+ return selectorEngine.querySelector(parsedSelector, document.documentElement, true) as HTMLElement \| SVGElement`
`210`	`210`	`}`
`211`	`211`
`212`		`- public element(): Element {`
	`212`	`+ public element(): HTMLElement \| SVGElement {`
`213`	`213`	`const element = this.query()`
`214`	`214`	`if (!element) {`
`215`	`215`	`throw getElementError(this._pwSelector \|\| this.selector, this._container \|\| document.body)`
`216`	`216`	`}`
`217`	`217`	`return element`
`218`	`218`	`}`
`219`	`219`
`220`		`- public elements(): Element[] {`
	`220`	`+ public elements(): (HTMLElement \| SVGElement)[] {`
`221`	`221`	`const parsedSelector = this._parsedSelector \|\| (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector \|\| this.selector))`
`222`		`- return selectorEngine.querySelectorAll(parsedSelector, document.documentElement)`
	`222`	`+ return selectorEngine.querySelectorAll(parsedSelector, document.documentElement) as (HTMLElement \| SVGElement)[]`
`223`	`223`	`}`
`224`	`224`
`225`	`225`	`public all(): Locator[] {`