Команды Cypress и цепочки вызовов

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

Цепочка команд (Chaining)

Все команды Cypress возвращают объект, который позволяет строить цепочки вызовов. Цепочки обеспечивают последовательное выполнение действий и удобное управление асинхронностью без явного использования async/await или промисов.

Пример простой цепочки:

cy.get('input[name="username"]')
  .type('admin')
  .should('have.value', 'admin');

В этом примере:

  • cy.get находит элемент на странице.
  • type вводит текст в найденный элемент.
  • should проверяет состояние элемента после ввода.

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

Основные команды

  1. Навигация и управление страницей
cy.visit('/login'); // Переход на страницу
cy.reload();        // Перезагрузка страницы
cy.go('back');      // Переход назад в истории
cy.url().should('include', '/dashboard'); // Проверка URL
  1. Поиск элементов
  • cy.get(selector) — поиск по CSS-селектору.
  • cy.contains(text) — поиск элемента по тексту.
  • cy.find(selector) — поиск внутри найденного элемента.

Пример вложенного поиска:

cy.get('.form').find('input[type="email"]').type('user@example.com');
  1. Взаимодействие с элементами
  • click() — клик по элементу.
  • type(text) — ввод текста.
  • check() / uncheck() — работа с чекбоксами.
  • select(value) — выбор опции в выпадающем списке.
cy.get('#rememberMe').check().should('be.checked');
cy.get('select#country').select('Russia').should('have.value', 'RU');
  1. Assertions (проверки)

Cypress использует should и and для утверждений. Основные варианты:

  • Проверка значения или текста:

    cy.get('h1').should('contain.text', 'Welcome');

  • Проверка состояния элемента:

    cy.get('button').should('be.visible').and('not.be.disabled');

  • Проверка URL или свойства браузера:

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

Асинхронность и ожидания

Cypress автоматически обрабатывает асинхронность. Команды повторяются до наступления состояния, указанного в should, в течение таймаута по умолчанию (4 секунды).

cy.get('.notification')
  .should('be.visible')
  .and('contain.text', 'Success');

Здесь Cypress будет пытаться найти .notification и дождется его видимости, прежде чем проверять текст.

Работа с цепочками и результатами

Результаты команд не нужно сохранять в переменные напрямую. Попытка присвоить результат:

const button = cy.get('button'); // ❌ Не работает так

правильнее использовать цепочку:

cy.get('button').click().should('have.class', 'active');

Если требуется получить значение для дальнейшей логики, используется команда .then():

cy.get('input[name="email"]').then($input => {
  const value = $input.val();
  expect(value).to.equal('user@example.com');
});

.then() позволяет работать с реальными DOM-элементами, не ломая цепочку Cypress.

Примеры сложных цепочек

Форма входа с проверкой всех полей:

cy.get('form#login')
  .find('input[name="username"]').type('admin').should('have.value', 'admin').and('be.visible')
  .get('input[name="password"]').type('password123').should('have.value', 'password123')
  .get('button[type="submit"]').click();

Работа с таблицей и выборкой данных:

cy.get('table#users')
  .find('tr')
  .eq(2)
  .find('td')
  .eq(1)
  .should('contain.text', 'John Doe');

Полезные советы по цепочкам

  • Минимизировать использование cy.wait(). Cypress сам ждет элементы, события и AJAX-запросы.
  • Использовать within() для локальных контекстов:
cy.get('.modal').within(() => {
  cy.get('input[name="email"]').type('test@example.com');
  cy.get('button.submit').click();
});
  • Комбинировать команды с .should() и .then() для проверки состояния и извлечения данных одновременно.

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

Оглавление