Skip to main content



Custom selector engines

Playwright 支持自定义选择器引擎,已在 selectors.register() 注册。

Playwright supports custom selector engines, registered with selectors.register().


Selector engine should have the following properties:

  • query 函数查询相对于 root 匹配 selector 的第一个元素。

    query function to query first element matching selector relative to the root.

  • queryAll 函数查询相对于 root 匹配 selector 的所有元素。

    queryAll function to query all elements matching selector relative to the root.

默认情况下,引擎直接在框架的 JavaScript 上下文中运行,例如,可以调用应用定义的函数。要将引擎与框架中的任何 JavaScript 隔离,但保留对 DOM 的访问权限,请使用 {contentScript: true} 选项注册引擎。内容脚本引擎更安全,因为它可以防止对全局对象的任何篡改,例如更改 Node.prototype 方法。所有内置选择器引擎都作为内容脚本运行。请注意,当引擎与其他自定义引擎一起使用时,不能保证作为内容脚本运行。

By default the engine is run directly in the frame's JavaScript context and, for example, can call an application-defined function. To isolate the engine from any JavaScript in the frame, but leave access to the DOM, register the engine with {contentScript: true} option. Content script engine is safer because it is protected from any tampering with the global objects, for example altering Node.prototype methods. All built-in selector engines run as content scripts. Note that running as a content script is not guaranteed when the engine is used together with other custom engines.


Selectors must be registered before creating the page.


An example of registering selector engine that queries elements based on a tag name:

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

export { expect } from '@playwright/test';

// Must be a function that evaluates to a selector engine instance.
const createTagNameEngine = () => ({
// Returns the first element matching given selector in the root's subtree.
query(root, selector) {
return root.querySelector(selector);

// Returns all elements matching given selector in the root's subtree.
queryAll(root, selector) {
return Array.from(root.querySelectorAll(selector));

export const test = base.extend<{}, { selectorRegistration: void }>({
// Register selectors once per worker.
selectorRegistration: [async ({ playwright }, use) => {
// Register the engine. Selectors will be prefixed with "tag=".
await playwright.selectors.register('tag', createTagNameEngine);
await use();
}, { scope: 'worker', auto: true }],
import { test, expect } from './baseTest';

test('selector engine test', async ({ page }) => {
// Now we can use 'tag=' selectors.
const button = page.locator('tag=button');

// We can combine it with built-in locators.
await page.locator('tag=div').getByText('Click me').click();

// We can use it in any methods supporting selectors.
await expect(page.locator('tag=button')).toHaveCount(3);