Cypress является мощным инструментом для автоматизации, но у него есть ограничения, особенно при тестировании приложений, которые часто открывают новые вкладки. Filip Hric – автор данной статьи, делится методами решения этой проблемы.
Содержание:
- Удаление атрибута target=”_blank”
- Проверка атрибутов ссылок
- Обработка редиректов, с использованием JavaScript
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Удаление атрибута 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».