В этой статье мы рассмотрим, как автоматизировать работу с выпадающими списками в Playwright с использованием Java. Вы научитесь выбирать значения из списков с одиночным и множественным выбором, используя различные подходы: по значению, индексу и тексту. Также мы обсудим, как выполнять проверки выбранных значений с помощью встроенных средств Playwright.
Эта информация будет полезна как начинающим, так и опытным тестировщикам, которые хотят улучшить свои навыки автоматизации веб-тестирования с Playwright.
Что такое выпадающий список с одиночным выбором?
Выпадающий список с одиночным выбором позволяет выбрать только одно значение из доступных в списке. Такой элемент часто встречается на сайтах, где пользователю нужно выбрать вариант из заранее заданных значений. Например, это может быть выбор пола (Мужской/Женский) или дня недели.
Вот пример выпадающего списка с демо-сайта “The-internet”:
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Что такое выпадающий список с множественным выбором?
Выпадающий список с множественным выбором позволяет выбирать несколько значений из списка. Он добавляется на сайт, чтобы дать пользователю возможность выбрать несколько вариантов из заранее заданного набора значений.
Пример можно увидеть на демонстрационном сайте LambdaTest Selenium Playground:
Работа с выпадающими списками в Playwright
В Playwright для Java есть метод selectOption(), который позволяет выбирать значения из выпадающего списка. Этот метод можно использовать для выбора как одного, так и нескольких опций по значению, индексу или метке.
Также Playwright поддерживает проверки, что упрощает работу тестировщика. Для этого есть метод assertThat(locator).hasValues(), с помощью которого можно убедиться, что в выпадающем списке выбраны правильные значения.
Давайте теперь рассмотрим работу с выпадающими списками подробнее.
Следующие тестовые сценарии будут автоматизированы с использованием страницы Dropdown на демонстрационном сайте The-internet herokuapp.
Тестовый сценарий 1
- Перейти на страницу с выпадающим списком на сайте The-internet herokuapp.
- Найти выпадающий список и выбрать опцию “Option 2”.
- Проверить, что вариант “Option 2” успешно выбран.
Реализация
Создаем новый Java-класс DropdownTests, в который будут записаны все тесты с выпадающими списками. Но перед написанием тестов создадим метод setup(), который поможет запустить браузер Chrome в фоновом режиме.
public class DropdownTests {
private Playwright playwright;
private Page page;
@BeforeClass
public void setup() {
this.playwright = Playwright.create();
final Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setChannel("chrome"));
this.page = browser.newPage();
}
@AfterClass
public void tearDown() {
this.playwright.close();
}
//...
}
В этом методе также будет создан экземпляр интерфейса Page из Playwright. Это поможет вызывать все соответствующие методы интерфейса Page в тестах без дублирования кода. Аналогично создается метод tearDown(), который корректно завершает сессию Playwright.
Метод testSelectByOption() реализует первый тестовый сценарий.
@Test
public void testSelectByOption() {
this.page.navigate("https://the-internet.herokuapp.com/dropdown");
final Locator dropdownField = this.page.locator("#dropdown");
dropdownField.selectOption("Option 2");
final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
assertEquals(dropdownFieldSelectedValue, "Option 2");
}
Первый оператор в методе теста переходит на страницу с выпадающим списком на сайте The-internet herokuapp. Далее он находит поле выпадающего списка с помощью локатора #dropdown.
Опция “Option 2” выбирается с помощью метода selectOption(). Значение, которое нужно выбрать, передается в виде строкового параметра методу selectOption().
Локатор #dropdown [selected='selected'] находит текст выбранной опции в выпадающем списке. В конце метод assertEquals() из TestNG используется для проверки, что в выпадающем списке выбрано правильное значение.
Тестовый сценарий 2
В этом сценарии значение в выпадающем списке будет выбрано с использованием метода setLabel() класса SelectOption.
- Перейти на страницу с выпадающим списком на сайте The-internet herokuapp.
- Найти выпадающий список и выбрать опцию “Option 1”.
- Проверить, что “Option 1” успешно выбрана.
Реализация
Создаем новый тестовый метод testSelectByLabel(), который реализует второй тестовый сценарий.
@Test
public void testSelectByLabel() {
this.page.navigate("https://the-internet.herokuapp.com/dropdown");
final Locator dropdownField = this.page.locator("#dropdown");
dropdownField.selectOption(new SelectOption().setLabel("Option 1"));
final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
assertEquals(dropdownFieldSelectedValue, "Option 1");
}
Реализация этого сценария такая же, как в тестовом сценарии 1, за исключением метода, используемого для выбора значения в выпадающем списке. Вариант “Option 1” выбирается с помощью следующего оператора:
dropdownField.selectOption(new SelectOption().setLabel("Option 1"));
Метод setLabel() выбирает опцию в выпадающем списке, сопоставляя ее метку. После выбора значения выполняется проверка с использованием метода assertEquals(), чтобы убедиться в правильности выбора опции.
Тестовый сценарий 3
В этом сценарии мы будем выбирать значение в выпадающем списке по его индексу.
- Перейти на страницу с выпадающим списком на сайте The-internet herokuapp.
- Найти выпадающий список и выбрать опцию с индексом 2.
- Проверить, что вариант “Option 2” (значение с индексом 2) успешно выбран.
Реализация
Для выбора значений в выпадающем списке по индексам создаем новый тестовый метод testSelectByIndex().
@Test
public void testSelectByIndex() {
this.page.navigate("https://the-internet.herokuapp.com/dropdown");
final Locator dropdownField = this.page.locator("#dropdown");
dropdownField.selectOption(new SelectOption().setIndex(2));
final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
assertEquals(dropdownFieldSelectedValue, "Option 2");
}
Метод setIndex() из класса SelectOption позволяет выбрать значение в выпадающем списке по его индексу.
dropdownField.selectOption(new SelectOption().setIndex(2));
Значение с индексом 2 — это “Option 2”. Это можно увидеть на скриншоте из браузера Chrome:
В конце вызывается метод assertEquals(), чтобы убедиться, что в выпадающем списке выбрано правильное значение (“Option 2”).
Тестовый сценарий 4
В этом сценарии мы будем выбирать опцию в выпадающем списке по её значению. Демонстрация выполняется на странице Select Dropdown List сайта LambdaTest Selenium Playground.
- Перейти на страницу Select Dropdown List сайта LambdaTest Selenium Playground.
- Найти выпадающий список и выбрать опцию “Wednesday”.
- Проверить, что опция “Wednesday” успешно выбрана. Для этого проверить текст, отображаемый под полем после выбора значения.
Реализация
Для демонстрации выбора опций в выпадающем списке по их значению создаем новый тестовый метод testSelectByValue().
@Test
public void testSelectByValue() {
this.page.navigate("https://www.lambdatest.com/selenium-playground/select-dropdown-demo");
final Locator dropdownField = this.page.locator("#select-demo");
dropdownField.selectOption(new SelectOption().setValue("Wednesday"));
}
Код сначала переходит на страницу Select Dropdown List на сайте LambdaTest Selenium Playground. Затем находит поле выпадающего списка с использованием селектора #select-demo.
Метод setValue() класса SelectOption выбирает опцию “Wednesday” в выпадающем списке. Для проверки правильности выбранного значения используется текст, отображаемый под полем выпадающего списка. Текст извлекается с помощью селектора .pt-10 p.
final Locator daySelected = this.page.locator(".pt-10 p");
assertThat(daySelected).hasText("Day selected :- Wednesday");
Фреймворк Playwright имеет встроенные ассерты, которые можно использовать для проверки значений, выбранных в выпадающем списке. Метод assertThat() проверяет, что в локаторе daySelected содержится текст “Day selected :- Wednesday”.
Тестовый сценарий 5
В этом сценарии мы проверим, как выбрать несколько значений из выпадающего списка с множественным выбором и проверить, что нужные опции успешно выбраны.
- Перейти на страницу Select Dropdown List сайта LambdaTest Selenium Playground.
- Найти выпадающий список с множественным выбором и выбрать следующие значения: “New York”, “Texas”, “California”.
- Выбрать опцию “Washington” с использованием её индекса.
- Проверить, что соответствующие опции успешно выбраны.
Реализация
Создаем новый тестовый метод testMultiSelectOptions() в классе DropdownTests.
@Test
public void testMultiSelectOptions() {
this.page.navigate("https://www.lambdatest.com/selenium-playground/select-dropdown-demo");
final Locator dropdownField = this.page.locator("#multi-select");
dropdownField.selectOption(new SelectOption[]{
new SelectOption().setLabel("New York"),
new SelectOption().setLabel("Texas"),
new SelectOption().setValue("California"),
new SelectOption().setIndex(7)
});
assertThat(dropdownField).hasValues(new Pattern[]{
Pattern.compile("California"),
Pattern.compile("New York"),
Pattern.compile("Texas"),
Pattern.compile("Washington")
});
}
В начале метода происходит переход на страницу Select Dropdown List и поиск поля выпадающего списка с множественным выбором с использованием селектора #multi-select.
С помощью метода selectOption() можно выбрать несколько значений в поле. Для этого нужно передать массив в качестве параметра метода.
В предыдущих сценариях для выбора нужных опций мы использовали методы setValue(), setIndex(), setLabel(). Эти же методы используются для выбора нескольких значений:
dropdownField.selectOption(new SelectOption[]{
new SelectOption().setLabel("New York"),
new SelectOption().setLabel("Texas"),
new SelectOption().setValue("California"),
new SelectOption().setIndex(7)
});
Первые две опции, “New York” и “Texas”, выбираются с помощью метода setLabel(), а “California” — с помощью метода setValue(). Опция “Washington” выбирается методом setIndex(). Индекс значения “Washington” в выпадающем списке — 7, поэтому в метод setIndex() передаётся число 7.
Для проверки правильности выбранных значений метод assertThat() используется вместе с hasValues(), который принимает несколько значений в качестве параметра:
assertThat(dropdownField).hasValues(new Pattern[]{
Pattern.compile("California"),
Pattern.compile("New York"),
Pattern.compile("Texas"),
Pattern.compile("Washington")
});
Значения могут быть переданы с помощью класса Pattern и вызова метода compile(), который принимает значения в строковом формате. Значения, которые нужно проверить, передаются в метод compile() в качестве параметра.
Выполнение тестов
Чтобы легко выполнить все связанные тесты, помещаем все 5 тестовых сценариев в один файл – testng.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Browser Navigation test suite">
<test name="Browser navigation tests using Playwright on Chrome">
<classes>
<class name="io.github.mfaisalkhatri.tests.DropdownTests">
<methods>
<include name="testSelectByOption"/>
<include name="testSelectByLabel"/>
<include name="testSelectByIndex"/>
<include name="testSelectByValue"/>
<include name="testMultiSelectOptions"/>
</methods>
</class>
</classes>
</test>
</suite>
Теперь давайте запустим файл testng.xml в IntelliJ IDE.
Резюме
В этой статье мы показали, как работать с выпадающими списками с одиночным и множественным выбором с помощью Playwright и Java. Мы также рассмотрели встроенные в Playwright ассерты, которые можно использовать для проверки значений, выбранных в выпадающем списке.
Надеемся, вы получили хорошее представление о работе с выпадающими списками с помощью Playwright. Теперь попробуйте выполнить эти тесты самостоятельно, чтобы получить практический опыт работы с этим фреймворком.
Перевод статьи «Playwright Java Tutorial: Web Automation Testing | How to handle Single and Multi select dropdowns using Playwright?».
Пингбэк: Как работать с текстовыми полями в Playwright?