Skip to main content

Selectors

选择器可用于安装自定义选择器引擎。参见选择器使用指南以了解更多信息。

selectors.register(name, script[, options])​

Added in: v1.8
  • name <string> 在选择器中作为前缀使用的名称，例如 {name: 'foo'} 将启用 foo=myselectorbody 选择器。名称只能包含 [a-zA-Z0-9_] 字符。#
  • script <function|string|Object> 会被执行并返回选择器引擎实例的脚本。脚本将在页面上下文中执行。#
    • path? <string> JavaScript 文件路径。如果 path 是相对路径，则基于当前工作目录解析。可选。
    • content? <string> 原始脚本内容。可选。
  • options? <Object>
    • contentScript? <boolean> 是否在隔离的 JavaScript 环境中运行此选择器引擎。该环境可访问相同 DOM，但不能访问 frame 内脚本的任何 JavaScript 对象。默认为 false。注意：当此引擎与其他注册的选择器引擎一起使用时，不能保证以 content script 的方式运行。#
  • returns: <Promise<void>>#

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

const { selectors, firefox } = require('playwright');  // 或 'chromium' 或 'webkit'。

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

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

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

  const browser = await firefox.launch();
  const page = await browser.newPage();
  await page.setContent(`<div><button>Click me</button></div>`);

  // 使用以其名称为前缀的选择器。
  const button = page.locator('tag=button');
  // 将其与其他选择器引擎结合使用。
  await page.locator('tag=div >> text="Click me"').click();
  // 可以在任何支持选择器的方法中使用它。
  const buttonCount = await page.locator('tag=button').count();

  await browser.close();
})();

selectors.setTestIdAttribute(attributeName)​

Added in: v1.27
  • attributeName <string> 测试 id 属性名称。#
  • returns: <void>#

定义要在 page.getByTestId(testId) 中使用的自定义属性名称。默认使用 data-testid。