Метод filter для локаторов

Урок: Метод filter для локаторов

Введение

Представь, что ты ищешь товар в интернет-магазине. Ты вводишь «кроссовки» — и получаешь сотни результатов. Но тебе нужны не любые кроссовки, а, например, только чёрные и только определённого размера.

Ты начинаешь фильтровать: по цвету, по бренду, по цене. В итоге остаются только те варианты, которые тебе действительно подходят.

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

Для этого используется метод filter.

Он позволяет «сузить» набор элементов и работать только с нужными.

Когда возникает необходимость в filter

Рассмотрим пример.

await page.getByRole('listitem').click();

Если на странице несколько элементов списка (listitem), Playwright не поймёт, какой именно нужно кликнуть.

Можно выбрать по индексу:

await page.getByRole('listitem').nth(0).click();

Но это плохая практика:

  • порядок может измениться;
  • тест станет нестабильным.

Гораздо лучше выбрать элемент по смыслу — и здесь появляется filter.

Как работает filter

Метод filter применяется к локатору и уточняет его.

const item = page.getByRole('listitem').filter({ hasText: 'Товар 1' });
await item.click();

Разберём:

  • сначала мы нашли все элементы listitem;
  • затем отфильтровали их по тексту;
  • в результате остался только нужный элемент.

filter не создаёт новый поиск с нуля — он уточняет уже найденные элементы.

Фильтрация по тексту (hasText)

Самый частый вариант — фильтрация по тексту.

await page.getByRole('listitem').filter({ hasText: 'Apple' }).click();

Здесь:

  • ищем все элементы списка;
  • оставляем только те, где есть текст «Apple».

Это удобно, потому что:

  • пользователь тоже ориентируется по тексту;
  • тест становится читаемым.

Фильтрация по вложенным элементам (has)

Иногда нужно выбрать элемент, внутри которого есть другой элемент.

await page
  .getByRole('listitem')
  .filter({
    has: page.getByRole('button', { name: 'Купить' }),
  })
  .click();

Разберём:

  • ищем элементы списка;
  • оставляем те, внутри которых есть кнопка «Купить».

Это очень мощный инструмент, когда структура сложная.

Комбинирование условий

Можно комбинировать фильтры.

await page
  .getByRole('listitem')
  .filter({ hasText: 'iPhone' })
  .filter({
    has: page.getByRole('button', { name: 'Купить' }),
  })
  .click();

Здесь:

  • сначала фильтруем по тексту;
  • затем уточняем по вложенному элементу.

Это делает выбор максимально точным.

Пример из реального сценария

Представим список товаров:

<li>
  <span>iPhone</span>
  <button>Купить</button>
</li>

<li>
  <span>Samsung</span>
  <button>Купить</button>
</li>

Задача — нажать кнопку «Купить» у iPhone.

await page
  .getByRole('listitem')
  .filter({ hasText: 'iPhone' })
  .getByRole('button', { name: 'Купить' })
  .click();

Что происходит:

  • находим нужный товар;
  • внутри него ищем кнопку;
  • кликаем.

Это читается как человеческое действие: «найти iPhone → нажать купить».

Почему filter лучше nth

Сравним два подхода.

Через nth:

await page.getByRole('listitem').nth(0).click();

Проблемы:

  • зависит от порядка;
  • неочевидно, что это за элемент.

Через filter:

await page.getByRole('listitem').filter({ hasText: 'iPhone' }).click();

Преимущества:

  • понятно, что выбирается;
  • устойчиво к изменениям;
  • ближе к логике пользователя.

Как это работает внутри

Когда ты пишешь:

page.getByRole('listitem').filter({ hasText: 'iPhone' });

Playwright:

  • сначала находит все элементы;
  • затем проверяет каждый;
  • оставляет только подходящие;
  • выполняет действие.

При этом:

  • используется автоматическое ожидание;
  • элементы проверяются в реальном времени.

Где это используется на практике

Метод filter используется везде, где:

  • есть списки (товары, таблицы);
  • элементы повторяются;
  • нужно выбрать конкретный элемент по условию;
  • структура сложная.

Например:

  • выбор строки в таблице;
  • выбор карточки товара;
  • поиск нужного пользователя;
  • работа с динамическими списками.

Итоговое понимание

Метод filter — это способ уточнить локатор и выбрать нужный элемент среди нескольких.

Он позволяет:

  • делать тесты более точными;
  • избегать нестабильных решений (nth);
  • писать код, похожий на действия пользователя.

Ключевая идея в том, что filter — это не просто инструмент, а способ мыслить правильно: не «взять первый элемент», а «найти нужный по смыслу».

Именно это делает тесты надёжными и понятными.

Веб-страница из видео

Демо для отработки filter и связанных локаторов: locator_filter — демо-страница.