Ввод текста: type(), clear()

В автоматизированном тестировании веб-приложений одним из базовых сценариев является работа с полями ввода. Cypress предоставляет удобные методы для взаимодействия с элементами формы: type() для ввода текста и clear() для очистки содержимого поля.

Метод type()

Метод type() используется для эмуляции ввода текста пользователем. Он поддерживает набор текста в любое поле ввода (<input>, <textarea>) и позволяет имитировать различные клавиши, включая специальные символы и модификаторы.

Синтаксис:

cy.get('селектор').type('текст', { options })
  • селектор — CSS или другой валидный селектор Cypress.
  • 'текст' — строка для ввода.
  • options — объект дополнительных параметров (необязательно).

Основные возможности:

  1. Имитация спецклавиш

Можно использовать специальные символы для имитации клавиш, например {enter}, {backspace}, {del}, {esc}, {tab}. Например:

cy.get('#search').type('Cypress{enter}')

Этот пример вводит текст и нажимает Enter.

  1. Использование модификаторов

Поддерживаются модификаторы клавиш: {ctrl}, {alt}, {shift}, {meta}. Например, ввод заглавной буквы с помощью Shift:

cy.get('#input').type('{shift}cypress{shift}')
  1. Настройка задержки между нажатиями

Иногда требуется имитировать реальный ввод пользователя с паузой между символами:

cy.get('#username').type('user123', { delay: 100 }) // 100 мс между нажатиями
  1. Ввод длинного текста или сложных последовательностей

type() поддерживает вставку текста в несколько шагов, включая комбинации клавиш и спецсимволов:

cy.get('#comment')
  .type('Hello, world!')
  .type('{enter}New line')
  .type('{selectall}{del}')

Метод clear()

Метод clear() удаляет содержимое поля ввода. Он часто используется перед новым вводом текста, чтобы гарантировать отсутствие старых значений.

Синтаксис:

cy.get('селектор').clear({ options })
  • селектор — элемент для очистки.
  • options — объект с параметрами (необязательно).

Примеры использования:

cy.get('#email').clear()
cy.get('#password').clear({ force: true })
  • force: true позволяет очистить поле даже если оно скрыто или недоступно для стандартного взаимодействия.

Важные особенности взаимодействия с type() и clear()

  1. Элементы должны быть видимыми и доступными для ввода

Cypress по умолчанию проверяет, что элемент видим и не заблокирован атрибутом disabled. Если поле скрыто, понадобится использовать { force: true }.

  1. Автоматическое ожидание

Cypress автоматически ожидает, пока элемент станет доступным. Это избавляет от необходимости вручную добавлять wait().

  1. События ввода

Методы type() и clear() вызывают стандартные DOM-события: keydown, keypress, input, keyup, change. Это важно для корректного триггера логики в приложении.

  1. Комбинирование clear() и type()

Часто в тестах встречается комбинация очистки поля и нового ввода:

cy.get('#search')
  .clear()
  .type('Cypress automation{enter}')

Это гарантирует, что старые данные не повлияют на результат теста.

Особенности при работе с разными типами полей

  1. Текстовые поля (<input type="text">) и textarea

Полностью поддерживаются все функции type() и clear(). Можно эмулировать ввод многострочного текста с {enter}.

  1. Парольные поля (<input type="password">)

type() безопасно вводит текст без отображения символов в консоли Cypress. clear() работает стандартно.

  1. Поля с масками и форматированием

При работе с масками (например, даты или телефоны) иногда требуется симулировать ввод пошагово с задержкой и дополнительными проверками.

Практические рекомендации

  • Использовать clear() перед type(), если поле может содержать данные по умолчанию.
  • Избегать длинных последовательностей спецсимволов без необходимости, чтобы тесты оставались стабильными.
  • Проверять поведение событий: иногда приложение реагирует на change, а иногда на input.
  • Использовать delay только при необходимости, чтобы ускорить тесты.
  • Комбинировать с should('have.value', ...), чтобы проверять корректность ввода:
cy.get('#username')
  .clear()
  .type('admin')
  .should('have.value', 'admin')

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

Оглавление