Разработка крупных приложений может оказаться сложной задачей, особенно когда проекты растут, а над одним кодом работает много людей. Поэтому тестирование является неотъемлемой частью не только в программной инженерии, но и во фронтенд-разработке. Простого написания модульных и функциональных тестов может оказаться недостаточно, чтобы убедиться, что приложение работает правильно.
Например, модульные тесты не позволяют проверить, что путь пользователя проходит без ошибок. В таких случаях помогает сквозное тестирование (E2E), которое воспроизводит поведение пользователя в приложении и проверяет, что всё работает, как задумано. Если мы хотим создать качественное веб-приложение, сквозные тесты просто необходимы.
В этой статье мы рассмотрим, как писать сквозные тесты для фронтенда с помощью Cypress. Существуют и другие инструменты для E2E-тестирования, такие как Selenium и Nightwatch.js, но Cypress выгодно отличается своими возможностями: например, функцией «перемотки времени» тестов, записью и воспроизведением тестов и другими полезными функциями.
Чтобы начать работу, необходимо установить актуальные версии Node.js и npm. Также вы можете получить доступ к полному исходному коду на GitHub. Давайте начнём!
Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.
Содержание
- Настройка Cypress
- Написание сквозных тестов с Cypress
- Тест 1. Поиск на главной странице
- Тест 2. Переключение языка на главной странице
- Тест 3. Проверка значения слова в Викисловаре
- Заключение
Настройка Cypress
Для начала создайте новый проект и настройте Cypress. Выполните следующие команды:
$ mkdir cypress-tutorial $ cd cypress-tutorial $ npm init -y
Затем установите пакет Cypress в качестве зависимости для разработки:
$ npm install --save-dev cypress
Откройте файл package.json в корневой папке проекта и добавьте в раздел scripts следующие команды:
"scripts": {
"test": "npx cypress run",
"cypress:open": "npx cypress open"
},
Сохраните изменения и закройте файл. Затем в корневой папке создайте файл cypress.json – это файл конфигурации для настройки поведения Cypress. Добавьте в него следующий код и сохраните:
{ "chromeWebSecurity": false }
Позже в статье будет подробнее разобрано, что означает эта команда.
Написание сквозных тестов с Cypress
В Agile-подходе часто используются так называемые пользовательские истории, которые формулируются примерно так:
«Когда пользователь выполняет определённое действие, он должен увидеть определённый результат».
Чтобы написать сквозной тест для такой истории, нужно воспроизвести действия пользователя в тесте и убедиться, что поведение приложения после этого соответствует ожидаемому. При тестировании фронтенда обычно нужно выполнить следующие шаги:
- Перейти на нужную страницу приложения.
- Найти элемент на странице (например, кнопку или поле ввода).
- Взаимодействовать с элементом (нажать, перетащить, ввести текст и т.д.).
- Проверить, что после взаимодействия поведение приложения соответствует ожидаемому.
Для примера напишем три теста, которые проверят выполнение действий на сайте Википедия, имитируя поведение пользователя. Для каждого теста сначала будет описана пользовательская история, а затем — сам тест.
Cypress используется здесь для тестирования сайта в учебных целях. Но обычно инструмент применяют только для тестирования собственных проектов.
Прежде чем приступить к написанию тестов, сначала создадим папки для хранения тестов. Для этого выполните команды:
$ mkdir cypress && cd cypress $ mkdir integration && cd integration
Тесты будут размещаться в папке cypress/integration. Это стандартное место, которое Cypress использует по умолчанию. При необходимости это можно изменить через настройку integrationFolder.
Тест 1. Поиск на главной странице
“Когда пользователь открывает главную страницу, вводит текст в строку поиска и нажимает на значок поиска, он должен увидеть страницу с результатами по введённому запросу”.
Это простая пользовательская история, где проверяется, правильно ли работает поиск на главной странице. Давайте напишем тест.
В папке cypress/integration создайте новый файл homepage_search_spec.js и откройте его в текстовом редакторе. Добавьте следующий код:
describe('Testing Wikipedia', () => {
it('I can search for content', () => {
cy.visit('https://www.wikipedia.org');
cy.get("input[type='search']").type('Leo Panthera');
cy.get("button[type='submit']").click();
cy.contains('Search results');
cy.contains('Panthera leo leo');
});
});
Теперь давайте разберём тест и посмотрим, насколько он соответствует нашей пользовательской истории.
- Третья строка – переход на страницу приложения.
- Четвертая строка – поиск элемента на странице (строка поиска) и взаимодействие с ним (ввод текста).
- Пятая строка – поиск кнопки отправки запроса и клик по ней.
- Шестая строка – проверка отображения результатов поиска на странице.
- Седьмая строка – проверка наличия конкретного результата.
Большинство сквозных тестов будут следовать подобной структуре. Не нужно беспокоиться о том, как приложение выполняет эти действия в фоне. Достаточно описать, что должно происходить, а Cypress упростит чтение и написание тестов, сделав эти задачи доступными даже не программистам.
Теперь давайте запустим тест. Откройте командную строку и выполните команду npm test. Cypress автоматически найдёт и выполнит все тесты в папке cypress/integration:
Тесты можно запускать не только через командную строку. Также их можно запустить в браузере, чтобы в реальном времени увидеть, как Cypress их выполняет, следуя указанным вами действиям.
В командной строке выполните следующую команду:
npm run cypress:open
Должно появиться примерно такое окно:
Чтобы запустить тесты, нажмите на homepage_search_spec.js, и у вас должно появиться другое окно:
В верхнем левом углу окна можно увидеть, сколько тестов прошло успешно, а сколько неудачно. Справа отображается то, что пользователь увидит, взаимодействуя с приложением согласно тесту.
С помощью этого простого теста мы убедились, что функция поиска на Википедии удовлетворяет требованиям нашей гипотетической пользовательской истории.
Тест 2. Переключение языка на главной странице
“Когда пользователь открывает главную страницу, нажимает на переключатель языка и выбирает новый язык, он должен быть перенаправлен на соответствующий домен”.
Для этого теста нужно создать файл homepage_switch_language_spec.js в папке cypress/integration. Откройте его в текстовом редакторе и пропишите следующий код:
describe('Testing Wikipedia', () => {
it('A user can switch languages', () => {
cy.visit('https://wikipedia.org');
cy.contains('Read Wikipedia in your language');
cy.get('#js-lang-list-button').click();
cy.contains('Yorùbá').click();
cy.url().should(
'equal',
'https://yo.wikipedia.org/wiki/Oj%C3%BAew%C3%A9_%C3%80k%E1%BB%8D%CC%81k%E1%BB%8D%CC%81',
);
cy.contains('Ẹ kú àbọ̀');
});
});
Давайте разберёмся с синтаксисом Cypress. Третья строка – указание Cypress перейти на главную страницу Википедии. В четвёртой строке мы проверяем, что на странице есть текст “Read Wikipedia in your language”, чтобы убедиться, что мы на правильной странице.
В пятой строке мы ищем кнопку для смены языка по её ID и имитируем клик по ней. ID элемента можно узнать, исследуя его в инструментах разработчика в браузере Chrome. В Cypress есть несколько способов выбрать элемент на странице, например, по ID, классу или тегу.
В этом тесте мы выбрали кнопку по её ID, а в предыдущем использовали имя тега и атрибут. Для получения подробной информации о способах выбора элементов можно ознакомиться с официальной документацией Cypress.
В шестой строке мы ищем элемент с текстом “Yorùbá” на странице и кликаем по нему.
Это приведёт к тому, что Википедия перенаправит нас на страницу с выбранным языком. В нашем случае мы выбрали западноафриканский язык йоруба. Мы можем убедиться, что нас перенаправили на правильную страницу, проверив URL.
В седьмой строке мы вызываем команду cy.url(), чтобы получить URL текущей страницы, и проверяем, что он соответствует нужному домену для языка йоруба. В восьмой строке добавляется дополнительная проверка, чтобы убедиться, что на странице есть контент на языке йоруба.
Интересный факт: «Ẹ kú àbọ̀» означает «добро пожаловать» на языке йоруба и произносится как «Э Ку Або».
Когда вы запустите тест с помощью следующей команды, он должен пройти успешно. Вместо того, чтобы запускать все тесты, как показано ранее, используется опция --spec, чтобы запустить конкретный тест в Cypress:
$ npm test -- --spec .\cypress\integration\homepage_switch_language_spec.js
Тест 3. Проверка значения слова в Викисловаре
Когда пользователь заходит на главную страницу Wikipedia и нажимает ссылку Wiktionary (Викисловаря), он перенаправляется на сайт wiktionary.org. Далее пользователь вводит слово в строку поиска на Wiktionary, нажимает Enter и попадает на страницу с определением этого слова.
Давайте рассмотрим ещё одну простую пользовательскую историю. Допустим, мы хотим найти значение слова «svelte» в Викисловаре. Для начала мы перейдём на главную страницу Википедии и откроем Викисловарь.
В папке cypress/integration создаём новый файл с именем homepage_search_definition_spec.js, открываем его и вставляем следующий код:
describe('Testing Wikipedia', () => {
it('A user can search for a word', () => {
cy.visit('https://wikipedia.org');
cy.get('.other-project-link')
.eq(2)
.click();
cy.url().should('equal', 'https://www.wiktionary.org/');
cy.get('#searchInput').type('Svelte{enter}');
cy.contains('Etymology');
cy.contains('svelte');
});
});
Давайте разберём, что происходит в этом коде.
В третьей строке мы заходим на главную страницу Википедии. В четвертой строке выбираем ссылку на Викисловарь по её классу, кликаем по ней. Обратите внимание, что нумерация начинается с нуля.
Прежде чем двигаться дальше, стоит обратить внимание на один момент: если ваш код использует автоматически сгенерированные CSS-классы, то выбор элементов по именам их классов может привести к непоследовательным результатам тестов. В таких случаях лучше использовать ID элементов или их тип и атрибуты.
В седьмой строке убеждаемся, что мы перенаправлены на правильный сайт, проверяя URL с помощью cy.url(). Стоит учитывать, что при тестировании собственного приложения необходимость перехода на другой домен встречается редко. Поэтому данный тест будет провален, если мы не добавим параметр "chromeWebSecurity": false в нашу конфигурацию cypress.json.
В восьмой строке находим поле для поиска по его ID. Затем мы вводим слово “svelte” и нажимаем {enter}. Это перенаправит нас на страницу с результатами поиска.
В девятой и десятой строках мы проверяем, что на странице есть слова “etymology” и “svelte”, чтобы удостовериться, что мы на правильной странице. Чтобы запустить тест, используйте команду или браузер:
$ npm test -- --spec .\cypress\integration\homepage_search_definition_spec.js
Заключение
В этой статье мы показали, как легко проверить правильность работы веб-приложения с помощью сквозных тестов в Cypress.
Важно помнить, что мы лишь немного затронули возможности Cypress. Например, вы можете делать скриншоты ваших тестов и смотреть записанные видео в папке cypress/videos. Также можно создавать собственные команды, чтобы избежать дублирования кода, имитировать ответы API с помощью фикстур и многое другое.
Хорошо продуманные сквозные тесты позволяют заранее обнаружить баги и сэкономить время на отладке. А чтобы лучше разобраться в этой теме, мы рекомендуем изучить официальную документацию Cypress и практиковаться с написанием реальных тестов.
Перевод статьи «How to write end-to-end tests with Cypress and Node.js».