Локаторы в Playwright

Введение

В этой статье рассматриваются различные методы 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».

🔥 Какой была ваша первая зарплата в QA и как вы искали первую работу? 

Мега обсуждение в нашем телеграм-канале о поиске первой работы. Обмен опытом и мнения.

Читать в телеграм

1 комментарий к “Локаторы в Playwright”

  1. Жаль, что тесты Playwright можно написать только на джаве. Иначе бы автор обязательно уточнил, какой именно ЯП используется в примерах. А так мы сразу поняли, что это джава

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *