fix(browser): make custom locators available in vitest-browser-* packages (#8103)

Author: sheremet-va

packages/browser/src/client/tester/context.ts

@@ -360,6 +360,7 @@ export const locators: BrowserLocators = {
   extend(methods) {
     const Locator = page._createLocator('css=body').constructor as typeof LocatorAPI
     for (const method in methods) {
+      locators._extendedMethods.add(method)
       const cb = (methods as any)[method] as (...args: any[]) => string | Locator
       // @ts-expect-error types are hard to make work
       Locator.prototype[method] = function (...args: any[]) {
@@ -378,11 +379,17 @@ export const locators: BrowserLocators = {
       }
     }
   },
+  _extendedMethods: new Set<string>(),
 }
 
 declare module '@vitest/browser/context' {
   interface BrowserPage {
     /** @internal */
     _createLocator: (selector: string) => Locator
   }
+
+  interface BrowserLocators {
+    /** @internal */
+    _extendedMethods: Set<string>
+  }
 }

packages/browser/src/client/tester/public-utils.ts

@@ -1,6 +1,6 @@
 import type { Locator, LocatorSelectors } from '@vitest/browser/context'
 import type { StringifyOptions } from 'vitest/internal/browser'
-import { page } from '@vitest/browser/context'
+import { locators, page } from '@vitest/browser/context'
 import { asLocator } from 'ivya'
 import { stringify } from 'vitest/internal/browser'
 
@@ -14,6 +14,10 @@ export function getElementLocatorSelectors(element: Element): LocatorSelectors {
     getByTestId: testId => locator.getByTestId(testId),
     getByText: (text, options) => locator.getByText(text, options),
     getByTitle: (title, options) => locator.getByTitle(title, options),
+    ...Array.from(locators._extendedMethods).reduce((methods, method) => {
+      methods[method] = (...args: any[]) => (locator as any)[method](...args)
+      return methods
+    }, {} as any),
   }
 }
 

test/browser/fixtures/locators-custom/basic.test.tsx

@@ -1,5 +1,6 @@
 import { type Locator, locators, page } from '@vitest/browser/context';
 import { beforeEach, expect, test } from 'vitest';
+import { getElementLocatorSelectors } from '@vitest/browser/utils'
 
 declare module '@vitest/browser/context' {
   interface LocatorSelectors {
@@ -84,3 +85,12 @@ test('new added method works on the page', async () => {
 
   expect(document.body).toHaveTextContent('New Content')
 })
+
+test('locators are available from getElementLocatorSelectors', () => {
+  const locators = getElementLocatorSelectors(document.body)
+
+  expect(locators.updateHtml).toBeTypeOf('function')
+  expect(locators.getByCustomTitle).toBeTypeOf('function')
+  expect(locators.updateDocumentHtml).toBeTypeOf('function')
+  expect(locators.getByNestedTitle).toBeTypeOf('function')
+})

test/browser/specs/locators.test.ts

@@ -34,7 +34,7 @@ test('custom locators work', async () => {
   })
 
   const COUNT_TEST_FILES = 1
-  const COUNT_TESTS_OVERALL = 4
+  const COUNT_TESTS_OVERALL = 5
 
   expect(stdout).toReportSummaryTestFiles({ passed: instances.length * COUNT_TEST_FILES })
   expect(stdout).toReportSummaryTests({ passed: instances.length * COUNT_TESTS_OVERALL })