Skip to main content

可扩展性

自定义选择器引擎​

Playwright 支持自定义选择器引擎，使用 selectors.register(name, script[, options]) 注册。

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

  • create 函数，用于创建从 root（root 是 Document、ShadowRoot 或 Element）到 target 元素的相对选择器。
  • query 函数，用于查询相对于 root 匹配 selector 的第一个元素。
  • queryAll 函数，用于查询相对于 root 匹配 selector 的所有元素。

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

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

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

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

// 注册引擎。选择器将以 "tag=" 为前缀。
await selectors.register('tag', createTagNameEngine);

// 现在我们可以使用 'tag=' 选择器。
const button = page.locator('tag=button');
await button.click();

// 我们可以使用 `>>` 组合器将其与其他选择器引擎结合使用。
await page.locator('tag=div >> span >> "Click me"').click();

// 我们可以在任何支持选择器的方法中使用它。
const buttonCount = await page.locator('tag=button').count();