Как работать с текстовыми полями в Playwright?

В предыдущей статье «Как работать с выпадающими списками в Playwright?» мы научились выбирать значения из списков с одиночным и множественным выбором. В этой статье мы будем изучать, как работать с текстовыми полями в Playwright с использованием Java. Текстовые поля позволяют пользователю добавлять или редактировать текст. Они используются в различных формах, окнах входа, на страницах регистрации и в других местах, где требуется ввод от пользователя.

Тестирование текстовых полей

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

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

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Как работать с текстовыми полями с использованием Java?

При выполнении автоматизированного тестирования с использованием Playwright и Java можно провести все необходимые проверки, чтобы убедиться, что текстовое поле работает корректно. Эти проверки включают:

1. Доступность поля для редактирования
2. Перемещение текущего фокуса на текстовое поле
3. Ввод значения в поле
4. Проверку значения, введенного в поле
5. Очистку поля и оставление его пустым
6. События нажатия клавиш в текстовом поле

Выполнение этих проверок поможет убедиться в корректной работе веб-приложения.

Перед тем как приступить к демонстрации работы с текстовым полем, стоит отметить, что Playwright предоставляет удобные стратегии локаторов для легкого поиска текстовых полей:

• getByLabel()
• getByPlaceholder()
• getByRole()

Давайте используем страницу с контактной формой на демонстрационном сайте Practice Software Testing Tool Shop и найдем поле «First Name» с помощью указанных стратегий локаторов Playwright.

Тестовый сценарий 1. Поиск текстового поля с помощью метода getByLabel() и ввод значений в поле

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «First Name» с помощью стратегии локатора getByLabel.
3. Введите корректное имя в поле

Реализация

Прежде чем приступить к написанию автоматизированных тестов, давайте обсудим настройку и конфигурацию.

Создадим новый тестовый класс TextFieldTest.java в пакете tests. Для удобства выполнения тестов интерфейсы Playwright и Page объявлены как глобальные переменные в классе и инициализируются в методе setup(), который аннотирован с помощью аннотации TestNG @BeforeClass.

public class TextFieldTest {

    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();
    }
}

Эта аннотация позволяет методу setup() запускаться перед выполнением любых тестов, создавая новые экземпляры Playwright и интерфейса Page, которые можно использовать в тестах.

Для автоматизации первого тестового сценария создаем новый метод locateFirstNameByLabel().

  @Test
public void locateFirstNameByLabel() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator firstNameField = page.getByLabel("First name");
    firstNameField.fill("Faisal");
}

Код сначала переходит на страницу контактов сайта. Он находит поле «First Name» по метке «First name». Затем в поле вводится значение «Faisal» с помощью метода fill().

Тестовый сценарий 2. Поиск текстового поля с помощью метода getByPlaceholder()

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «First Name» с помощью стратегии локатора getByPlaceholder.
3. Введите значение «John» в поле.

Реализация

Для автоматизации второго тестового сценария создадим новый метод locateFirstNameByPlaceholder(). Этот метод находит поле «First Name» с использованием текста плейсхолдера — «Your first name *». Затем используется метод fill() для ввода значений в поле.

@Test
public void locateFirstNameByPlaceholder() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator firstNameField = page.getByPlaceholder("Your first name *");
    firstNameField.fill("John");
}

Код выполняет переход на страницу контактов сайта, находит поле «First Name» по тексту плейсхолдера «Your first name *» и вводит значение «John» в поле с помощью метода fill().

При выполнении теста поле успешно находится, и значение «John» вводится в него.

Тестовый сценарий 3. Поиск текстового поля с помощью метода getByRole()

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «First Name» с помощью стратегии локатора getByRole.
3. Введите значение «Tom» в поле.

Реализация

Создадим новый тестовый метод locateFirstNameByRole(), который находит поле «First Name» с использованием стратегии локатора getByRole и вводит значение «Tom» в это поле.

   @Test
public void locateFirstNameByRole() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator firstNameField = page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("First name"));
    firstNameField.fill("Tom");
}

Поскольку поле является текстовым, используется опция AriaRole.TEXTBOX, а следующим параметром передаётся имя поля «First name». В конце используется метод fill() для ввода значения в поле.

Итак, мы познакомились с некоторыми стратегиями локаторов в научились вводить значения в текстовые поля. Идём дальше.

Бывает, необходимо сначала поместить поле в фокус, а затем взаимодействовать с ним. В следующем сценарии мы рассмотрим, как установить фокус на поле.

Тестовый сценарий 4. Фокусировка на текстовом поле

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «Email Address» и установите на него фокус.
3. Проверьте, установлен ли фокус, используя проверку (assertion) на поле.

Реализация

Внутри класса TextFieldTest создадим новый тестовый метод testFocusOnField(). Этот метод находит поле «Email Address» и устанавливает на него фокус.

@Test
public void testFocusOnField() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator emailAddressField = page.getByLabel("Email address");
    emailAddressField.focus();
    assertThat(emailAddressField).isFocused();
}

Метод focus() используется для установки фокуса на поле. В конце ассерт проверяет, был ли фокус успешно установлен на поле «Email Address». Метод isFocused() позволяет убедиться, что тестируемое поле находится в фокусе.

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

Тестовый сценарий 5. Получение значений из текстового поля

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «Email Address» и введите значение «faisal.k@demo.com».
3. Проверьте, что значение, введенное в поле, получено корректно.

Реализация

Для тестирования этого сценария создадим новый тестовый метод testGetValuesFromTextField(). Поле «Email Address» находится с помощью метода getByLabel(), а значения вводятся в поле с помощью метода fill().

@Test
public void testGetValuesFromTextField() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator emailAddressField = page.getByLabel("Email address");

    String emailAddress = "faisal.k@demo.com";
    emailAddressField.fill(emailAddress);

    String emailValue = emailAddressField.inputValue();
    System.out.println(emailValue);

    assertThat(emailAddressField).hasValue(emailValue);
}

Для получения значений из текстового поля используется метод inputValue(). Этот метод возвращает значение для соответствующего элемента <input>, <textarea> или <select> в виде строки. После извлечения значения оно выводится в консоль.

В конце утверждение (assert) проверяет, что поле «Email Address» содержит значение, которое было введено.

В следующем сценарии мы узнаем, как очистить значения, присутствующие в поле, чтобы не добавлять новые значения к уже существующим.

Тестовый сценарий 6. Очистка поля от введенных значений

1. Перейдите на страницу «Contact» демо-сайта Practice Software Testing.
2. Найдите поле «Message» и введите сообщение в поле.
3. Очистите поле «Message» и введите новое сообщение.
4. Получите последнее значение, введенное в поле, и убедитесь, что поле было очищено и содержит только последнее сообщение.

Реализация

Для этого сценария создадим новый тестовый метод testClearFieldValues(). Этот метод сначала находит поле «Message» с помощью метода getByLabel(). Затем он вводит сообщение, указанное в строковой переменной messageOne. После ввода первого сообщения поле очищается с помощью метода clear().

@Test
public void testClearFieldValues() {
    page.navigate("https://practicesoftwaretesting.com/contact");
    Locator messageField = page.getByLabel("Message *");
    String messageOne = "This is the first message";
    messageField.fill(messageOne);

    messageField.clear();
    String messageTwo = "This is the second message";
    messageField.fill(messageTwo);

    assertThat(messageField).hasValue(messageTwo);
}

После очистки поля вводится второй текст сообщения — «This is the second message», который сохранен в строковой переменной messageTwo. В конце выполняется проверка, чтобы убедиться, что поле содержит значение из переменной messageTwo.

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

Тестовый сценарий 7. Нажатие клавиш

1. Перейдите на страницу «Key Presses» на демо-сайте The Internet Heroku app.
2. Нажмите несколько случайных клавиш на клавиатуре.
3. Проверьте, были ли клавиши нажаты правильно.

Реализация

Для обработки сценария нажатия клавиш создадим новый тестовый метод testKeyPress(). Тест сначала переходит на страницу «Key Presses» демо-сайта The Internet Herokuapp. Затем он находит текстовое поле, которое принимает нажатия клавиш в качестве ввода.

@Test
public void testKeyPress() {
    page.navigate("https://the-internet.herokuapp.com/key_presses");
    Locator textBox = page.locator("#target");
    textBox.press("Alt");
    Locator resultText = page.locator("p#result");

    assertThat(resultText).containsText("ALT");

    textBox.press("Shift");
    assertThat(resultText).containsText("SHIFT");

    textBox.press("N");
    assertThat(resultText).containsText("N");

    textBox.press("9");
    assertThat(resultText).containsText("9");
}

Метод press() в Playwright используется для выполнения действия нажатия клавиш.

Ниже приведены некоторые события нажатия клавиш, которые можно использовать с методом press():

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1 — F12, Digit0 — Digit9, KeyA — KeyZ и другие.

Первое нажатие выполняется нажатием клавиши «ALT». Когда нажата определенная клавиша, страница отображает соответствующее имя клавиши ниже поля. Этот текст имени клавиши находится с помощью локатора resultText. В конце выполняется проверка, чтобы убедиться, что отображается правильное имя нажатой клавиши.

Аналогично, другие строки кода выполняют нажатие различных клавиш (Shift, буква «N», цифра «9»), а также выполняют соответствующие проверки.

Заключение

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

Мы изучили, как находить текстовые поля с помощью разных стратегий локаторов, таких как getByLabel(), getByPlaceholder() и getByRole(). Мы научились вводить и очищать значения, фокусироваться на полях, а также проверять корректность введенных данных. Кроме того, мы узнали, как выполнять нажатия клавиш на клавиатуре с использованием Playwright.

Тестирование текстовых полей имеет большое значение, так как они собирают важную информацию от пользователей. Автоматизация тестирования с помощью Playwright и Java позволяет быстрее находить ошибки и улучшать качество веб-приложений.

Экспериментируйте с различными типами проверок, сценариями и локаторами. Это поможет вам лучше понять функциональные возможности Playwright и повысит ваши навыки в автоматизации тестирования.

Успешного тестирования и новых открытий в автоматизации!

Перевод статьи «Playwright Java Tutorial: Web Automation Testing | How to work with text fields?».