Фильтрация элементов с помощью filter и locator

Фильтрация элементов с помощью filter и locator

Playwright — это мощный инструмент для автоматизации тестирования веб-приложений. Он предоставляет широкие возможности для работы с DOM-элементами, включая эффективные методы фильтрации элементов с помощью filter и locator. Эти методы помогают точнее находить нужные элементы на странице и взаимодействовать с ними в рамках тестов.

Locator — это объект, представляющий собой способ поиска элементов на веб-странице. Он инкапсулирует запросы и действия, связанные с поиском и взаимодействием с элементами. Locator позволяет работать с элементами, не извлекая их сразу из DOM. Взаимодействие с элементами происходит по мере необходимости, что делает тесты более стабильными и производительными.

Для создания locator можно использовать метод page.locator(). В его параметрах указывается строка CSS-селектора, XPath-выражение или текстовое содержимое элемента:

const locator = page.locator('button#submit');

Кроме того, Playwright поддерживает возможность фильтрации элементов при использовании locator, что делает поиск более точным и контролируемым.

Использование метода filter

Метод filter позволяет фильтровать набор найденных элементов с использованием дополнительных условий. Это особенно полезно, когда на странице присутствуют несколько элементов, удовлетворяющих базовому селектору, но требуется сузить выборку с учетом дополнительных критериев.

Метод filter работает с уже созданными локаторами и применяет дополнительные фильтры к найденным элементам. К примеру, можно фильтровать элементы по их текстовому содержимому, аттрибутам или состоянию (например, видимости).

Пример использования filter для фильтрации по аттрибуту

const buttonLocator = page.locator('button');
const filteredButton = buttonLocator.filter({ hasText: 'Submit' });

В этом примере метод filter фильтрует все кнопки на странице, оставляя только те, которые содержат текст “Submit”. Это позволяет точно взаимодействовать с конкретной кнопкой, даже если на странице есть другие кнопки с аналогичными селекторами.

Пример использования filter с проверкой видимости

const itemLocator = page.locator('.item');
const visibleItems = itemLocator.filter({ hasText: 'Available' }).filter({ isVisible: true });

Здесь происходит фильтрация всех элементов с классом .item, оставляя только те, которые видимы и содержат текст “Available”.

Метод filter принимает различные параметры для уточнения условий фильтрации:

  • hasText: фильтрует элементы по их текстовому содержимому.
  • hasClass: позволяет фильтровать элементы по классу.
  • isVisible: проверяет видимость элементов.
  • isChecked, isDisabled, isEditable: позволяют фильтровать элементы по состоянию.

Локаторы с динамическими фильтрами

Использование динамических фильтров через локаторы позволяет делать тесты гибкими и адаптируемыми к различным ситуациям. Например, если на странице появляется новый элемент, соответствующий фильтру, тест автоматически найдет и взаимодействует с ним. Это помогает избежать статичных локаторов и делает тестирование более устойчивым.

Пример динамической фильтрации по значению аттрибута

const itemLocator = page.locator('.item');
const filteredItems = itemLocator.filter({ hasAttribute: ['data-status', 'active'] });

Этот код находит все элементы с классом .item, у которых аттрибут data-status равен “active”. Такой подход идеально подходит для тестирования динамических страниц, где элементы могут добавляться или изменяться во время работы приложения.

Обработка ошибок при фильтрации

При фильтрации элементов важно правильно обрабатывать случаи, когда элемент не найден. В Playwright, если фильтр не находит ни одного элемента, то выбрасывается ошибка. Это поведение можно обрабатывать через try-catch или проверку наличия элементов с помощью методов count или isVisible.

try {
  const filteredButton = buttonLocator.filter({ hasText: 'Submit' });
  await filteredButton.click();
} catch (error) {
  console.log('Элемент не найден');
}

В случае, если необходимо убедиться, что элемент присутствует на странице перед попыткой взаимодействия с ним, можно воспользоваться условными операторами:

const filteredButton = buttonLocator.filter({ hasText: 'Submit' });
if (await filteredButton.count() > 0) {
  await filteredButton.click();
} else {
  console.log('Кнопка не найдена');
}

Оптимизация тестов с фильтрацией

Фильтрация элементов помогает улучшить производительность тестов, поскольку она позволяет сократить количество обращений к DOM и работать только с нужными элементами. В отличие от стандартных методов поиска, таких как querySelectorAll, использование locator с фильтрацией позволяет работать с более точными и оптимизированными запросами, которые выполняются быстрее и с меньшей нагрузкой на браузер.

Использование фильтрации с локаторами особенно полезно при тестировании сложных пользовательских интерфейсов, где элементы могут быть изменены или добавлены динамически. Например, если на странице загружается список элементов, фильтрация позволяет быстро работать с необходимым элементом, даже если он не виден сразу.

Заключение

Методы filter и locator в Playwright обеспечивают удобные и мощные инструменты для работы с элементами на странице. Они позволяют точечно находить и фильтровать элементы по множеству критериев, что делает тестирование более эффективным и гибким. Использование этих методов значительно улучшает стабильность и скорость тестов, особенно на динамичных веб-страницах, где элементы могут изменяться в процессе выполнения теста.

Оглавление