fix(selectors): allow custom engines in out-of-process (#17139)

packages/playwright-test/src/index.ts

@@ -25,6 +25,7 @@ export { expect } from './expect';
 export const _baseTest: TestType<{}, {}> = rootTestType.test;
 export { addRunnerPlugin as _addRunnerPlugin } from './plugins';
 import * as outOfProcess from 'playwright-core/lib/outofprocess';
+import * as playwrightLibrary from 'playwright-core';
 import type { TestInfoImpl } from './testInfo';
 
 if ((process as any)['__pw_initiator__']) {
@@ -61,7 +62,9 @@ export const test = _baseTest.extend<TestFixtures, WorkerFixtures>({
       const impl = await outOfProcess.start({
         NODE_OPTIONS: undefined  // Hide driver process while debugging.
       });
-      await use(impl.playwright as any);
+      const pw = impl.playwright as any;
+      pw._setSelectors(playwrightLibrary.selectors);
+      await use(pw);
       await impl.stop();
     } else {
       await use(require('playwright-core'));

tests/config/testModeFixtures.ts

@@ -17,6 +17,7 @@
 import { test } from '@playwright/test';
 import type { TestModeName } from './testMode';
 import { DefaultTestMode, DriverTestMode } from './testMode';
+import * as playwrightLibrary from 'playwright-core';
 
 export type TestModeWorkerOptions = {
   mode: TestModeName;
@@ -42,6 +43,7 @@ export const testModeTest = test.extend<TestModeTestFixtures, TestModeWorkerOpti
     }[mode];
     require('playwright-core/lib/utils').setUnderTest();
     const playwright = await testMode.setup();
+    playwright._setSelectors(playwrightLibrary.selectors);
     await run(playwright);
     await testMode.teardown();
   }, { scope: 'worker' }],

tests/library/selectors-register.spec.ts

@@ -17,15 +17,16 @@
 
 import { browserTest as it, expect } from '../config/browserTest';
 
+const createTagSelector = () => ({
+  query(root, selector) {
+    return root.querySelector(selector);
+  },
+  queryAll(root, selector) {
+    return Array.from(root.querySelectorAll(selector));
+  }
+});
+
 it('should work', async ({ playwright, browser }) => {
-  const createTagSelector = () => ({
-    query(root, selector) {
-      return root.querySelector(selector);
-    },
-    queryAll(root, selector) {
-      return Array.from(root.querySelectorAll(selector));
-    }
-  });
   // Register one engine before creating context.
   await playwright.selectors.register('tag', `(${createTagSelector.toString()})()`);
 
@@ -51,6 +52,27 @@ it('should work', async ({ playwright, browser }) => {
   await context.close();
 });
 
+it('should work when registered on global', async ({ browser }) => {
+  await require('@playwright/test').selectors.register('oop-tag', `(${createTagSelector.toString()})()`);
+
+  const context = await browser.newContext();
+  // Register another engine after creating context.
+  await require('@playwright/test').selectors.register('oop-tag2', `(${createTagSelector.toString()})()`);
+
+  const page = await context.newPage();
+  await page.setContent('<div><span></span></div><div></div>');
+
+  expect(await page.$eval('oop-tag=DIV', e => e.nodeName)).toBe('DIV');
+  expect(await page.$eval('oop-tag=SPAN', e => e.nodeName)).toBe('SPAN');
+  expect(await page.$$eval('oop-tag=DIV', es => es.length)).toBe(2);
+
+  expect(await page.$eval('oop-tag2=DIV', e => e.nodeName)).toBe('DIV');
+  expect(await page.$eval('oop-tag2=SPAN', e => e.nodeName)).toBe('SPAN');
+  expect(await page.$$eval('oop-tag2=DIV', es => es.length)).toBe(2);
+
+  await context.close();
+});
+
 it('should work with path', async ({ playwright, browser, asset }) => {
   const page = await browser.newPage();
   await playwright.selectors.register('foo', { path: asset('sectionselectorengine.js') });