cy.window() и cy.document()

В Cypress предоставлены специальные команды для прямого взаимодействия с объектами окна и документа браузера: cy.window() и cy.document(). Эти команды позволяют получить доступ к глобальным объектам JavaScript и DOM, что открывает широкие возможности для тестирования сложного поведения веб-приложений, обхода ограничений стандартных селекторов и проверки интеграции с внешними библиотеками.

cy.window()

Команда cy.window() возвращает объект window текущего тестируемого окна браузера. Это основной объект для работы с глобальными переменными, функциями и методами браузера.

Синтаксис:

cy.window().then((win) => {
  // доступ к глобальным переменным и функциям
  console.log(win.someGlobalFunction());
  win.localStorage.setItem('token', '12345');
});

Основные возможности

  1. Доступ к глобальным объектам и функциям Позволяет вызвать функции, объявленные в глобальной области видимости, или получить значения глобальных переменных.

  2. Манипуляция локальным и сессионным хранилищем Через win.localStorage и win.sessionStorage можно устанавливать, получать и удалять данные, что полезно для подготовки состояния приложения перед тестами.

  3. Вызов сторонних библиотек Любые библиотеки, подключенные на страницу, доступны через window. Например, можно протестировать работу стороннего виджета или глобальных утилит без прямого вмешательства в DOM.

Особенности использования

  • Cypress автоматически ждет, пока страница будет загружена, поэтому объект window всегда готов к использованию внутри then.
  • Любые изменения через window отражаются немедленно на тестируемом приложении, что позволяет моделировать состояние приложения без пользовательского ввода.

Пример: тестирование вызова функции

cy.window().then((win) => {
  const result = win.calculateTotal(5, 10);
  expect(result).to.equal(15);
});

cy.document()

Команда cy.document() возвращает объект document текущей страницы, что позволяет напрямую работать с DOM, обходя команды Cypress, ориентированные на селекторы.

Синтаксис:

cy.document().then((doc) => {
  const form = doc.querySelector('#loginForm');
  form.submit();
});

Основные возможности

  1. Доступ к DOM без селекторов Cypress Позволяет использовать чистый JavaScript для поиска элементов через методы querySelector, getElementById, getElementsByClassName и т. д.

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

  3. Проверка состояния документа Через объект document можно проверять title, meta-теги, наличие скриптов и стилей, что важно для интеграционных и регрессионных тестов.

Пример: проверка заголовка страницы

cy.document().then((doc) => {
  expect(doc.title).to.equal('Главная страница');
});

Совместное использование cy.window() и cy.document()

Часто удобно использовать эти команды вместе для полного контроля над приложением:

cy.window().then((win) => {
  win.localStorage.setItem('user', 'admin');
});

cy.document().then((doc) => {
  const loginButton = doc.querySelector('#loginButton');
  loginButton.click();
});

Такой подход позволяет подготовить состояние приложения и сразу инициировать действия, не используя обычные селекторы Cypress (cy.get()) для каждой операции.

Практические советы

  • Использовать cy.window() для тестирования глобальных функций, проверки состояния приложений и взаимодействия с локальным хранилищем.
  • Использовать cy.document() для прямой работы с DOM, проверки структуры документа и элементов, которые сложно выбрать через стандартные селекторы.
  • Команды возвращают объекты промиса, поэтому все операции с ними должны выполняться внутри .then().
  • Для сложных тестов можно комбинировать их с другими Cypress-командами, например, cy.get() и cy.contains(), чтобы сначала подготовить состояние через window или document, а затем взаимодействовать с UI.

Примеры типовых задач

  1. Очистка localStorage перед тестом
cy.window().then((win) => {
  win.localStorage.clear();
});
  1. Добавление скрытого элемента в DOM для тестирования
cy.document().then((doc) => {
  const div = doc.createElement('div');
  div.id = 'testDiv';
  doc.body.appendChild(div);
});
  1. Вызов глобальной функции и проверка результата
cy.window().then((win) => {
  const output = win.formatDate(new Date('2026-01-10'));
  expect(output).to.equal('10.01.2026');
});

Использование cy.window() и cy.document() позволяет получать доступ к низкоуровневым объектам браузера, расширяя возможности Cypress за пределы стандартных команд для работы с элементами и событиями. Такой подход особенно эффективен при тестировании сложной логики приложения, взаимодействии с внешними библиотеками и подготовке тестового состояния.

Оглавление