Перевод статьи «Testing links with Cypress».
Я часто сталкиваюсь с ситуацией, когда необходимо протестировать панель навигации на странице, чтобы убедиться, что все ссылки действительно работают. Это очень хороший проблемный случай, в котором можно применять различные стратегии. В этой статье я хотел бы рассказать о них и показать, как реализуется тестирование ссылок в Cypress.
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Давайте сначала посмотрим, что мы будем тестировать. У нас есть простая панель навигации, которая будет перенаправлять нас на различные страницы нашего сайта.
<nav> <a href="/blog">Blog</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>
С помощью Cypress мы хотим протестировать эту панель навигации, причем сделать это наиболее эффективным способом.
Начнем с самого простого процесса, который по сути имитирует тестирование всех ссылок реальным пользователем:
it('click all links', () => {
cy.visit('/')
// blog page
cy.contains('blog').click()
cy.location('pathname').should('eq', '/blog')
cy.go('back')
// about page
cy.contains('about').click()
cy.location('pathname').should('eq', '/about')
cy.go('back')
// contact page
cy.contains('contact').click()
cy.location('pathname').should('eq', '/contact')
cy.go('back')
}); При переходе по каждой ссылке мы кликаем на нее, проверяем URL-адрес перенаправления, затем возвращаемся на домашнюю страницу и повторяем процесс. Это, конечно, немного повторяющееся действие, вы можете сами увидеть это в коде. Кроме того, если бы мы добавили еще один элемент на нашу панель навигации, нам пришлось бы снова повторить все действия.
Вместо этого мы можем создать цикл и выполнить итерацию по элементам.
it('click all links with loop', () => {
const pages = ['blog', 'about', 'contact']
cy.visit('/')
pages.forEach(page => {
cy.contains(page).click()
cy.location('pathname').should('eq', `/${page}`)
cy.go('back')
})
}); В этом тесте мы создаем массив (строка 3), а затем создаем цикл forEach, который будет перебирать массив и повторять действие. Это особенно полезно, если по какой-либо причине наша панель навигации будет менять элементы. Мы просто добавим элемент в массив, и наш тест заработает.
Несмотря на то, что наш тест стал более сухим, имеется небольшая проблема с подходом .go('back'). Мы не ждем полной загрузки нашей страницы. После того как утверждение о pathname проходит, мы сразу возвращаемся назад. Хотя основной фокус нашего теста – панель навигации, мы все равно хотим убедиться, что ссылки открывают правильную страницу, и не ускоряем процессы. Мы действительно не хотим тестировать слишком быстро, потому что можем пропустить ошибку.
Обратите внимание, что здесь нет страницы about. Клик по ссылке about фактически перенаправляет нас на страницу 404. Хотя может показаться, что наша панель навигации работает, на самом деле она может содержать неработающую ссылку. Это не очень хорошо.
Мы можем выбрать другой подход и вместо открытия нашей ссылки использовать команду .request(). Это может показаться странным – зачем нам делать API-запрос к сайту?
HTTP-запрос — это то же самое, что делает ваш браузер, когда вы вводите URL-адрес. Единственное различие заключается в том, что в качестве ответа вы обычно получаете html-документ, а не json-объект. При этом вы все равно получите код состояния 200 или 404, так что принцип работы тот же. Теперь вместо того, чтобы заходить на сайт с помощью браузера, мы просто делаем запрос, чтобы проверить, действительно ли ссылка существует.
it('use requests to navigation bar links', () => {
const pages = ['blog', 'about', 'contact']
cy.visit('/')
pages.forEach(page => {
cy
.contains(page)
.then((link) => {
cy.request(link.prop('href'))
})
})
}); Это поможет нам выявить ошибку на странице about, поскольку мы получим ошибку 404. В качестве бонуса вы сможете протестировать URL-адреса, направленные за пределы вашего супердомена, что является текущим ограничением в Cypress. Вы не можете посещать несколько доменов, но запросы к ним делать можно, а этого может быть достаточно. Примечание: поддержка нескольких доменов появилась в версии 9.6.0.
В качестве последнего примера предположим, что мы не знаем точно, сколько ссылок имеет наша панель навигации. Мы просто хотим быть абсолютно уверены, что каждая из них работает. Для этого мы можем просто выделить все элементы <a> и выполнить итерацию по ним:
it('check all links on page', () => {
cy.visit('/')
cy.get('a').each(page => {
cy.request(page.prop('href'))
})
}); Это, конечно же, затруднит работу со ссылками, указывающими на адреса электронной почты. Поэтому, чтобы пропустить такие ссылки, можно изменить селектор таким образом, чтобы он их не показывал:
it('check all links to sites', () => {
cy.visit('/')
cy.get("a:not([href*='mailto:'])").each(page => {
cy.request(page.prop('href'))
})
}); Надеюсь, вы узнали что-то новое.