Открытие новой вкладки в Cypress

Cypress является мощным инструментом для автоматизации, но у него есть ограничения, особенно при тестировании приложений, которые часто открывают новые вкладки. Filip Hric  –  автор данной статьи, делится методами решения этой проблемы.

Содержание:

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Удаление атрибута target=”_blank”

Допустим, в вашем приложении имеется следующая якорная ссылка:

<a href="/about.html" target="_blank">Click me!</a>

Пользователь, нажмет на эту ссылку и перейдет на новую вкладку, так как атрибут target="_blank" указывает браузеру открывать ссылку в новой вкладке. Однако в Cypress, простое использование команды .click() также приведет к открытию новой вкладки, а значит, что, покидая текущую вкладку, мы также выходим из сценария Cypress, из этого следует, что наш тест не будет продолжен в новой, открытой вкладке. Решением здесь может быть удаление атрибута target="_blank" на время тестирования. Поскольку Cypress имеет доступ к DOM, мы можем легко управлять элементами веб-страницы, включая этот атрибут:

cy
  .get('a')
  .invoke('removeAttr', 'target')

Но это практически то же самое, как если бы вы открыли инструменты разработчика, и вручную отредактировали ссылку, в частности отключили атрибут target="_blank". Такое изменение поведения нашего приложения может оказаться нежелательным, особенно если мы хотим удостовериться, что атрибуты якоря настроены правильно. В данном случае, наша .invoke() команда успешно выполняется, даже если атрибут target отсутствует.

Вместо непосредственного взаимодействия с элементом, мы можем выбрать более аккуратный подход, осуществив проверку его атрибутов. Таким образом, мы можем убедиться, что наша ссылка указывает на нужное место и действительно имеет значение атрибута target="_blank". В процессе тестирования также проверьте наличие атрибутов rel="noopener noreferrer", чтобы гарантировать отсутствие уязвимости безопасности на нашей странице.

cy
  .get('a')
  .should('have.attr', 'href', '/about')
  .should('have.attr', 'target', '_blank')
  .should('have.attr', 'rel', 'noopener noreferrer');

Этот код сверху проверяет наличие ссылки, но не гарантирует, действительно ли она работает. Чтобы удостовериться в этом, мы можем воспользоваться командой .request() и выполнить HTTP-запрос по адресу нашей ссылки.

cy
  .get('a')
  .then(link => {

    cy
      .request(link.prop('href'))
      .its('status')
      .should('eq', 200);

  });

На шестой строке мы получаем значение атрибута href и используем его для выполнения HTTP-запроса. Если HTTP-запрос возвращает код состояния 200, то наша ссылка работает. Однако, возможно, придется создавать два разных теста, чтобы проверить, что ссылки работают на каждой из страниц – oдин для нашей индексной страницы и один для другой страницы. Но это не обязательно. Вместо использования .request() мы можем воспользоваться командой .visit() и объединить эти два теста в один.

Oбработка редиректов, с использованием JavaScript

В некоторых случаях перенаправление осуществляется не с помощью атрибута HTML, а с помощью кода JavaScript. В этом случае отсутствует атрибут href, который можно было бы открыть или использовать для отправки запроса. Единственный вариант – щелкнуть по ссылке. Однако, важно учитывать, что данная ссылка может перенаправлять пользователя на внешний сайт. В связи с ограничениями Cypress, позволяющими работать только с одним супердоменом (поддержка нескольких доменов  появилась в версии 9.6.0), вы можете столкнуться с ограничениями, если попытаетесь протестировать, например, форму обратной связи на Google Docs. Но можно использовать метод spy на функции, которая открывает окно нашего браузера:

cy
  .visit('./index.html');

cy
  .window().then((win) => {
    cy.spy(win, 'open').as('redirect');
  });

cy
  .get('a')
  .click();

cy
  .get('@redirect')
  .should('be.calledWith', '_blank', '/about');

В начале нашего теста мы регистрируем наш метод-шпион, который будет “шпионить” за open функцией на нашем window объекте. В самом тесте мы проверяем, что наша функция вызывается с правильными аргументами _blank и /about. Таким образом, мы можем проверить перенаправление даже в случаях, когда ссылка на наш якорный элемент не видна в DOM-структуре страницы.

Перевод статьи «Opening a new tab in Cypress».

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *