Проверка отсутствия элемента в DOM с Cypress

Быстрый ответ

Для проверки отсутствия элемента в Cypress используйте конструкцию .should('not.exist'), подтверждающую полное отсутствие элемента в DOM.

// Проверка отсутствия элемента с идентификатором '#element'
cy.get('#element').should('not.exist');

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

Борьба с асинхронными операциями

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

// Ожидание завершения асинхронной операции и проверка отсутствия элемента
cy.get('#checkbox').click();
cy.wait('@operation'); // Применяем псевдоним для ожидания
cy.get('#element').should('not.exist');

Правильное использование cy.wait() с соответствующими псевдонимами позволяет синхронизировать ваши проверки с асинхронной логикой вашего приложения.

Конан Невидимка против Мисс Не-Существует

Существует разница между конструкциями .should('not.exist') и .should('not.be.visible'): если первая подтверждает полное отсутствие элемента в DOM, то вторая свидетельствует о том, что хотя элемент присутствует в коде, он на странице невидим.

// Элемент '#element' существует, но он не виден
cy.get('#element').should('not.be.visible');

Используйте .should('not.exist') для подтверждения отсутствия элемента в структуре страницы и .should('not.be.visible') для того, чтобы убедиться, что элемент скрыт.

Поиск скрытых текстовых фрагментов

Чтобы выявить скрытый текст, которым не обладает обычный селектор, сочетайте cy.contains() с .should('not.exist').

// Слово 'Ошибка' должно отсутствовать на странице
cy.contains('Ошибка').should('not.exist');

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

Отслеживание путей пользовательских действий

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

// После клика на чекбокс '.checkbox' всплывающее окно '.pop-up' должно исчезнуть
cy.get('.checkbox').click();
cy.get('.pop-up').should('not.exist');

Применение cy.wait() или cy.then() может помочь избежать ошибок проверки в переходных состояниях или при выполнении анимации.

Полезные материалы по документации Cypress

1. Утверждения | Документация Cypress — Подробное руководство по всем аспектам использования утверждений в Cypress.
2. should | Документация Cypress — Детальное описание команды .should(), являющейся ключевым элементом механизма утверждений Cypress.
3. Лучшие практики | Документация Cypress — Рекомендации относительно лучших методик надежной проверки наличия или отсутствия элементов.
4. find | Документация Cypress — Обсуждение скрытых возможностей команды .find() для поиска элементов в DOM.
5. then | Документация Cypress — Инструкция по использованию команды .then() для организации цепочек проверок.
6. GitHub – cypress-io/cypress-example-recipes — Коллекция реальных примеров и сценариев тестирования при работе с Cypress.
7. not | Документация Cypress — Углубленный обзор функционала команды .not(), предназначенной для подтверждения невидимости или отсутствия элементов.