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

1 Комментарий / 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, которые можно использовать в тестах.

Для автоматизации тестового сценария 1 создаем новый метод 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” в поле.

Реализация

Для автоматизации тестового сценария 2 создадим новый метод locateFirstNameByPlaceholder(). Этот метод находит поле “First Name” с использованием текста Placeholder — “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” с помощью текста Placeholder “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() используется для установки фокуса на поле. В конце проверка (assertion) проверяет, был ли фокус успешно установлен на поле “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. Получите последнее значение, введенное в поле, и выполните проверку (assert), чтобы убедиться, что поле было очищено и содержит только последнее сообщение.

Реализация

Для этого сценария создадим новый тестовый метод 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 — Нажатие различных клавиш с использованием Playwright

  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, и в конце выполняется проверка (assert), чтобы убедиться, что отображается правильное имя нажатой клавиши.

Аналогично, другие строки кода выполняют нажатие различных клавиш, таких как нажатие клавиши Shift, нажатие буквы “N” и нажатие клавиши с числом “9”, а также выполняют соответствующие проверки.

Заключение

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

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

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

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

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

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

Похожие записи:

  1. Автоматизация тестирования с помощью Playwright
  2. Отчёты по результатам сквозного тестирования с использованием CodeceptJS, Playwright и Allure Report
  3. Как я увеличил скорость автотестов на Playwright в 1,5 раза
  4. Быстрое и практическое введение в Playwright

1 комментарий к “Как работать с текстовыми полями в Playwright?”

  1. Пингбэк: Быстрое и практическое введение в Playwright

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

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