Сквозные тесты (e2e) написать намного сложнее, чем модульные тесты, потому что они полагаются на множество различных частей вашего приложения. Ваш API, ваш javascript, ваша структура HTML и даже ваш CSS. Чем больше становится ваше приложение, тем сложнее его поддерживать. Они могут стать настоящим кошмаром, если будут слишком тесно связаны с перечисленными выше частями.
В этом руководстве мы реализуем базовый сценарий и рассмотрим передовые практики, которые помогут в написании поддерживаемых тестов.
Наш образец приложения
Давайте возьмем образец приложения - одну страницу с кнопкой, при нажатии на которую отображается небольшой текст. Вот наш html:
(Файл javascript не содержит ничего, кроме объявления модуля приложения)
Сценарий
Вот что наша команда QA хочет, чтобы мы протестировали:
Здесь используется синтаксис Gherkin, язык, который упрощает понимание шагов для людей, не имеющих технического образования.
Поместим это в файл функций с именем home.feature.
В любом случае, давай займемся!
Настройка транспортира
Мы собираемся установить webdriver-manager, огурец, транспортир и его плагин для огурца.
npm init (если еще не сделали)
npm install --save-dev webdriver-manager protractor cucumber protractor-cucumber-framework
Теперь напишем конфигурационный файл транспортира:
Все готово, можно приступать к написанию тестов.
Написание определений шагов
Если ты сейчас бежишь
webdriver-manager update && webdriver-manager start
protractor <path to the configuration file we just wrote>
Должен получиться следующий результат:
Здесь транспортир фактически говорит нам, как мы можем реализовать наши тесты. Вы можете видеть, что фреймворк транспортира-огурца работает с использованием регулярных выражений, чтобы найти правильные тесты для запуска для каждого шага Gherkin.
С более развитыми тестами вы можете передавать параметры, используя группы захвата RegExp. Например:
Напишем наш первый шаг. В этом уроке мы собираемся использовать Chai как средство утверждения, но не стесняйтесь использовать тот, который вам нравится.
В файле home.js напишем:
(Вам нужно будет установить с помощью npm chai и chai-as-обещанный или ваш любимый ассертер)
На этом этапе мы скажем транспортиру, на какую кнопку нацелить, а затем щелкнем по ней. Мы можем сделать это с помощью набора селекторов, которые позволяют нам выбирать по тексту, по CSS, по повторителю, по имени .. Вы можете использовать общие для webdriver перечисленные здесь https://github.com/angular/protractor/blob /master/docs/locators.md и перечисленные здесь специфические для транспортира http://www.protractortest.org/#/api?view=ProtractorBy
Вот где может начаться спаривание. В своих тестах вы собираетесь начать ориентироваться на веб-элементы, используя классы css или элементы html, это может стать беспорядочным. Мы собираемся разделить логику и структуру страницы с помощью объектов страницы.
Написание нашей домашней страницы Page Object
Используя объекты страницы, мы создаем своего рода интерфейс между реальной страницей и логикой наших тестов. Если мы решим изменить класс css в будущем, нам не нужно будет изменять все наши тесты, мы просто обновим объект страницы, и все последует.
Вот как может выглядеть объект страницы для нашей простой домашней страницы:
Неплохо, но еще не идеально. Если мы решим изменить класс кнопки, нам все равно придется изменить объект нашей страницы. Я предлагаю добавить к нашей кнопке специальный класс для наших тестов e2e:
И обновим наш объект страницы:
Таким образом, наши тесты ни к чему не привязаны. Мы можем изменить текст кнопки, ее внешний вид, ее классы, наши тесты все равно пройдут.
Использование объекта страницы и написание остальных тестов
Давайте импортируем этот pageObject в наши тесты:
Затем используйте его в нашем определении шага:
Теперь напишем последний шаг, который является ожиданием сценария. Начнем с добавления класса e2e в наш HTML-элемент:
Затем обновите наш объект страницы:
И используйте его в нашем определении шага:
Если мы снова запустим транспортир, мы увидим, что все тесты пройдены!
Scenario: Button Click ✔ Given I view the homepage ✔ When I click on the Start button ✔ Then I should see a message telling me that the button was clicked 1 scenario (1 passed) 3 steps (3 passed) 0m00.709s
Не знаю, как вы, но меня это радует!
Я рекомендую прочитать руководство по стилю транспортира, чтобы получить более подробное представление о том, как вы должны структурировать свои тесты: http://www.protractortest.org/#/style-guide
Как всегда, если вам нравится писать тестируемый и поддерживаемый код, приходите поздороваться!
