可扩展性

自定义选择器引擎

Playwright 支持通过 selectors.register() 注册自定义选择器引擎。

选择器引擎应具备以下属性：

query 函数：用于查询与 selector 匹配的第一个元素（相对于 root）
queryAll 函数：用于查询所有与 selector 匹配的元素（相对于 root）

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

选择器必须在创建页面之前注册。

以下示例展示了注册基于标签名查询元素的选择器引擎：

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

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

// 必须是一个能返回选择器引擎实例的函数
const createTagNameEngine = () => ({
  // 返回根元素子树中与给定选择器匹配的第一个元素
  query(root, selector) {
    return root.querySelector(selector);
  },

  // 返回根元素子树中与给定选择器匹配的所有元素
  queryAll(root, selector) {
    return Array.from(root.querySelectorAll(selector));
  }
});

export const test = base.extend<{}, { selectorRegistration: void }>({
  // 每个 worker 只注册一次选择器
  selectorRegistration: [async ({ playwright }, use) => {
    // 注册引擎。选择器将使用 "tag=" 前缀
    await playwright.selectors.register('tag', createTagNameEngine);
    await use();
  }, { scope: 'worker', auto: true }],
});

example.spec.ts
import { test, expect } from './baseTest';

test('选择器引擎测试', async ({ page }) => {
  // 现在可以使用 'tag=' 选择器
  const button = page.locator('tag=button');
  await button.click();

  // 可以与内置定位器组合使用
  await page.locator('tag=div').getByText('点击我').click();

  // 可以在任何支持选择器的方法中使用
  await expect(page.locator('tag=button')).toHaveCount(3);
});

自定义选择器引擎​

自定义选择器引擎