Методы и свойства страниц

Cypress — это инструмент для автоматизированного тестирования веб-приложений, который работает напрямую в браузере, обеспечивая полную синхронизацию с DOM и JavaScript. Работа с методами и свойствами страниц является ключевой частью эффективного тестирования, так как позволяет взаимодействовать с элементами интерфейса, управлять навигацией и проверять состояние приложения.

Навигация по страницам

Cypress предоставляет встроенные команды для управления URL и переходами между страницами:

  • cy.visit(url, options) — открывает указанную страницу. Параметр options может содержать настройки, такие как timeout, auth или failOnStatusCode.

    cy.visit('https://example.com', { timeout: 10000 });

  • cy.reload(options) — перезагружает текущую страницу. Может принимать объект с опцией force, чтобы игнорировать кэш браузера.

  • cy.url() — возвращает объект для проверки текущего URL. Обычно используется с методом .should('include', '/path') для ассерций.

    cy.url().should('include', '/dashboard');

  • cy.go(direction) — выполняет навигацию назад ('back') или вперед ('forward') в истории браузера.

Работа с элементами DOM

Для тестирования состояния страницы важно уметь находить и взаимодействовать с элементами:

  • cy.get(selector, options) — основной метод поиска элементов по CSS-селектору. Возвращает цепочку объектов, на которых можно вызывать действия или проверки.

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

  • cy.find(selector) — выполняет поиск дочерних элементов внутри уже найденного элемента.

  • cy.closest(selector) — поднимается по DOM-иерархии к ближайшему родителю, соответствующему селектору.

Взаимодействие с элементами

Cypress позволяет симулировать действия пользователя:

  • cy.click(options) — клик по элементу. Опции включают force: true для обхода ограничений видимости и multiple: true для клика по нескольким элементам сразу.

  • cy.type(text, options) — ввод текста в поле ввода. Поддерживает имитацию специальных клавиш через {enter}, {backspace} и другие.

  • cy.clear(options) — очищает содержимое поля ввода.

  • cy.check() и cy.uncheck() — управление состоянием чекбоксов.

  • cy.select(value) — выбор опции в <select> элементе по значению, индексу или тексту.

Ассерции и проверка состояния

Для проверки свойств страниц и элементов используется встроенный механизм Chai:

  • .should(assertion) — проверяет состояние элемента или значения, поддерживает цепочки вызовов.

    cy.get('input[name="username"]').should('be.visible').and('have.value', '');

  • .and(assertion) — позволяет объединять несколько проверок в одной цепочке.

  • .then(callback) — получает доступ к элементу напрямую для более сложной логики проверки.

  • Примеры полезных ассерций:

    • exist — элемент присутствует в DOM.
    • be.visible — элемент видим.
    • contain — элемент содержит текст.
    • have.class — элемент имеет указанный CSS-класс.
    • have.attr — проверка атрибута элемента.

Свойства страницы и окружения

Cypress предоставляет объект Cypress и глобальный объект window для доступа к состоянию приложения:

  • Cypress.config(key) — чтение и изменение конфигурации теста.

  • Cypress.env(key) — работа с переменными окружения, например для хранения токенов или URL.

  • cy.window() — доступ к глобальному объекту окна. Позволяет проверять значения переменных или вызывать функции приложения.

  • cy.document() — возвращает объект document страницы для прямого взаимодействия с DOM.

  • cy.title() — получение заголовка страницы.

    cy.title().should('eq', 'Главная страница');

Управление временем и ожиданиями

Для надежных тестов важно корректно работать с асинхронностью и временем:

  • cy.wait(timeOrAlias) — пауза выполнения теста на указанное время в миллисекундах или ожидание завершения запроса по алиасу.

  • cy.intercept(url, handler) — перехват сетевых запросов, позволяет проверять ответы или подменять их.

  • timeout — опция многих методов Cypress для задания максимального времени ожидания элемента или действия.

Работа с окнами и фреймами

Cypress работает только с одной вкладкой браузера, поэтому взаимодействие с фреймами или окнами требует дополнительных подходов:

  • Использование cy.frameLoaded() и cy.iframe() через плагины для работы с <iframe>.

  • Управление новыми вкладками осуществляется через подмену атрибутов target="_blank" и последующий cy.visit().

Стратегии отладки

  • cy.pause() — временная остановка выполнения теста для анализа состояния.

  • cy.debug() — вывод состояния элемента в консоль для пошаговой отладки.

  • Chrome DevTools — Cypress интегрируется с браузерными инструментами, позволяя инспектировать DOM и сетевые запросы.

Методы и свойства страниц в Cypress обеспечивают полный контроль над приложением во время тестирования, позволяя не только эмулировать действия пользователя, но и проверять внутреннее состояние элементов, сетевых запросов и конфигурации. Продуманная комбинация команд cy.get, cy.visit, cy.window и ассерций формирует основу надежных и масштабируемых тестов.

Оглавление