type

Введите текст в элемент DOM.

Синтаксис

.type(text)
.type(text, options)

Использование

Правильное использование

cy.get('input').type('Hello, World') // Type 'Hello, World' into the 'input'

Неправильное использование

cy.type('Welcome') // Errors, cannot be chained off 'cy'
cy.url().type('www.cypress.io') // Errors, 'url' does not yield DOM element

Аргументы

text (Строка)

Текст, который нужно ввести в элемент DOM.

Текст, переданный в .type() может включать любые из специальных последовательностей символов ниже. Эти символы передадут правильные keyCode, key, и which коды в любые события, выпущенные во время .type(). Некоторые из специальных последовательностей символов могут выполнять действия во время набора текста, такие как {movetoend}, {movetostart}, или {selectall}.

Чтобы отключить разбор специальных последовательностей символов, установите опцию parseSpecialCharSequences в false.

Последовательность	Примечания
`{{}`	Вводит буквальный `{` ключ
`{backspace}`	Удаляет символ слева от курсора
`{del}`	Удаляет символ справа от курсора
`{downarrow}`	Перемещает курсор вниз
`{end}`	Перемещает курсор в конец строки
`{enter}`	Вводит ключ Enter
`{esc}`	Вводит ключ Escape
`{home}`	Перемещает курсор в начало строки
`{insert}`	Вставляет символ справа от курсора
`{leftarrow}`	Перемещает курсор влево
`{movetoend}`	Перемещает курсор в конец набираемого элемента
`{movetostart}`	Перемещает курсор в начало набираемого элемента
`{pagedown}`	Прокручивает вниз
`{pageup}`	Прокручивает вверх
`{rightarrow}`	Перемещает курсор вправо
`{selectall}`	Выделяет весь текст, создавая `selection range`
`{uparrow}`	Перемещает курсор вверх

Текст, переданный в .type() может также включать любые из этих последовательностей символов модификаторов:

Последовательность	Примечания
`{alt}`	Активирует модификатор `altKey`. Псевдонимы: `{option}`
`{ctrl}`	Активирует модификатор `ctrlKey`. Псевдонимы: `{control}`
`{meta}`	Активирует модификатор `metaKey`. Псевдонимы: `{command}`, `{cmd}`
`{shift}`	Активирует модификатор `shiftKey`

options (Объект)

Передайте объект options, чтобы изменить поведение по умолчанию .type().

Опция	Значение по умолчанию	Описание
`animationDistanceThreshold`	`animationDistanceThreshold`	Расстояние в пикселях, на которое элемент должен превысить значение со временем, чтобы быть рассматриваемым как анимированный.
`delay`	`10`	Задержка после каждого нажатия клавиши
`force`	`false`	Вынужденное выполнение действия, отключает ожидание действия
`log`	`true`	Отображает команду в Журнале команд
`parseSpecialCharSequences`	`true`	Обрабатывать специальные символы для строк, окруженных `{}`, таких как `{esc}`. Установите в `false` для ввода буквальных символов вместо
`release`	`true`	Удерживать активированным модификатор между командами
`scrollBehavior`	`scrollBehavior`	Позиция области просмотра, до которой элемент должен быть прокручен перед выполнением команды
`timeout`	`defaultCommandTimeout`	Время ожидания `.type()` для разрешения перед выходом за пределы времени ожидания
`waitForAnimations`	`waitForAnimations`	Ожидать завершения анимации элементов перед выполнением команды.

Возвращаемое значение

.type() возвращает тот же объект, который был передан из предыдущей команды.

Примеры

Input/Textarea

Ввод в текстовое поле.

cy.get('textarea').type('Hello world') // yields <textarea>

Посмотрите пример рецепта входа, набирая имя пользователя и пароль в HTML веб-формах

Имитирование поведения пользователя при наборе текста

Каждое нажатие клавиши по умолчанию задерживается на 10 мс, чтобы имитировать, как печатает очень быстрый пользователь!

cy.get('[contenteditable]').type('some text!')

'Выбор' элемента из списка значений

Для 'выбора' элемента просто введите его в поле ввода.

<input list="fruit" />
<datalist id="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cantaloupe</option>
</datalist>

cy.get('input').type('Apple')

Tabindex

Ввод в элемент, не являющийся элементом ввода или текстовым полем, с `tabindex`

<body>
  <div id="el" tabindex="1">This div can receive focus!</div>
</body>

cy.get('#el').type('supercalifragilisticexpialidocious')

Поля ввода даты

Использование .type() в поле ввода даты (<input type="date">) требует указания корректной даты в формате:

yyyy-MM-dd (например, 1999-12-31)

Это не совсем то, как пользователь вводит дату в поле ввода даты, но это обходное решение, так как поддержка полей ввода даты варьируется между браузерами, а формат варьируется в зависимости от региональных настроек. yyyy-MM-dd — формат, требуемый спецификацией W3, и именно это значение будет установлено в поле ввода независимо от браузера или региональных настроек.

Специальные символы ({leftarrow}, {selectall}, и т.д.) запрещены.

Поля ввода месяца

Использование .type() в поле ввода месяца (<input type="month">) требует указания корректного месяца в формате:

yyyy-MM (например, 1999-12)

Это не совсем то, как пользователь вводит месяц в поле ввода месяца, но это обходное решение, так как поддержка полей ввода месяца варьируется между браузерами, а формат варьируется в зависимости от региональных настроек. yyyy-MM — формат, требуемый спецификацией W3, и именно это значение будет установлено в поле ввода независимо от браузера или региональных настроек.

Специальные символы ({leftarrow}, {selectall}, и т.д.) запрещены.

Поля ввода недели

Использование .type() в поле ввода недели (<input type="week">) требует указания корректной недели в формате:

yyyy-Www (например, 1999-W23)

Где W — буквальный символ 'W', а ww — номер недели (01-53).

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

Специальные символы ({leftarrow}, {selectall}, и т.д.) запрещены.

Поля ввода времени

Использование .type() в поле ввода времени (<input type="time">) требует указания корректного времени в формате:

HH:mm (например, 01:30 или 23:15)
HH:mm:ss (например, 10:00:30)
HH:mm:ss.SSS (например, 12:00:00.384)

Где HH — 00-23, mm — 00-59, ss — 00-59, а SSS — 000-999.

Специальные символы ({leftarrow}, {selectall}, и т.д.) запрещены.

Сочетания клавиш

При использовании специальных последовательностей символов можно активировать модификаторные клавиши и набирать сочетания клавиш, такие как CTRL+R или SHIFT+ALT+b. Одно сочетание клавиш может быть указано с помощью синтаксиса {modifier+key}.

Событие keydown срабатывает при активации модификатора, а событие keyup — при его отпускании.

Вы также можете использовать сочетания клавиш во время .click(), .rightclick() и .dblclick() с помощью соответствующих опций. Подробнее см. в каждой документации.

Ввод сочетания клавиш

// This is the same as a user holding down SHIFT and ALT, then pressing b
// The modifiers are released before typing 'hello'
cy.get('input').type('{shift+alt+b}hello')

Когда модификатор указан самостоятельно, он останется активным на протяжении всего времени выполнения команды .type(), и освобождается, когда набираются все последующие символы. Однако, можно передать {release: false} в качестве параметра.

// This is the same as a user holding down SHIFT and ALT, then typing 'hello'
// The modifiers are held for the duration of the command.
cy.get('input').type('{shift}{alt}hello')

Тип литерал `{` или `}` символы

Чтобы отключить разбор последовательностей специальных символов, установите параметр parseSpecialCharSequences в значение false.

cy.get('#code-input')
  // will not escape { } characters
  .type('function (num) {return num * num;}', {
    parseSpecialCharSequences: false,
  })

Удерживание модификатора и ввод слова

// all characters after {ctrl} will have 'ctrlKey'
// set to 'true' on their key events
cy.get('input').type('{ctrl}test')

Поведение при отпускании

По умолчанию модификаторы отпускаются после каждой команды ввода.

// 'ctrlKey' will be true for each event while 'test' is typed
// but false while 'everything' is typed
cy.get('input').type('{ctrl}test').type('everything')

Чтобы сохранить модификатор активным между командами, укажите {release: false} в параметрах.

// 'altKey' will be true while typing 'foo'
cy.get('input').type('{alt}foo', { release: false })
// 'altKey' will also be true during 'get' and 'click' commands
cy.get('button').click()

Модификаторы автоматически отпускаются между тестами, даже с {release: false}.

it('has modifiers activated', () => {
  // 'altKey' will be true while typing 'foo'
  cy.get('input').type('{alt}foo', { release: false })
})

it('does not have modifiers activated', () => {
  // 'altKey' will be false while typing 'bar'
  cy.get('input').type('bar')
})

Чтобы вручную отпустить модификаторы в рамках теста после использования {release: false}, используйте другую команду type, и модификатор будет отпущен после неё.

// 'altKey' will be true while typing 'foo'
cy.get('input').type('{alt}foo', { release: false })
// 'altKey' will be true during the 'get' and 'click' commands
cy.get('button').click()
// 'altKey' will be released after this command
cy.get('input').type('{alt}')
// 'altKey' will be false during the 'get' and 'click' commands
cy.get('button').click()

Глобальные сочетания клавиш

.type() требует фокусируемого элемента в качестве объекта, поскольку обычно предназначен для ввода в элемент ввода или текстовое поле. Хотя существуют несколько случаев, когда допустимо «вводить» в элемент, отличный от элемента ввода или текстового поля:

Сочетания клавиш, где слушатель находится на document или body.
Удержание модификаторов и щелчок по произвольному элементу.

Для поддержки этого можно использовать body в качестве элемента DOM для ввода (даже если это не фокусируемый элемент).

Использование сочетаний клавиш в теле документа

// all of the type events are fired on the body
cy.get('body').type(
  '{uparrow}{uparrow}{downarrow}{downarrow}{leftarrow}{rightarrow}{leftarrow}{rightarrow}ba'
)

Нажатие Shift + щелчок

// execute a SHIFT + click on the first <li>
// {release: false} is necessary so that
// SHIFT will not be released after the type command
cy.get('body').type('{shift}', { release: false }).get('li:first').click()

Параметры

Принудительный ввод независимо от его состояния

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

cy.get('input[type=text]').type('Test all the things', { force: true })

Примечания

Поддерживаемые элементы

^HTML <body> и <textarea> элементы.
Элементы с определённым tabindex атрибутом.
Элементы с определённым contenteditable атрибутом.
^HTML <input> элементы с определённым type атрибутом одного из следующих значений:
- text
- password
- email
- number
- date
- week
- month
- time
- datetime-local
- search
- url
- tel

Действительность

.type() - это «команда действия», которая следует всем правилам Действительности.

События

Когда элемент не сфокусирован

Если элемент в данный момент не сфокусирован, перед отправкой любых нажатий клавиш Cypress сначала отправит .click() элементу, чтобы перевести его в фокус.

События, которые генерируются

После того, как элемент получит фокус, Cypress начнёт генерировать события клавиатуры.

Следующие события будут генерироваться в соответствии с нажатой клавишей, идентично спецификации события:

keydown
keypress
beforeinput
textInput
input
keyup

Кроме того, события change будут генерироваться либо при нажатии клавиши {enter} (и значение изменилось с момента последнего события фокуса), либо при потере элемента фокуса. Это соответствует поведению браузера.

События, которые не должны генерироваться для типов элементов, не являющихся элементами ввода, таких как элементы с tabindex не генерируют события textInput или input. Только ввод в элементы, изменяющие фактическое значение или текст, вызовет эти события.

Генерация событий

Были реализованы следующие правила, соответствующие поведению реального браузера (и спецификации):

Cypress учитывает отмену последующих событий, если предыдущие были отменены.
Cypress сгенерирует событие keypress только в том случае, если эта клавиша должна фактически генерировать keypress.
Cypress сгенерирует событие textInput только в том случае, если нажатие этой клавиши ввело фактический символ.
Cypress сгенерирует событие input только в том случае, если нажатие этой клавиши изменит или модифицирует значение элемента.

Отмена событий

Cypress учитывает все стандартное поведение браузера при отмене событий.

// prevent the characters from being inserted
// by canceling keydown, keypress, or textInput
$('#username').on('keydown', (e) => {
  e.preventDefault()
})

// Cypress will not insert any characters if keydown, keypress, or textInput
// are cancelled - which matches the default browser behavior
cy.get('#username').type('bob@gmail.com').should('have.value', '') // true

Отмена `mousedown` не предотвращает ввод

В реальном браузере отмена mousedown в поле формы предотвратит получение им фокуса и, следовательно, предотвратит ввод. В настоящее время Cypress этого не учитывает. Создайте проблему, если вам нужно, чтобы это было исправлено.

Таблица событий клавиш

Cypress отображает таблицу событий клавиш, подробно описывающую нажатые клавиши при нажатии на «ввод» в Журнале команд. Каждый символ будет содержать which код символа и события, произошедшие в результате нажатия клавиши.

События, которые были defaultPrevented могут предотвратить срабатывание других событий, и они будут отображаться как пустые. Например, отмена keydown не сгенерирует события keypress или textInput или input, но сгенерирует keyup (что соответствует спецификации).

Кроме того, события, которые вызывают срабатывание события change (например, набирая {enter}) будут отображаться со столбцом события change как true.

Любые модификаторы, активные для события, также перечислены в столбце modifiers.

Переключение табуляцией

Нажатие клавиши `tab` не работает

Временно можно использовать экспериментальный плагин cypress-plugin-tab и проголосовать за эту проблему.

Модификаторы

Влияние модификаторов

В реальном браузере, если пользователь удерживает SHIFT и набирает a, в поле ввода будет набран заглавный символ A. В настоящее время Cypress не моделирует это поведение.

Модификаторы моделируются установкой соответствующих значений в true для событий нажатия клавиш и щелчков. Так, например, активация модификатора {shift} установит event.shiftKey в значение true для любых событий нажатия клавиш, например, keydown.

// app code
document.querySelector('input:first').addEventListener('keydown', (e) => {
  // e.shiftKey will be true
})

// in test
cy.get('input:first').type('{shift}a')

В приведённом выше примере будет набран символ a в нижнем регистре, так как это указанный буквальный символ. Чтобы набрать заглавный символ A, можно использовать .type('{shift}A') (или .type('A'), если не важны свойства shiftKey в любых событиях нажатия клавиш).

Это верно и для других специальных сочетаний клавиш (которые могут зависеть от операционной системы). Например, на macOS нажатие ALT + SHIFT + K создаёт специальный символ . Как и в случае с прописными буквами, .type() не выведет , а символ k.

Аналогично, модификаторы не влияют на стрелки и клавиши удаления. Например, {ctrl}{backspace} не удалит целое слово. Создайте проблему, если вам необходимо реализовать влияние модификаторов.

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

Неявное поведение при отправке формы

Cypress автоматически соответствует спецификации и поведению браузера при нажатии клавиши {enter} при вводе, относящемся к <form>.

Это поведение определено здесь: Неявная отправка формы.

Например, следующее действие отправит форму.

<form action="/login">
  <input id="username" />
  <input id="password" />
  <button type="submit">Log In</button>
</form>

cy.get('#username').type('bob@burgers.com')
cy.get('#password').type('password123{enter}')

Поскольку существует несколько inputs и одна кнопка submit, Cypress отправляет форму (и генерирует события отправки) а также синтетическое событие click элементу button.

Спецификация определяет кнопку «отправить» как первую кнопку input[type=submit] или button[type!=button] из формы.

Кроме того, Cypress обрабатывает ещё 4 ситуации, как определено в спецификации:

Не отправляет форму, если существует несколько элементов ввода и нет кнопки submit.
Не отправляет форму, если кнопка submit отключена.
Отправляет форму, но не генерирует синтетическое событие click, если есть 1 input и нет кнопки submit.
Отправляет форму и генерирует синтетическое событие click элементу submit , если он существует.

Если событие submit формы preventedDefault, форма не будет отправлена.

Правила

Требования

.type() требует цепочки команд, возвращающих элементы DOM.

Утверждения

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

Таймауты

.type() может превысить время ожидания, пока элемент достигнет действующего состояния .
.type() может превысить время ожидания, пока не пройдут добавленные проверки.

Журнал команд

Введите текст в поле ввода

cy.get('input[name=firstName]').type('Jane Lane')

Вышеперечисленные команды будут отображаться в журнале команд как:

При нажатии на type в журнале команд, в консоли отображается следующее:

История

Версия	Изменения
6.1.0	Добавлен параметр `scrollBehavior`
5.6.0	Поддержка синтаксиса для сочетаний одиночных клавиш
5.5.0	Поддержка события `beforeinput`
3.4.1	Добавлен параметр `parseSpecialCharSequences`
3.3.0	Добавлены последовательности символов `{insert}`, `{pageup}` и `{pagedown}`
3.2.0	Добавлены последовательности символов `{home}` и `{end}`
0.20.0	Поддержка ввода в поля ввода типа `date`, `time`, `month`, и `week`
0.17.1	Добавлены модификаторы клавиатуры `ctrl`, `cmd`, `shift`, и `alt`
0.16.3	Поддержка ввода в элементы с атрибутом `tabindex`
0.16.2	Добавлены последовательности символов `{downarrow}` и `{uparrow}`
0.8.0	Вывод таблицы событий клавиш в консоль при нажатии
0.8.0	Добавлены последовательности символов `{selectall}`, `{del}`, `{backspace}`, `{esc}`, `{{}`, `{enter}`, `{leftarrow}`, `{rightarrow}`
0.8.0	Добавлена небольшая задержка (10 мс) между нажатиями клавиш во время `cy.type()`
0.6.12	Добавлен параметр `force`

type

Синтаксис

Использование

Аргументы

Возвращаемое значение

Примеры

Input/Textarea

Ввод в текстовое поле.

Ввод в форму входа

Имитирование поведения пользователя при наборе текста

'Выбор' элемента из списка значений

Tabindex

Ввод в элемент, не являющийся элементом ввода или текстовым полем, с tabindex

Поля ввода даты

Поля ввода месяца

Поля ввода недели

Поля ввода времени

Сочетания клавиш

Ввод сочетания клавиш

Тип литерал { или } символы

Удерживание модификатора и ввод слова

Поведение при отпускании

Глобальные сочетания клавиш

Использование сочетаний клавиш в теле документа

Нажатие Shift + щелчок

Параметры

Принудительный ввод независимо от его состояния

Примечания

Поддерживаемые элементы

Действительность

События

Когда элемент не сфокусирован

События, которые генерируются

Генерация событий

Отмена событий

Отмена mousedown не предотвращает ввод

Таблица событий клавиш

Переключение табуляцией

Нажатие клавиши tab не работает

Модификаторы

Влияние модификаторов

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

Неявное поведение при отправке формы

Правила

Требования

Утверждения

Таймауты

Журнал команд

История

См. также

Ввод в элемент, не являющийся элементом ввода или текстовым полем, с `tabindex`

Тип литерал `{` или `}` символы

Отмена `mousedown` не предотвращает ввод

Нажатие клавиши `tab` не работает