Расширяемость

Пользовательские механизмы выбора селекторов​

Playwright поддерживает пользовательские механизмы выбора селекторов, регистрируемые с помощью selectors.register().

Механизм выбора селекторов должен иметь следующие свойства:

• query функция для запроса первого элемента, соответствующего selector относительно root.
• queryAll функция для запроса всех элементов, соответствующих selector относительно root.

По умолчанию механизм запускается напрямую в контексте JavaScript фрейма и, например, может вызывать функцию, определенную приложением. Чтобы изолировать механизм от любого JavaScript во фрейме, но сохранить доступ к DOM, зарегистрируйте механизм с помощью параметра {contentScript: true}. Механизм скрипта содержимого более безопасен, поскольку он защищен от любых попыток подмены глобальных объектов, например, изменения методов Node.prototype. Все встроенные механизмы выбора селекторов работают как скрипты содержимого. Обратите внимание, что работа в качестве скрипта содержимого не гарантируется, когда механизм используется вместе с другими пользовательскими механизмами.

Селекторы должны быть зарегистрированы до создания страницы.

Пример регистрации механизма выбора селекторов, который запрашивает элементы на основе тега:

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');
  await button.click();

  // 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);
});