Cypress.io: Кухонная раковина
cy.get()
Чтобы запросить кнопку, используйте cy.get() команда.
cy.get('#query-btn').должен('содержать', 'Кнопка')
cy.get('.query-btn').should('содержать', 'Кнопка')
cy.get('#querying .well>button:first').should('contain', 'Button')
// ↲
// Используйте селекторы CSS так же, как jQuery Чтобы найти элементы по атрибуту данных, выполните запрос, используя атрибут селектор.
cy.get('[data-test-id="test-example"]').should('have.class', 'example') Div с data-test-id
cy.get() дает объект jQuery, вы можете получить его атрибут, вызвав метод .attr() .
cy.get('[data-test-id="test-example"]')
.invoke('атрибут', 'данные-тест-идентификатор')
.should('равно', 'пример теста')
// или вы можете получить свойство CSS элемента
cy.
b\w+/).should('иметь.класс', 'третий')
cy.get('.список-запросов')
.contains('яблоки').should('иметь.класс', 'первый')
// передача селектора для содержимого будет
// получаем селектор, содержащий текст
cy.get('#запрос')
.содержит('уль', 'апельсины')
.should('иметь.класс', 'список-запросов')
cy.get('.кнопка запроса')
.contains('Сохранить форму')
.should('иметь.класс', 'бтн') 
- яблоки
- апельсин
- бананы
- больше яблок
.внутри()
Мы можем найти элементы внутри определенного элемента DOM .внутри()
cy.get('.query-form').within(() => {
cy.get('input:first').should('have.attr', 'заполнитель', 'Электронная почта')
cy.get('input:last').should('have.attr', 'заполнитель', 'Пароль')
}) cy.root()
Мы можем найти корневой элемент DOM cy.root()
// По умолчанию root — это документ cy.
root().should('match', 'html')
cy.get('.query-ul').within(() => {
// Здесь корень теперь является элементом DOM ul
cy.root().should('have.class', 'query-ul')
}) - Один
- Два
- Пристегни мою обувь
Передовой опыт: выбор элементов
Предпочитайте выделенные атрибуты data-cy или data-test вместо имен классов CSS и идентификаторов элементов.
См. подробное обсуждение в Best Practices: Selecting elements
// Худший - слишком общий, без контекста
cy.get('кнопка').click()
// Плохо. В сочетании со стилем. Сильно подвержен изменениям.
cy.get('.btn.btn-large').click()
// Средний. В сочетании с атрибутом `name`, который имеет семантику HTML.
cy.get('[name=submission]').click()
// Лучше. Но все же в сочетании со стилями или прослушивателями событий JS.
cy.get('#main').click()
// Немного лучше. Использует идентификатор, но также гарантирует, что элемент
// имеет атрибут роли ARIA
cy. get('#main[роль=кнопка]').click()
// Намного лучше. Но все же в сочетании с текстовым содержанием, которое может измениться.
cy.contains('Отправить').click()
// Лучший. Изолирован от всех изменений.
cy.get('[data-cy=submit]').click() 
Атрибуты данных | Документация по jQuery Mobile API
Ссылка на атрибуты данных
Среда jQuery Mobile использует атрибуты HTML5 data- для обеспечения инициализации и настройки виджетов на основе разметки. Эти атрибуты совершенно необязательны; Также поддерживается вызов плагинов вручную и передача параметров напрямую. Чтобы избежать конфликтов имен с другими плагинами или фреймворками, которые также используют атрибуты data-, задайте пользовательское пространство имен, изменив нс глобальная опция.
Ссылки с data-role="button" . Кнопки на основе ввода, ссылки на панелях инструментов и элементы кнопок улучшаются автоматически, роль данных не требуется.
| данные уголки | правда | ложь |
|---|---|
| значок данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск |
| значок данных | левый | право | топ | дно | неттекст |
| data-iconshadow | правда | false |
| встроенные данные | правда | ложный |
| дата-мини | правда | false — Компактная версия |
| тень данных | правда | ложь |
| тема данных | буква образца (a-z) |
Пары меток и входов с type="checkbox" автоматически улучшаются, роль данных не требуется
| data-mini | правда | false — Компактная версия |
|---|---|
| роль данных | нет — предотвращает автоматическое улучшение для использования собственного элемента управления |
| тема данных | 9Образец буквы 0107 (a-z) — добавлен в элемент формы.
Заголовок и содержимое, завернутые в контейнер с data-role="collapsible"
| data-collapsed | правда | ложь |
|---|---|
| текст коллапса данных | Строка— текст, используемый для звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана. По умолчанию: «щелкните, чтобы свернуть содержимое» |
| значок свернутого данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь |
| тема содержания данных | буква образца (a-z) |
| данные-расширить-метку-текст | Строка— текст, используемый для звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана. По умолчанию: «щелкните, чтобы развернуть содержимое» |
| данные-развернутый значок | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск |
| значок данных | левый | право | топ | дно |
| вставка данных | правда | ложь |
| дата-мини | правда | false — Компактная версия |
| тема данных | буква образца (a-z) |
Несколько складных элементов, упакованных в контейнер с data-role="collapsibleset"
| data-collapsed-icon | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск |
|---|---|
| тема содержания данных | буква образца (a-z) — включает все складные элементы в наборе |
| данные-развернутый значок | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск |
| значок данных | левый | право | топ | дно | неттекст |
| вставка данных | правда | ложь |
| дата-мини | правда | false — Компактная версия |
| тема данных | буква образца (a-z) — включает все складные элементы в наборе |
Содержимое
Примечание.
Устарело в версии 1.4.0 и будет удалено в версии 1.5.0.
Контейнер с data-role="content"
| data-theme | буква образца (a-z) |
|---|
Контейнер DIV или FIELDSET с data-role="controlgroup" . Визуально интегрируйте несколько элементов в стиле кнопок.
| данные-исключение-невидимка | правда | false — указывает, следует ли исключать невидимых дочерних элементов при назначении закругленных углов |
|---|---|
| дата-мини | правда | false — Компактная версия для всех элементов контрольной группы |
| тема данных | буква образца (a-z) |
| тип данных | горизонтальный | по вертикали — Для горизонтального или вертикального выравнивания элементов |
Контейнер с data-role="dialog" или связанный с data-rel="dialog" на якоре.
| кнопка закрытия данных | левый | право | нет |
|---|---|
| данные-кнопка-текст | string — Текст для кнопки закрытия, только диалог. По умолчанию: «закрыть» |
| данные уголки | правда | ложь |
| кэш-памяти данных | правда | ложный |
| тема наложения данных | образец буквы (a-z) — тема наложения при открытии страницы в диалоговом окне |
| тема данных | буква образца (a-z) |
| название данных | строка — заголовок, используемый при отображении страницы |
Контейнер с data-enhance="false" или data-ajax="false"
| data-enhance | правда | ложь |
|---|---|
| данные-ajax | правда | ложь |
Любые элементы DOM внутри контейнера data-enhance="false" , за исключением элементов data-role="page|dialog" , будут игнорироваться во время первоначального улучшения и последующих создает событий при условии, что флаг $. установлен до улучшения (например, в привязке 
mobile.ignoreContentEnabled mobileinit ).
Любая ссылка или элемент формы внутри контейнеров data-ajax="false" будут игнорироваться функциями навигации платформы, если для параметра $.mobile.ignoreContentEnabled установлено значение true.
Контейнер поля
Контейнер с data-role="fieldcontain" , обернутым вокруг пары элементов этикетки/формы
Примечание. data-role="fieldcontain" устарело в jQuery Mobile 1.4.0 и будет удалено в 1.5.0. Вместо этого добавьте класс ui-field-contain .
Выберите с data-role="slider" и двумя опциями element
| data-mini | правда | false — Компактная версия |
|---|---|
| роль данных | нет — запрещает автоматическое улучшение для использования собственного элемента управления |
| тема данных | Образец буквы(a-z) — добавлен в элемент формы | .
| тема дорожки данных | Образец буквы(a-z) — добавлен в элемент формы | .
Ссылка
Ссылки, в том числе с data-role="button" , и кнопки отправки формы имеют общие атрибуты
| data-ajax | правда | ложь |
|---|---|
| направление данных | reverse — обратная анимация перехода (только для страницы или диалога) |
| кэш-памяти данных | правда | ложный |
| предварительная выборка данных | правда | ложный |
| данные-отн. | назад — для перехода на один шаг назад в истории диалог — для открытия ссылки в стиле диалога, не отслеживаемой в истории внешний — для ссылки на другой домен всплывающее окно — для открытия всплывающего окна |
| передача данных | выцветание | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет |
| данные-позиция-до | origin — центрирует всплывающее окно по ссылке, которая его открывает селектор jQuery — центрирует всплывающее окно по указанному элементу window — центрирует всплывающее окно в окне Примечание.  Параметр доступен только при использовании с всплывающими окнами. См. также: варианты. |
OL или UL с data-role="listview"
| data-autodividers | правда | ложный |
|---|---|
| тема подсчета данных | буква образца (a-z) — значение по умолчанию «null», унаследовано от родителя. Устарело с версии 1.4.0 и будет удалено в версии 1.5.0. |
| тема-разделителя данных | буква образца (a-z) — по умолчанию «нуль», унаследовано от родителя |
| фильтр данных | правда | ложный |
| фильтр данных-заполнитель | строка |
| тема фильтра данных | буква образца (a-z) |
| тема заголовка данных | буква образца (a-z) |
| значок данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь |
| вставка данных | правда | ложный |
| значок разделения данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск |
| тема разделения данных | буква образца (a-z) — по умолчанию «нуль», унаследовано от родителя |
| тема данных | буква образца (a-z) |
LI в списке
| data-filtertext | Строка— Фильтровать по этому значению вместо внутреннего текста |
|---|---|
| значок данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь |
| роль данных | список-разделитель |
| тема данных | буква образца (a-z) |
Атрибут data-icon применим только к элементу списка, если он содержит ссылку.
Количество LI , упакованных в контейнер с data-role="navbar"
| data-iconpos | слева | право | топ | дно | неттекст |
|---|
Чтобы добавить значки к элементам панели навигации, используется атрибут data-icon , указывающий стандартную мобильную иконку для каждого элемента.
Навбары наследуют образец темы от своего родительского контейнера. Установка атрибута data-theme для панели навигации не поддерживается. Атрибут data-theme можно установить отдельно для ссылок внутри панели навигации.
Контейнер с data-role="page"
| data-dom-cache | правда | ложный |
|---|---|
| тема наложения данных | буква-образец (a-z) — тема наложения, когда страница открывается как диалоговое окно |
| тема данных | буква образца (a-z) — по умолчанию «a» |
| название данных | строка — заголовок, используемый при отображении страницы |
| URL-адрес данных | URL-адрес — значение для обновления URL-адреса вместо URL-адреса, используемого для запроса страницы. Значение этого атрибута не должно быть в кодировке URI. Если ваш путь или имя файла содержит апострофы или кавычки, используйте кодировку сущности в значении, а не кодировку URL. Например, data-url="/path/to/ " Devil ' s Advocate " .html" |
Контейнер с data-role="popup"
| data-corners | правда | ложь |
|---|---|
| данные-отклонение | правда | false — если установлено значение false, всплывающее окно не закрывается щелчком за пределами всплывающего окна или нажатием клавиши Escape | .
| история данных | правда | false — устанавливает, будет ли всплывающее окно создавать элемент истории браузера при его открытии. Если установлено значение false, он не будет создавать элемент истории и, следовательно, его нельзя будет закрыть с помощью кнопки «Назад» в браузере. |
| тема наложения данных | образец буквы (a-z) — по умолчанию «нулевой» (прозрачный фон) |
| данные-позиция-до | происхождение | окно | selector — «origin» указывает, что всплывающее окно должно располагаться по центру ссылки, которая его открывает. «window» указывает, что оно должно располагаться по центру окна браузера. Если вы укажете селектор jQuery, он будет центрирован над первым элементом, возвращенным селектором, если этот элемент виден. В противном случае он будет центрирован в окне браузера. |
| тень данных | правда | ложь |
| тема данных | образец буквы (a-z) | none — унаследовано по умолчанию, «none» устанавливает прозрачность всплывающего окна |
| допуск данных | 30,15,30,15 — Расстояние от краев окна (сверху, справа, снизу, слева) |
| передача данных | нет | transition — переход, используемый при появлении/исчезновении всплывающего окна. |
Якорь с data-rel="popup" открывает всплывающее окно
| data-position-to | origin — Центрирует всплывающее окно по ссылке, которая его открывает Селектор jQuery — Центрирует всплывающее окно по указанному элементу window — Центрирует всплывающее окно в окне |
|---|---|
данные-отн. | popup — Для открытия всплывающего окна |
| передача данных | выцветание | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет — Переход для использования при показе/скрытии всплывающего окна |
Пары меток и входов с type="radio" автоматически расширяются, data-role не требуется
| data-mini | правда | false — Компактная версия |
|---|---|
| роль данных | нет — предотвращает автоматическое улучшение для использования собственного элемента управления |
| тема данных | Образец буквы(a-z) — добавлен к элементу формы |
Все выберите элементы формы автоматически улучшаются, роль данных не требуется
| разделитель данных | буква образца (a–z) — по умолчанию «b» — применимо только в том случае, если optgroup поддерживает поддержку неродного выбора |
|---|---|
| значок данных | главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь |
| значок данных | слева | справа | топ | дно | неттекст |
| встроенные данные | правда | ложный |
| дата-мини | правда | false — Компактная версия |
| родное меню данных | правда | ложь |
| тема наложения данных | буква-образец (a-z) — тема наложения для неродных элементов |
| заполнитель данных | правда | false — можно установить на параметр элемент неродного выбора |
| роль данных | нет — предотвращает автоматическое улучшение для использования собственного элемента управления |
| тема данных | Образец буквы(a-z) — добавлен в элемент формы | .
Входы с type="range" автоматически расширяются, роль данных не требуется
| выделение данных | правда | false — добавляет заполнение активного состояния на дорожку для обработки |
|---|---|
| дата-мини | правда | false — Компактная версия |
| роль данных | нет — предотвращает автоматическое улучшение для использования собственного элемента управления |
| тема данных | Образец буквы(a-z) — добавлен в элемент формы | .
| тема дорожки данных | 9Образец буквы 0107 (a-z) — добавлен в элемент формы.
Введите type="text|number|search|etc." или textarea элементы автоматически улучшаются, не требуется data-role
| data-clear-btn | правда | false — Добавляет кнопку очистки |
|---|---|
| данные-очистить-кнопка-текст | string — Текст для кнопки закрытия. По умолчанию: «открытый текст» |
| дата-мини | правда | false — Компактная версия |
| роль данных | нет — предотвращает автоматическое улучшение для использования собственного элемента управления |
| тема данных | Образец буквы(a-z) — добавлен в элемент формы | .
Контейнер с data-role="header" или data-role="footer"
| data-add-back-btn | правда | false — кнопка автоматического добавления назад, только заголовок |
|---|---|
| кнопка возврата данных текст | Строка— только заголовок |
| кнопка возврата данных | образец буквы (a-z) — только заголовок |
| идентификатор данных | Строка— Уникальный идентификатор. Требуется для постоянных нижних колонтитулов |
| данные-позиция | фиксированный |
| тема данных | буква образца (a-z) |
Контейнер с data-role="header" или data-role="footer" плюс атрибут data-position="fixed"
| data-disable-page-zoom | правда | false — возможность масштабирования пользователем страниц с фиксированными панелями инструментов |
|---|---|
| полноэкранные данные | правда | false — Настройка панелей инструментов поверх содержимого страницы |
| данные-нажатие-переключение | правда | false — возможность переключать видимость панели инструментов при касании/щелчке пользователя |
| передача данных | слайд | исчезать | none — используется переход при отображении/скрытии панели инструментов |
| заполнение страницы обновления данных | правда | false — обновить верхнее и нижнее заполнение страницы при изменении размера, переходе, событиях «updatelayout» (фреймворк всегда обновляет заполнение в событии «pageshow»). |