Работа с формами логина

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

Основные элементы формы логина

Типичная форма логина состоит из нескольких ключевых элементов:

  • Поля для ввода логина и пароля.
  • Кнопка отправки формы.
  • Сообщения об ошибке, если введённые данные некорректны.

Для успешного тестирования формы необходимо взаимодействовать с каждым из этих элементов. Для этого Playwright предоставляет удобные методы для поиска, ввода текста, нажатия кнопок и проверки отображаемых сообщений.

Поиск элементов формы

В Playwright для поиска элементов на странице можно использовать несколько методов. Для работы с формами логина обычно применяются селекторы по типу input, button и другие. Пример простого поиска:

const usernameInput = await page.locator('input[name="username"]');
const passwordInput = await page.locator('input[name="password"]');
const submitButton = await page.locator('button[type="submit"]');

Здесь используется метод locator, который позволяет эффективно искать элементы по CSS-селекторам. В случае с формой логина поиск осуществляется по атрибутам name полей.

Ввод данных в поля

Для ввода данных в поля логина и пароля Playwright предлагает метод fill(). Этот метод позволяет задать значение поля, имитируя поведение пользователя. Пример:

await usernameInput.fill('testuser');
await passwordInput.fill('password123');

После ввода данных можно отправить форму с помощью кнопки отправки.

Отправка формы

Отправить форму можно с помощью метода click() на кнопке. Это имитирует нажатие пользователем кнопки “Войти” или аналогичной.

await submitButton.click();

Этот шаг приведёт к выполнению аутентификации и редиректу на другую страницу, если данные корректны, или к отображению сообщения об ошибке в случае некорректных данных.

Проверка ошибок при вводе

В случае неправильного ввода данных часто отображаются сообщения об ошибке. Для проверки этих сообщений можно использовать метод locator для поиска элементов, которые содержат текст ошибки. Пример:

const errorMessage = await page.locator('.error-message');
await expect(errorMessage).toHaveText('Неверный логин или пароль');

Здесь expect используется для проверки, что элемент с ошибкой содержит нужный текст.

Проверка успешного входа

Тестирование успешного логина также важно. После отправки корректных данных можно ожидать, что произойдёт редирект на другую страницу. В Playwright можно использовать метод waitForNavigation(), чтобы убедиться, что переход на другую страницу был выполнен:

await Promise.all([
  submitButton.click(),
  page.waitForNavigation({ url: 'https://example.com/dashboard' })
]);

Этот код гарантирует, что после клика по кнопке входа произойдёт переход на страницу с URL, соответствующий личному кабинету пользователя или другому защищённому ресурсу.

Работа с капчей

Капча — распространённая мера защиты от автоматических ботов. Однако тестирование с капчей требует отдельных подходов. Для bypass капчи можно использовать несколько техник, в зависимости от вида капчи:

  1. Использование API для обхода — некоторые сервисы предоставляют API для автоматического обхода капчи.
  2. Вручную введённый ответ — для тестовых целей можно закодировать решение капчи в тестах.
  3. Ожидание скрытия капчи — если капча является лишь временным барьером, можно настроить ожидание её скрытия перед тестированием.
// Пример с ожиданием исчезновения капчи
await page.locator('.captcha').waitFor({ state: 'hidden' });

Обработка редиректов и задержек

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

await page.waitForURL('https://example.com/dashboard');

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

Взаимодействие с элементами, скрытыми на странице

Иногда элементы формы логина могут быть скрыты в зависимости от состояния страницы или пользовательского интерфейса. Например, поле ввода пароля может быть скрыто до тех пор, пока не введён правильный логин. В Playwright можно ожидать появления скрытых элементов с помощью метода waitForSelector():

await page.locator('input[name="password"]').waitFor();

Этот метод будет ожидать появления элемента на странице, прежде чем продолжить тестирование.

Работа с несколькими вкладками

Если форма логина использует несколько вкладок или модальные окна для аутентификации (например, через OAuth), в Playwright можно работать с вкладками и окнами браузера. Для переключения между вкладками используется объект browserContext.

const [newTab] = await Promise.all([
  context.waitForEvent('page'),
  submitButton.click(),
]);
await newTab.waitForLoadState();

Этот код переключает фокус на новую вкладку, которая появляется после нажатия кнопки входа.

Заключение

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

Оглавление