Алерты, confirm и prompt

В веб-приложениях взаимодействие с пользователем часто реализуется через модальные окна типа alert, confirm и prompt. Cypress предоставляет гибкие возможности для их перехвата и управления, что позволяет полностью автоматизировать тестирование сценариев с такими окнами.

Перехват alert

alert — это простое модальное окно с сообщением и кнопкой «ОК». В браузере оно блокирует поток выполнения до закрытия окна. Cypress автоматически перехватывает window:alert, поэтому прямого взаимодействия с кнопкой «ОК» не требуется.

Пример:

cy.visit('/page-with-alert');

cy.window().then((win) => {
  cy.stub(win, 'alert').as('alertStub');
});

cy.get('#trigger-alert').click();

cy.get('@alertStub').should('have.been.calledOnce')
                    .and('have.been.calledWith', 'Это alert сообщение');

Ключевые моменты:

  • cy.stub() позволяет заменить оригинальный метод alert заглушкой, которая сохраняет вызовы для последующей проверки.
  • Метод have.been.calledWith проверяет точное содержимое сообщения alert.
  • Автоматическая обработка alert в Cypress исключает необходимость вручную закрывать окно.

Перехват confirm

confirm — это модальное окно с кнопками «ОК» и «Отмена», возвращающее true или false в зависимости от выбора пользователя. Cypress позволяет подменять результат confirm, управляя логикой теста.

Пример замены поведения confirm:

cy.visit('/page-with-confirm');

cy.window().then((win) => {
  cy.stub(win, 'confirm').callsFake((message) => {
    expect(message).to.eq('Вы уверены?');
    return true; // Эмулируем нажатие "ОК"
  }).as('confirmStub');
});

cy.get('#trigger-confirm').click();

cy.get('@confirmStub').should('have.been.calledOnce');

Особенности работы с confirm:

  • Метод callsFake позволяет возвращать любое значение (true или false) вместо стандартного поведения.
  • Cypress автоматически предотвращает блокировку потока выполнения, что делает тестирование confirm полностью синхронным.
  • Проверка содержимого сообщения confirm помогает убедиться, что приложение выводит корректный текст пользователю.

Перехват prompt

prompt — это окно с полем для ввода, которое возвращает текст, введённый пользователем. Cypress поддерживает перехват prompt через window:prompt и подмену возвращаемого значения.

Пример эмуляции ввода в prompt:

cy.visit('/page-with-prompt');

cy.window().then((win) => {
  cy.stub(win, 'prompt').callsFake((message) => {
    expect(message).to.eq('Введите ваше имя:');
    return 'Иван'; // Эмулируем ввод текста
  }).as('promptStub');
});

cy.get('#trigger-prompt').click();

cy.get('@promptStub').should('have.been.calledOnce');

Особенности prompt:

  • Возвращаемое значение stub используется как результат prompt.
  • Можно эмулировать и пустую строку, и нажатие «Отмена» (возвращая null).
  • Проверка вызова помогает убедиться, что prompt срабатывает в правильный момент и с правильным сообщением.

Перехват событий через cy.on

Кроме использования cy.stub, Cypress позволяет реагировать на события глобально через cy.on. Это полезно для перехвата alert, confirm и prompt без явного доступа к window.

Пример:

cy.visit('/page-with-alert-confirm-prompt');

cy.on('window:alert', (text) => {
  expect(text).to.eq('Это alert сообщение');
});

cy.on('window:confirm', (text) => {
  expect(text).to.eq('Вы уверены?');
  return true; // Нажатие "ОК"
});

cy.on('window:prompt', (text) => {
  expect(text).to.eq('Введите ваше имя:');
  return 'Иван';
});

cy.get('#trigger-alert').click();
cy.get('#trigger-confirm').click();
cy.get('#trigger-prompt').click();

Преимущества подхода через cy.on:

  • Не требуется прямой доступ к объекту window.
  • Удобно использовать для глобальных перехватов на странице.
  • Обеспечивает единообразие обработки всех модальных окон в тестах.

Практические рекомендации

  • Всегда проверять текст модальных окон, чтобы убедиться в правильной логике приложения.
  • Для confirm и prompt следует эмулировать все возможные варианты (ОК/Отмена, пустое значение), чтобы покрыть разные сценарии.
  • Использование cy.stub() предпочтительно, когда важно проверить количество вызовов и параметры.
  • cy.on лучше подходит для глобальной обработки событий, особенно если несколько элементов на странице могут вызывать однотипные модальные окна.

Эти методы позволяют полноценно управлять alert, confirm и prompt в тестах Cypress, обеспечивая стабильность и повторяемость сценариев, а также точную проверку пользовательских сообщений и поведения приложения.

Оглавление