Посещение страниц с cy.visit()

Метод cy.visit() является ключевым инструментом в Cypress для навигации по веб-приложению. Он используется для открытия страницы по заданному URL и подготовки тестового окружения к дальнейшему взаимодействию с элементами. На практике cy.visit() инициирует HTTP-запрос к указанному адресу и дожидается загрузки DOM, что позволяет последующим командам взаимодействовать с элементами страницы без необходимости дополнительных ожиданий.

cy.visit('https://example.com')

В данном примере Cypress переходит по адресу https://example.com и ждет полной загрузки страницы.

Параметры и опции

cy.visit() поддерживает передачу объекта опций, который позволяет тонко настраивать поведение команды:

  • method — HTTP-метод запроса (GET или POST). По умолчанию используется GET.
  • headers — объект с заголовками запроса. Полезно при тестировании авторизации или API-зависимых страниц.
  • body — тело запроса для методов POST или PUT.
  • qs — объект с параметрами запроса, которые будут автоматически сериализованы в URL.
  • failOnStatusCode — отключает автоматическую проверку кода ответа (по умолчанию true). Если поставить false, Cypress не выбросит ошибку при коде ответа 4xx или 5xx.

Пример использования опций:

cy.visit('/login', {
  method: 'POST',
  body: { username: 'user', password: 'pass' },
  headers: { 'X-Test-Header': 'Cypress' },
  failOnStatusCode: false
})

Работа с динамическими URL и параметрами

Часто тесты требуют перехода на страницы с динамическими параметрами. Для этого удобно использовать строковую интерполяцию или объект qs:

cy.visit('/search', { qs: { query: 'Cypress', page: 2 } })

Результирующий URL будет выглядеть как /search?query=Cypress&page=2. Такой подход упрощает управление параметрами и делает тесты более читаемыми.

Аутентификация и куки

Cypress позволяет передавать аутентификационные данные напрямую через cy.visit() с помощью Basic Auth:

cy.visit('https://example.com', {
  auth: {
    username: 'admin',
    password: '1234'
  }
})

Кроме того, можно управлять куки и localStorage до посещения страницы, используя команды cy.setCookie() и cy.setLocalStorage():

cy.setCookie('session_id', 'abcd1234')
cy.visit('/dashboard')

Это позволяет тестировать состояния пользователя без необходимости проходить полный процесс входа в систему.

Работа с SPA и загрузкой ресурсов

Для одностраничных приложений (SPA) важно учитывать асинхронную подгрузку контента. Cypress по умолчанию ждёт окончания загрузки DOM, но не всегда дождется загрузки данных через AJAX. В таких случаях используют команды ожидания элементов:

cy.visit('/profile')
cy.get('.profile-info', { timeout: 10000 }).should('be.visible')

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

Взаимодействие с cy.visit() и событиями

cy.visit() поддерживает прослушивание событий window и document, что позволяет перехватывать ошибки или выполнять дополнительные проверки:

cy.visit('/dashboard', {
  onBeforeLoad(win) {
    cy.stub(win.console, 'error').as('consoleError')
  }
})
cy.get('@consoleError').should('not.have.been.called')

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

Ограничения и нюансы

  • cy.visit() не работает с iframe напрямую; для тестирования контента внутри iframe используют отдельные подходы (cy.iframe() через плагины).
  • При переходе на страницы с редиректами Cypress автоматически следует за ними, но при необходимости можно проверять промежуточные коды ответа через cy.request().
  • Для локальных файлов с протоколом file:// использование cy.visit() ограничено. Рекомендуется запускать локальный сервер.

Рекомендации по использованию

  • Каждый тест должен начинаться с cy.visit(), если требуется независимое состояние приложения.
  • Для уменьшения времени выполнения тестов и повышения стабильности рекомендуется использовать точные URL и минимизировать асинхронные задержки на стороне сервера.
  • Для тестирования авторизации и различных пользовательских сценариев полезно комбинировать cy.setCookie(), cy.setLocalStorage() и параметры auth.

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