[BUG] custom selector engines throw when running tests with --debug flag

[lucaelin]

System:

• OS: Linux 5.19 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
• Memory: 7.50 GB / 15.33 GB
• Container: Yes

Binaries:

• Node: 16.18.0 - /usr/bin/node
• Yarn: 1.22.19 - ~/.npm-packages/bin/yarn
• npm: 8.19.2 - ~/.npm-packages/bin/npm

Languages:

• Bash: 5.1.16 - /usr/bin/bash

npmPackages:

• playwright: ^1.30.0 => 1.30.0

Code Snippet

import { test } from "@playwright/test";
import { selectors } from "playwright";

const createTagNameEngine = () => ({
  query(root, selector) {
    return root.querySelector(selector);
  },

  queryAll(root, selector) {
    return Array.from(root.querySelectorAll(selector));
  },
});

test("selector engine test", async ({ page }) => {
  await page.setContent(`<div><button>Click me</button></div>`);
  await selectors.register("tag", createTagNameEngine);
  await page.locator("tag=button").click();
});

npx playwright test ./bug.spec.js --debug

Description

Running the command above and continuing the test in the debugger yields the following error:

Running 1 test using 1 worker

  ✘  1 bug.spec.js:14:1 › selector engine test (5.4s)


  1) bug.spec.js:14:1 › selector engine test =========================================================

    locator.click: TypeError: Cannot read properties of undefined (reading 'queryAll')

        at InjectedScript._queryEngineAll (<anonymous>:4420:48)
        at InjectedScript.querySelectorAll (<anonymous>:4407:30)
        at eval (eval at evaluate (:197:30), <anonymous>:4:35)
        at UtilityScript.evaluate (<anonymous>:199:17)
        at UtilityScript.<anonymous> (<anonymous>:1:44)
    =========================== logs ===========================
    waiting for locator('tag=button')
    ============================================================
        at file:///home/luca/Dokumente/playwright-selector-test/bug.spec.js:17:36


  1 failed
    bug.spec.js:14:1 › selector engine test ==========================================================

A similar problem was described in #16665 so this might be considered a regression

[pavelfeldman]

I can repro.

[yury-s]

Custom selector engines should be registered before the page is created, otherwise the behavior is racy. In this particular example they happen to be pushed into the page in non-debug mode quite late (when click is executed) but in the debug mode the order changes and registered selectors are propagated into the page earlier (before you register the custom one). Recommended solution in this case is to register the selector in beforeAll:

import { test } from '@playwright/test';

const createTagNameEngine = () => ({
  query(root, selector) {
    return root.querySelector(selector);
  },

  queryAll(root, selector) {
    return Array.from(root.querySelectorAll(selector));
  },
});

test.beforeAll(({ playwright }) => playwright.selectors.register("tag", createTagNameEngine));

test("selector engine test", async ({ page }) => {
  await page.setContent(`<div><button>Click me</button></div>`);
  await page.locator("tag=button").click();
});

Does this work for you?

[lucaelin]

This works great! Thank you very much :)