Введение
В этой статье рассматриваются различные методы Playwright для поиска элементов: от базовых, таких как CSS-селекторы и селекторы по тексту, до более продвинутых вариантов фильтрации и операторов. Эти инструменты позволяют точно и эффективно выбирать элементы на странице, что делает Playwright мощным инструментом для надёжного тестирования веб-приложений.
Содержание
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Базовые локаторы
Локаторы в Playwright представляют собой методы для поиска и взаимодействия с элементами на веб-странице. Каждый раз, когда локатор используется для выполнения действия, он динамически находит самый актуальный DOM-элемент, что снижает нестабильность тестов.
- getByRole()
Этот локатор находит элементы на основе их ARIA-ролей, таких как кнопки, чекбоксы или поля ввода. Он принимает значение из перечислений AriaRole
и необязательный второй аргумент для дополнительных опций, относящихся к конкретной роли.
page.getByRole(AriaRole.HEADING); page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("billing address")); page.getByRole(AriaRole.CHECKBOX, new Page.GetByRoleOptions().setChecked(true)); page.getByRole(AriaRole.RADIO, new Page.GetByRoleOptions().setDisabled(true));
- getByLabel()
Используется для нахождения элементов ввода, связанных с конкретной меткой, что полезно при работе с формами.
page.getByLabel("Password"); page.getByLabel(Pattern.compile("(?i).*name.*"));
- getByPlaceholder()
Применяется для нахождения элементов ввода с атрибутом placeholder
, который подсказывает пользователю, что необходимо ввести.
page.getByPlaceholder("name@example.com"); page.getByPlaceholder(Pattern.compile("^[\\w.%+-]+@[\\w.-]+\\.[a-zA-Z]{2,}$"));
- getByText()
Полезен для поиска элементов, содержащих определённый текст. Playwright нормализует пробелы, поэтому о них можно не беспокоиться.
page.getByText("Your Ultimate Test Automation Partner"); page.getByText("Ultimate Test Automation", new Page.GetByTextOptions().setExact(false)); page.getByText(Pattern.compile("Partner$"));
- getByAltText()
Используется для нахождения элементов <img>
или <area>
, используя атрибут alt
, что особенно полезно для изображений, т.к. атрибут alt
часто содержит описание изображения.
page.getByAltText("Parallel on Agents", new Page.GetByAltTextOptions().setExact(true)); page.getByAltText(Pattern.compile("^people"));
- getByTitle()
Находит элементы по значению атрибута title
.
page.getByTitle("Automate the Planet Logo"); page.getByTitle(Pattern.compile("Logo$"));
- getByTestId()
Находит элементы по тестовому идентификатору (test ID), который остается постоянным, даже если содержимое страницы изменяется. Необходимо настроить Playwright для распознавания атрибута, используемого в качестве test ID.
playwright.selectors().setTestIdAttribute("bellatrix-testid"); page.getByTestId("bellatrix-testid"); page.getByTestId(Pattern.compile("^testid"));
- locator()
Для более сложных сценариев в Playwright можно использовать CSS или XPath-селекторы.
page.locator("//img[@alt='people_image' and contains(@src, 'Forbes.jpeg')]"); page.locator("[id='logo']");
При использовании таких локаторов рекомендуется добавлять префиксы xpath=
или css=
, чтобы Playwright правильно интерпретировал тип селектора.
Фильтрация
Кроме базового поиска с использованием одного локатора, можно выполнить более детализированный поиск.
Фильтрация по тексту
В Playwright фильтрация по тексту может быть особенно полезной, когда нужно взаимодействовать с элементами, содержащими конкретный текст, или когда требуется исключить элементы с определенным текстом.
- hasText
Метод setHasText
используется для указания текста, который должен присутствовать в найденных элементах. Это полезно для обеспечения взаимодействия с нужным элементом, когда несколько элементов могут соответствовать более широкому селектору.
Для фильтрации элементов, содержащих определённый текст, можно использовать метод locator
в сочетании с параметром hasText
.
Locator button = page.locator("button", new Locator.LocatorOptions().setHasText("Submit")); button.click();
В этом примере метод locator
используется для поиска элемента button
, который содержит текст “Submit”. Метод setHasText
фильтрует элементы, включая только те, которые содержат указанный текст.
Вы также можете фильтровать по частичному совпадению текста.
Locator button = page.locator("button", new Locator.LocatorOptions().setHasText(Pattern.compile("Sub"))); button.click();
Здесь метод setHasText
использует регулярное выражение для поиска элементов, содержащих текст “Sub” в любом месте внутри элемента.
- hasNotText
Параметр hasNotText
используется для указания текста, которого не должно быть в найденных элементах. Это полезно для исключения элементов, которые могут мешать нужному взаимодействию.
Чтобы отфильтровать элементы, которые не содержат определённый текст, можно использовать сочетание метода locator
и отрицательного условия в логике фильтрации.
Предположим, вы хотите найти элемент button
, который не содержит текст “Cancel”.
Locator button = page.locator("button").filter(new Locator.FilterOptions().setHasNotText("Cancel")); button.click();
В этом примере метод filter
используется для исключения всех элементов button
, содержащих текст “Cancel”. Метод setHasNotText
указывает текст, который не должен присутствовать в найденных элементах.
Вы также можете исключить элементы, содержащие определённую часть текста.
Locator button = page.locator("button").filter(new Locator.FilterOptions().setHasNotText(Pattern.compile("Can"))); button.click();
Здесь метод setHasNotText
использует регулярное выражение для исключения элементов, содержащих текст “Can” в любом месте внутри элемента.
Фильтрация по дочерним элементам/потомкам
Данный тип фильтрации в Playwright позволяет выбирать элементы на основе наличия или отсутствия определенных вложенных элементов. Это позволяет точно определить нужный родительский элемент для взаимодействия, который содержит (или не содержит) определённые вложенные элементы.
- has
Параметр has
используется для указания дочернего или вложенного элемента, который должен присутствовать в найденных элементах. Это помогает убедиться, что вы взаимодействуете с нужным родительским элементом, содержащим необходимые дочерние элементы.
Предположим, вы хотите найти элемент div
, который содержит элемент span
с текстом “Child”.
Locator parentDiv = page.locator("div", new Locator.LocatorOptions().setHas(page.locator("span:has-text('Child')"))); parentDiv.click();
В этом примере метод locator
используется для поиска элементов div
, содержащих дочерний элемент span
с текстом “Child”. Метод setHas
указывает на дочерний элемент, который должен присутствовать в найденных элементах.
Также можно отфильтровать элементы по наличию потомков с определенными атрибутами.
Locator parentDiv = page.locator("div", new Locator.LocatorOptions().setHas(page.locator("input[type='text']"))); parentDiv.click();
Здесь метод locator
находит элементы div
, содержащие дочерний элемент input
с атрибутом type="text"
. Метод setHas
указывает на дочерний элемент с нужным атрибутом.
- hasNot
Параметр hasNot
используется для указания дочернего элемента или потомка, который не должен присутствовать в найденных элементах. Это полезно для исключения родительских элементов, которые могут мешать нужному взаимодействию.
Предположим, вы хотите найти элемент div
, который не содержит дочерний элемент span
.
Locator parentDiv = page.locator("div").filter(new Locator.FilterOptions().setHasNot(page.locator("span"))); parentDiv.click();
В этом примере метод filter
используется для исключения любых элементов div
, содержащих дочерний элемент span
. Метод setHasNot
указывает на дочерний элемент, который не должен присутствовать.
Можно также отфильтровать элементы по отсутствию потомков с определёнными атрибутами.
Locator parentDiv = page.locator("div").filter(new Locator.FilterOptions().setHasNot(page.locator("input[type='password']"))); parentDiv.click();
Здесь метод filter
исключает элементы div
, которые содержат дочерний элемент input
с атрибутом type="password"
. Метод setHasNot
указывает на дочерний элемент с атрибутом, который не должен присутствовать.
Операторы
Операторы в Playwright позволяют создавать более сложные локаторы, комбинируя более простые.
Один из распространенных вариантов использования — поиск элементов, которые удовлетворяют одновременно двум (или более) условиям. Другой вариант — поиск элементов, удовлетворяющих хотя бы одному из нескольких условий.
Соответствие двум или более условиям одновременно
Класс Locator в Playwright инкапсулирует метод and
, который сужает поиск, добавляя дополнительные условия — локаторы.
page.getByRole(AriaRole.IMG).and(page.getByTitle("Automate The Planet Logo"));
Соответствие одному из нескольких условий
Метод or()
в Playwright используется для создания локатора, который находит элементы, удовлетворяющие хотя бы одному из нескольких условий. Это особенно полезно, когда вы хотите взаимодействовать с элементами, которые могут удовлетворять любому из нескольких различных критериев.
page.locator("button").and(page.locator(".btn-primary").or(page.locator("//*[text()=’Submit’]")));
Как видно из примера, вы можете комбинировать два оператора: and
и or
, чтобы создать более сложные условия для поиска элементов. В данном случае локатор будет искать элементы button
, которые либо имеют класс .btn-primary
, либо содержат текст “Submit”.
Заключение
В этой статье мы рассмотрели методы локаторов, доступные в Playwright, привели практические примеры фильтрации по тексту, дочерним элементам и атрибутам, а также описали продвинутые приёмы, включая использование метода or()
для работы с несколькими условиями.
Освоив эти методы, вы сможете повысить точность и надежность ваших автоматизированных тестов, обеспечив корректную работу веб-приложений. Этот гайд является полезным ресурсом для QA-инженеров, стремящихся улучшить стратегии тестирования с помощью Playwright.
Для более детального изучения ознакомьтесь с официальной документацией Playwright.
Перевод статьи «Playwright Tutorial: Mastering Element Locators».
Жаль, что тесты Playwright можно написать только на джаве. Иначе бы автор обязательно уточнил, какой именно ЯП используется в примерах. А так мы сразу поняли, что это джава