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

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

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 = () => ({
  // Возвращает первый элемент, соответствующий данному селектору в поддереве root.
  query(root, selector) {
    return root.querySelector(selector);
  },

  // Возвращает все элементы, соответствующие данному селектору в поддереве root.
  queryAll(root, selector) {
    return Array.from(root.querySelectorAll(selector));
  }
});

export const test = base.extend<{}, { selectorRegistration: void }>({
  // Регистрируем селекторы один раз на рабочий процесс.
  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('selector engine test', async ({ page }) => {
  // Теперь мы можем использовать селекторы 'tag='.
  const button = page.locator('tag=button');
  await button.click();

  // Мы можем комбинировать его с встроенными локаторами.
  await page.locator('tag=div').getByText('Click me').click();

  // Мы можем использовать его в любых методах, поддерживающих селекторы.
  await expect(page.locator('tag=button')).toHaveCount(3);
});