Команда Cypress .should(): подробное руководство

Этот блог изначально был опубликован на веб-сайте LambdaTest. Ссылка на оригинальный пост — https://www.lambdatest.com/blog/cypress-should-command/

Утверждение — это способ подтверждения того, что тестируемое приложение или система работает должным образом. В Cypress утверждения используются для того, чтобы убедиться, что состояние тестируемого приложения соответствует ожидаемым условиям.

Как правило, утверждение состоит из двух частей: целевого значения (фактического проверяемого значения) и ожидаемого значения (ожидаемого результата теста). Если целевое значение соответствует ожидаемому, утверждение проходит, указывая на то, что приложение работает должным образом.

Однако если целевое значение не соответствует ожидаемому, утверждение завершается ошибкой, указывая на то, что с приложением что-то не так, и тест завершается неудачно.

В этом руководстве по Cypress я подробно объясню использование команды Cypress .should() вместе с некоторыми примерами использования в реальном времени.

СОДЕРЖАНИЕ

• Краткий обзор: что такое утверждения?
• Какая польза от команды Cypress .should()?
• Утверждать на основе значения класса
• Утверждать на основе длины
• Утверждать на основе текста
• Утверждать на основе тега значения
• Утверждать на основе атрибута
• Утвердить для флажков
• Связывание нескольких утверждений с помощью команды Cypress .should()
• Утвердить, виден/скрыт ли текст
• Подтвердить, если значение пусто
• Подтвердить правильность URL-адреса
• Утвердить, если элемент отсутствует
• Часто задаваемые вопросы (FAQ)

Краткий обзор: что такое утверждения?

Утверждения используются для определения ожидаемого поведения или результата теста. Когда результаты теста отклоняются от ожидаемого поведения, утверждения терпят неудачу, указывая на несоответствие между фактическими и ожидаемыми результатами.

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

Это самая важная часть исполнения теста. Ваша основная обязанность как тестировщика — обеспечить бесперебойную работу приложения. Если результаты тестируемого приложения (AUT) не соответствуют ожидаемому результату, очень важно сообщать о любых несоответствиях как об ошибках. Эта практика играет жизненно важную роль в поддержании надежности и качества приложения.

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

Какая польза от команды Cypress .should()?

Cypress предоставляет собственную библиотеку утверждений, которая расширяет библиотеку утверждений Chai. Одна из команд утверждения, предоставляемых Cypress, — .should().

Команда Cypress .should() используется для подтверждения состояния AUT. Он используется для обеспечения выполнения определенных условий перед проведением теста.

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

Синтаксис

Вот несколько примеров, демонстрирующих использование команды Cypress .should() с cy.get(), cy.contains(), и cy.wrap():

В этом блоге я буду использовать cy.get() для утверждения .should().

Утверждение можно обрабатывать по-разному. Ниже приведены наиболее часто используемые способы обработки утверждений в Cypress.

• Утверждать на основе значения класса
• Утверждать на основе длины
• Утверждать на основе текста
• Утверждать на основе тега значения
• Утверждение на основе атрибута HTML
• Утверждать для флажков
• Цепочка нескольких утверждений
• Утвердить, виден ли текст/скрыт
• Утвердить, если значение пусто
• Подтвердите правильность URL-адреса
• Утвердить, если элемент отсутствует

Разберемся подробно:

Утверждать на основе значения класса

Для выполнения утверждений, когда класс элемента может динамически изменяться в зависимости от взаимодействия с пользователем или других событий, вы можете использовать команду Cypress .should(‘have.class’, ‘className’). Эта команда позволяет вам убедиться, что элемент имеет ожидаемый класс. Указав желаемое имя класса, вы можете подтвердить, обладает ли элемент этим классом, как часть вашей тестовой проверки.

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

Дополнительный сценарий, в котором можно использовать команду Cypress .should(), — это когда ваше приложение демонстрирует различные состояния, на которые указывают разные значения класса. В таких случаях вы можете использовать утверждения для проверки переходов между этими состояниями.

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

Синтаксис

Его можно использовать с командами DOM, такими как cy.get(), cy.contains() или cy.wrap(),, как показано ниже:

Ниже приведен пример использования утверждения с cy.get() в Cypress.

Сценарий тестирования

1. Перейдите по URL-адресу https://ecommerce-playground.lambdatest.io/ с помощью cy.visit().
2. Введите адрес электронной почты в текстовое поле и убедитесь, что значение класса соответствует ожидаемому.
3. Введите пароль в текстовое поле.
4. Убедитесь, что значение класса кнопки отправки соответствует ожидаемому.

Реализация

Ниже приведен код Cypress для открытия веб-приложения и проверки класса с помощью утверждения Cypress .should(‘have.class’,className).

describe('Cypress Assertions', () => {
it('Should - Class Assertion', () => {
cy.visit(' https://ecommerce-playground.lambdatest.io/') cy.get('#input-email').type('[email protected]').should('have.class', 'form-control')
cy.get('#input-password').type('Cypress123!!')
cy.get('[value="Login"]').should('have.class', 'btn btn-primary')
})
})

Выполнение

Прохождение кода

Шаг 1

Во-первых, тест переходит к URL-адресу веб-сайта с помощью cy.visit().

Шаг 2

В приведенном ниже фрагменте кода начальный шаг включает в себя выбор поля ввода с идентификатором input-email. Затем в выбранное поле вводится тестовый адрес электронной почты.

Наконец, процесс проверки проверяет, имеет ли поле ввода класс управления формой, используя команду Cypress .should(‘have.class’, ‘form-control’).

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

Шаг 3

Как показано на снимке экрана ниже, имя класса локатора — «form-control» в DOM. Итак, в Cypress .should() одно и то же имя класса передается вместе с локатором элемента на веб-странице.

Шаг 4

В приведенном ниже коде я выбираю поле ввода пароля, а затем ввожу тестовый пароль.

Шаг 5

Последняя строка выбирает кнопку входа на странице с помощью CSS Selector, а затем проверяет наличие классов btn и btn-primary.

Как показано выше, значением класса локатора является «btn btn-primary», которое передается в команде Cypress .should().

Утверждать на основе длины

В Cypress, если вы хотите обработать сценарий, в котором вы хотите проверить ожидаемое количество элементов для определенного набора элементов, вы можете использовать команду Cypress .should('have.length',totalLength) .

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

Синтаксис

Давайте разберемся подробно с тестовым сценарием.

Сценарий тестирования

1. Перейдите на веб-страницу https://ecommerce-playground.lambdatest.io/ с помощью cy.visit().
2. Убедитесь, что на странице отображаются шесть категорий, используя утверждение .should(have.length).
3. Убедитесь, что на странице отображаются 10 лучших продуктов.

Реализация

describe('Cypress Assertions', () => {
it('Should - Length Assertion', () => {
/* Verify the number of categories on the page */
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('.navbar-nav.horizontal>li').should('have.length', 6)
/* Verify the number of top products on the page */
cy.get('.swiper-wrapper').eq(1).find('>div').should('have.length, 10)
}) })

Выполнение

Прохождение кода

Шаг 1

Во-первых, тест переходит к URL-адресу веб-сайта с помощью cy.visit().

Шаг 2

Затем он проверяет, что на странице отображаются шесть категорий, используя утверждение .should(have.length) для значения класса, которым является '.navbar-nav.horizontal ›li' .

На приведенном ниже снимке экрана видно, что локатор категории со значением класса «.navbar-nav.horizontal ›li» имеет шесть результатов.

Шаг 3

Затем он проверяет, что на странице отображаются 10 лучших продуктов, используя утверждение .should(have.length) в локаторе классов, то есть '.swiper-wrapper. '.

Как показано ниже на снимке экрана, используется cy.get(‘.swiper-wrapper’).eq(1), который возвращает соответствующий элемент, находящийся в позиции 2.

Шаг 4

На скриншоте ниже видно, что количество элементов div равно десяти, которые находятся внутри cy.get(‘.swiper-wrapper’).eq(1).find(‘›div’).

Приведенная ниже команда cy.get('.swiper-wrapper').eq(1).find('›div').should('have.length', 10) ищет элемент с значение класса '.swiper-wrapper', которое находится в индексе 1 (или location2), а затем находит элементы div и в конце проверяет, что общее количество элементов div равно 10, используя .should('have.length',10).

Утверждать на основе текста

В Cypress, если вы хотите проверить ожидаемый текст на странице, вы можете использовать утверждение Cypress .should(‘have.text’,expectedText). Это одно из наиболее часто используемых утверждений Cypress.

Это полезно в тех случаях, когда ваше приложение поддерживает несколько языков. В таких случаях вы можете использовать текстовые утверждения для проверки правильности перевода текстовых элементов. Утверждая наличие определенного переведенного текста, вы можете гарантировать, что приложение отображает правильный язык в зависимости от предпочтений пользователя.

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

Синтаксис

Сценарий тестирования

1. Перейдите на сайт https://ecommerce-playground.lambdatest.io/.
2. Убедитесь, что текст «Скидка до 30 % на популярные смартфоны + предложения обмена» отображается в разделе «Лучшие продукты».
3. Убедитесь, что третьим продуктом, отображаемым в разделе «Лучшие коллекции», является «HTC Touch HD».

Реализация

describe('Cypress Assertions', () => {
it('Should - Text Assertion', () => {
/* Verify the text of category on the page */
cy.visit('https://ecommerce-playground.lambdatest.io/') cy.get('.m-md-0.d-flex.align-items-center.mb-3').should('have.text', "Upto 30% Off on Popular Smartphones + Exchange Offers")
/* Verify the text of specific products at specific location on the page */ cy.get('.swiper-slide.swiper-slide-active').eq(2).find('>div>div>h4>a').first().should('have.text', 'HTC Touch HD')
}) })

Выполнение

Прохождение кода

Шаг 1

Во-первых, тест переходит к URL-адресу веб-сайта с помощью cy.visit().

Шаг 2

Он использует команду cy.get() с селектором класса для выбора элемента на странице с классом «m-md-0.d-flex align-items-center.mb». -3».

Затем команда Cypress .should() используется с утверждением «have.text», чтобы проверить, содержит ли элемент ожидаемый текст «Скидка до 30 % на популярные смартфоны». + Предложения обмена».

Как показано на снимке экрана ниже, значения локатора имеют соответствующий текст. Важно отметить, что в случае с утверждением Cypress .should(‘have.text’expectedText) вам нужно передать точное текстовое значение, иначе ваш тестовый пример завершится ошибкой. Даже если в тексте есть пробел, в этом случае тестовый пример завершится ошибкой.

Шаг 3

Последняя строка кода проверяет текст конкретного продукта, расположенного в определенном месте на странице. Он находит конкретное местоположение, используя класс «.swiper-slide.swiper-slide-active'» в местоположении 3. Затем он находит первый текст, который находится под элементом ('›div ›div›h4›a’).

В конце он утверждает текст ссылки, используя утверждение Cypress .should(‘have.text’, ‘HTC Touch HD’)».

На приведенном ниже снимке экрана это видно для локатора с классом «.swiper-slide.swiper-slide-active», который находится в 3-м месте внутри этого div›div›h4. ›a имеет определенный текст, который мы проверяем в нашем коде.

Таким образом, этот тестовый пример переходит на веб-сайт и проверяет, что два элемента на странице содержат ожидаемый текст, используя команду Cypress .should() с параметром «have.text». утверждение.

Утверждение на основе тега значения

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

Этого легко добиться с помощью команды Cypress .should(‘have.value’,expectedValue), которая проверяет, имеет ли конкретный элемент ожидаемое значение.

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

Синтаксис

Давайте разберемся с этим на приведенных ниже примерах.

Сценарии тестирования

Тестовый пример 1

1. Перейдите по URL-адресу https://ecommerce-playground.lambdatest.io/ с помощью cy.visit().
2. Введите текст в поле поиска с помощью cy.type().
3. Проверьте правильность введенного текстового значения.
4. Кроме того, проверьте, не равен ли введенный текст какому-либо другому значению. Он чувствителен к регистру.

Тестовый пример 2

1. Перейдите по URL-адресу https://www.lambdatest.com/selenium-playground/select-dropdown-demo.
2. Выберите раскрывающееся значение.
3. Убедитесь, что выбранное раскрывающееся значение соответствует ожидаемому.

Реализация

describe('Cypress Assertions', () => {
it.only('Should - Value Assertion for Textbox', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('input[name="search"]').first().type('iphone')
cy.get('input[name="search"]').first().should('have.value', 'iphone')
cy.get('input[name="search"]').first().should('not.have.value', 'IPHONE')
})
it('Should - Value Assertion for Dropdown', () => {
cy.visit('https://www.lambdatest.com/selenium-playground/select-dropdown-demo')
cy.get('#select-demo').select('Wednesday')
cy.get('#select-demo option:selected').should('have.value', 'Wednesday')
})
})

Выполнение

Прохождение кода

Тестовый пример 1

В первом тестовом примере открывается веб-приложение. Введите текст и проверьте, соответствует ли введенное текстовое значение ожидаемому значению.

Шаг 1

Первый шаг — перейти к URL-адресу с помощью cy.visit().

Шаг 2

С помощью cy.get(selector) он найдет элемент, а затем с помощью .type(‘iphone’) передаст текст в текстовое поле.

Шаг 3

После ввода текста в текстовое поле он проверяет, соответствует ли введенный текст ожидаемому тексту, используя .should(‘have.value’,expectedText).

Тестовый пример 2

Во втором тестовом примере открывается веб-приложение. Выберите значение из раскрывающегося списка и проверьте, соответствует ли выбранное текстовое значение ожидаемому значению.

Шаг 1

Первый шаг — перейти к URL-адресу с помощью cy.visit().

Шаг 2

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

Шаг 3

В конце подтвердите, что выбранное раскрывающееся значение соответствует ожидаемому, используя команду Cypress .should(‘have.value’,expectedText).

Утверждать на основе атрибута

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

Например, если у вас есть ссылка на странице и вы хотите подтвердить правильность значения атрибута href, Cypress упрощает это с помощью встроенной функции .should().

Чтобы утверждать на основе атрибута, вы можете использовать функцию should со свойством have.attr. Свойство have.attr позволяет проверить значение любого атрибута элемента.

Синтаксис

Давайте разберемся с приведенным ниже тестовым сценарием:

Сценарий тестирования

1. Перейдите по URL-адресу https://ecommerce-playground.lambdatest.io/.
2. Выберите раскрывающееся значение.
3. Убедитесь, что выбранное раскрывающееся значение соответствует ожидаемому.

Реализация

describe('Cypress Assertions', () => {
it.only('Should - Attribute Assertion for Textbox', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('span:contains("Home")').parents('a').should('have.attr', 'href','https://ecommerce-playground.lambdatest.io/index.php?route=common/home')
})
})

Выполнение

Прохождение кода

Шаг 1

На первом шаге команда cy.visit() используется для перехода к указанному URL-адресу, то есть https://ecommerce-playground.lambdatest.io/.

Шаг 2

Я использую команду cy.get() для выбора элемента на веб-странице, содержащего текст «Home», который в данном случае является элементом span.

Как показано ниже, используется команда .parents(‘a’) Cypress, которая проходит вверх по дереву DOM от элемента span, чтобы выбрать его родительский элемент, который является тегом ‘a’.

В конце концов, команда Cypress .should() используется для подтверждения того, что тег a, выбранный на предыдущем шаге, имеет определенный атрибут с именем href со значением https://ecommerce-playground.lambdatest.io/index.php?route=common/home.

Таким образом, этот код переходит на веб-сайт, выбирает ссылку «Главная» и проверяет, имеет ли ее атрибут href определенное значение.

Утверждать для флажков

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

В сценариях, где для входа пользователя в систему требуются обязательные флажки условий и положений, вы можете использовать утверждение Cypress .should(‘be.checked’), чтобы проверить, установлен ли флажок, прежде чем продолжить процесс входа. Этот подход гарантирует, что пользователь может продолжить работу только тогда, когда установлен флажок, пользователь может продолжить работу.

Кроме того, этот подход оказывается полезным, когда вам нужно подтвердить, что флажок снят. Например, некоторые веб-приложения устанавливают флажок при регистрации для получения уведомлений по электронной почте. Пользователи имеют возможность отказаться от этой функции. Используя команду Cypress .should(‘be.unchecked’), вы можете проверить, можно ли успешно снять флажок с уже установленного флажка.

Синтаксис

Давайте подробно разберемся, используя приведенный ниже сценарий, как писать утверждения для флажков с помощью Cypress.

Сценарий тестирования

1. Перейдите по URL-адресу https://www.lambdatest.com/selenium-playground/checkbox-demo.
2. Установите один флажок и проверьте, установлен ли он.
3. Установите несколько флажков на странице.
4. Убедитесь, что все флажки выбраны/отмечены.
5. Снимите флажок с одного флажка и убедитесь, что он снят.
6. Снимите несколько флажков и проверьте, сняты ли они.

Реализация

describe('Cypress Assertions', () => {
it('Should - Checkbox Assertion', () => { cy.visit('https://www.lambdatest.com/selenium-playground/checkbox-demo')
/* select checkbox and verify if it is checked */
cy.get('#isAgeSelected').check().should('be.checked')
cy.get('.cb-element.mr-10').check().should('be.checked')
/* unselect checkbox and verify if it is unchecked */
cy.get('#isAgeSelected').uncheck().should('not.be.checked')
cy.get('.cb-element.mr-10').uncheck().should('not.be.checked')
})
})

Выполнение

Прохождение кода

Приведенный выше код проверяет правильность установки и снятия флажков на предоставленной веб-странице.

Шаг 1

Используя приведенный ниже код, команда cy.visit() используется для перехода к указанному URL-адресу, который является https://www.lambdatest.com/selenium-playground/checkbox-demo.

Шаг 2

Как показано на снимке экрана ниже, я использую команду cy.get() для выбора элемента на веб-странице вместе с командой .check(), которая используется чтобы установить флажок. Затем используется команда Cypress .should(‘be.checked’), чтобы подтвердить, что флажки отмечены.

Шаг 3

В приведенном ниже коде я использую команду cy.get() для выбора элемента на веб-странице вместе с командой .uncheck() для снятия флажков.

Затем используется команда Cypress .should(‘not.be.checked’), чтобы подтвердить, что флажки не отмечены.

Объединение нескольких утверждений с помощью команды Cypress .should()

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

Давайте подробно разберемся, почему используется цепочка:

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

Например, вы можете использовать несколько утверждений для одного и того же элемента, используя метод цепочки, для случая, когда вы хотите сначала проверить, есть ли на странице восемь продуктов. Затем вы хотите выполнить второе утверждение для проверки текста каждого продукта.

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

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

Давайте поймем это на приведенном ниже примере того, как выполнять несколько утверждений для элемента с использованием метода цепочки:

Сценарии тестирования

Тестовый пример 1

1. Перейдите по URL-адресу https://www.lambdatest.com/selenium-playground/checkbox-demo.
2. Убедитесь, что продукты из категории Top Trending на странице составляют 8, и убедитесь, что последний элемент — «MP3-плееры» и имеет «семейство шрифтов» CSS.
3. Убедитесь, что поле поиска имеет атрибут aria-label со значением «Поиск продуктов».
4. Введите текст в поле поиска и убедитесь, что введенный текст соответствует ожиданиям.

Тестовый пример 2

1. Перейдите по URL-адресу https://www.lambdatest.com/selenium-playground/select-dropdown-demo.
2. Выберите раскрывающееся значение «Среда» из одного раскрывающегося списка и убедитесь, что элемент был выбран и имеет то же значение, которое было выбрано.

Реализация

describe('Cypress Assertions', () => {
it('Should - Multiple Assertion', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('.figure.img-top').should('have.length', 8)
.last()
.should('include.text', "MP3 Players").should('have.css', 'font-family')
cy.get('input[name="search"]').first().should('have.attr', 'aria-label', "Search For Products").type('iphone').should('have.value', 'iphone')
})
it('Should - Multiple Assertion for Dropdown', () => { cy.visit('https://www.lambdatest.com/selenium-playground/select-dropdown-demo')
cy.get('#select-demo').select('Wednesday')
cy.get('#select-demo option:selected').should('be.selected').and('have.value', 'Wednesday')
})
})

Выполнение

Прохождение кода

Тестовый пример 1

Шаг 1

Используя приведенный ниже код, команда cy.visit() используется для перехода к указанному URL-адресу, который является https://ecommerce-playground.lambdatest.io/.

Шаг 2

Первое утверждение cy.get('.figure.img-top').should('have.length', 8) проверяет наличие восьми элементов с классом «figure img- топ“

Второе утверждение .last().should(‘include.text’, «MP3 Players») проверяет, что последний элемент с классом «figure img-top» содержит текст «MP3 Players».

Третье утверждение .should(‘have.css’, ‘font-family’) проверяет, что семейство шрифтов последнего элемента с классом «figure img-top» определено.

Шаг 3

В соответствии с приведенным ниже кодом первое утверждение cy.get('input[name=”search”]'). first().should('have.attr', 'aria-label ', «Поиск продуктов») проверяет, что первый элемент ввода с атрибутом имени «search» имеет атрибут aria-label со значением «Искать товары».

Второе утверждение .type('iphone').should('have.value', 'iphone') вводит значение «iphone» в первый элемент ввода с name «search», а затем проверяет, установлено ли входное значение «iphone».

Тестовый пример 2

Шаг 1

Во-первых, я перехожу по указанному URL-адресу https://www.lambdatest.com/selenium-playground/select-dropdown-demo с помощью cy.visit().

Шаг 2

В соответствии с приведенным ниже кодом cy.get('#select-demo').select('Среда') выбирает параметр «Среда» из раскрывающегося меню с Идентификатор «выберите-демо».

Шаг 3

Приведенный ниже код cy.get('#select-demo option:selected').should('be.selected').and('have.value', 'Wednesday') проверяет, что выбранный вариант «Среда» и отмечен как выбранный.

Утвердить, виден ли текст/скрыт

Чтобы проверить, виден ли элемент DOM на странице. В Cypress используется команда .should(‘be.visible’). Это утверждение можно использовать, чтобы убедиться, что определенные элементы пользовательского интерфейса отображаются правильно и что пользователь может взаимодействовать с ними должным образом.

Это полезно в тех случаях, когда вы хотите проверить содержимое страницы. Например, после успешной регистрации вы можете проверить, совпадает ли имя с тем, которое было введено при регистрации. Его также можно использовать в тех случаях, когда вы хотите проверить, отображается ли успешное сообщение или нет.

Вы можете проверить как случаи видимости, так и невидимости элемента.

Для невидимости это может быть полезно в случаях, когда вы хотите проверить, не существует ли элемент на странице. Например, если вы хотите убедиться, что текст ошибки на странице не существует. В этом случае вы можете использовать команду Cypress .should(‘not.be.visible’).

Синтаксис

Давайте разберемся с приведенным ниже тестовым сценарием.

Сценарий тестирования

1. Перейдите по URL-адресу https://ecommerce-playground.lambdatest.io/.
2. Убедитесь, что на веб-странице отображается категория «Главная».
3. Убедитесь, что модальное диалоговое окно скрыто на странице.

Реализация

describe('Cypress Assertions', () => {
it.only('Should - Visibility Assertion', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('span:contains("Home")').should('be.visible')
cy.get('.modal-dialog').should('not.be.visible');
}) })

Выполнение

Прохождение кода

Шаг 1

Используя приведенный ниже код, команда cy.visit() используется для перехода к указанному URL-адресу, который является https://ecommerce-playground.lambdatest.io/

Шаг 2

В соответствии с кодом на снимке экрана ниже я использую команду cy.get() для выбора элемента на веб-странице вместе с Cypress .should('be.visible'), которая утверждает, что текст виден на странице.

describe('Cypress Assertions', () => {
it.only('Should - Empty Assertion', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.hash().should('be.empty')
})
})

describe('Cypress Assertions', () => {
it('Should - Multiple Assertion', () => {
cy.visit('https://ecommerce-playground.lambdatest.io/')
cy.get('[placeholder="Search For Products"]').first().type('iphone')
cy.get('.dropdown-menu.autocomplete.w-100').contains('samsung').should('not.exist')
})
})