Знакомство с комплексным тестированием в Angular с помощью Protractor

Знакомство с комплексным тестированием в Angular с помощью Protractor

От автора: Protractor – популярный фреймворк комплексного тестирования. С помощью Protractor Angular приложение можно тестировать в реальном браузере, имитируя взаимодействия, как с реальным пользователем. Комплексное тестирование проверяет, чтобы приложение вело себя ровно так, как ожидает пользователь. Помимо этого, тесты напрямую не относятся к коду.

Знакомство с комплексным тестированием в Angular с помощью Protractor

Protractor запускается поверх популярного Selenium WebDriver (API для автоматизации браузера и тестирования). Помимо функций Selenium WebDriver Protractor предлагает локаторы и методы для захвата UI компонентов приложения Angular. В этом уроке вы узнаете о:

Установке, настройке и запуске Protractor

Написании базовых тестов для Protractor

Объектах страниц и о том, как их использовать

Руководствах для написания тестов

Написании E2E тестов для приложения с нуля и до самого конца

Звучит круто? Но сначала о главном.

Нужно ли мне использовать Protractor?

Если вы работали с Angular CLI, то вы должны знать, что по умолчанию с ним идет 2 фреймворка для тестирования. И это:

Юнит тесты на Jasmine и Karma

Комплексные тесты на Protractor

Основное различие – первый используется для тестирования логики компонентов и сервисов, а второй используется для проверки функциональности высокого уровня приложения (в том числе и UI элементы).

Если вы ни разу не тестировали в Angular, рекомендую почитать серию статей «тестирование компонентов в Angular на Jasmine», чтобы лучше понять принцип.

В первом случае можно использовать мощь тестовых утилит Angular и Jasmine для написания не просто юнит тестов для компонентов и сервисов, а также для написания базовых UI тестов. Однако если необходимо протестировать front end функционал приложения полностью, Protractor вам в руки. Protractor API совмещен с шаблонами проектирования, такими как объекты страниц, что упрощает написание тестов и делает их более читаемыми. Пример.

Настройка Protractor

Если для генерации проекта вы используете Angular CLI, настройка Protractor не вызовет затруднений. Команду ng new создает следующую структуру папок.

Знакомство с комплексным тестированием в Angular с помощью Protractor

Стандартный шаблон проекта, созданный Protractor, зависит от двух файлов для запуска тестов: специальные файлы из папки e2e и файл конфигураций (protractor.conf.js). Давайте посмотрим, как настраивается файл protractor.conf.js:

Если вы умеете запускать тесты в Chrome, то можете оставить все, как есть и пропустить оставшуюся часть раздела.

Настройка Protractor с Selenium Standalone Server

Запись directConnect: true подключает Protractor напрямую к драйверам браузера. Однако на момент написания этого урока Chrome – единственный поддерживаемый браузер. Если нужна поддержка нескольких браузеров или другой браузер, вам понадобится установить Selenium standalone server. Что для этого нужно сделать.

Установите Protractor глобально с помощью npm:

Это установит инструмент командной строки для вебдрайвер менеджера вместе с Protractor. Теперь обновите вебдрайвер менеджер на использование последних дистрибутивов и запустите Selenium standalone server.

Установите directConnect: false и добавьте свойство seleniumAddress:

Конфиг файл на GitHub дает больше информации о вариантах настройки в Protractor. Я в уроке буду использовать стандартные опции.

Запуск тестов

Если вы работаете в Angular CLI, то для запуска тестов вам нужна команда ng e2e. Если кажется, что тесты медленные, это потому что Angular должен компилировать код при каждом запуске e2e. Если хотите немного ускорить их, вам нужно сделать следующее. Запустите ng serve. Откройте новую вкладку в консоли и запустите:

Теперь тесты должны грузиться быстрее.

Наша цель

Мы будем писать E2E тесты для стандартного приложения Pastebin. Клонируйте объект из репозитория GitHub. Обе версии (стартовая без тестов и финальная с тестами) доступны в отдельных ветках. Клонируйте ветку starter. Можете пробежаться по коду, чтобы вручную ознакомиться с приложением.

Давайте кратко опишем наше приложение Pastebin. Приложение сначала будет загружать список вставок (полученных с ложного сервера) в таблицу. У каждой строки в таблице будет кнопка View Paste, по клику на которую будет открываться модальное окно первичной загрузки. Модальное окно отображает данные вставки с опциями редактирования и удаления. В конце таблицы есть кнопка Create Paste, с помощью которой можно добавить новые вставки.

Знакомство с комплексным тестированием в Angular с помощью Protractor

Оставшаяся часть урока посвящена написанию Protractor тестов в Angular.

Основы Protractor

В файле спецификации, который оканчивается на .e2e-spec.ts, будут храниться реальные тесты приложения. Все тестовые спецификации будут помещаться в папку e2e, так как мы настроили, чтобы Protractor искал спецификации именно в этом месте. При написании тестов на Protractor необходимо учесть 2 вещи:

Синтаксис Jasmine

Protractor API

Синтаксис Jasmine

Создайте новый файл test.e2e-spec.ts с кодом.

Здесь описывается, как наши тесты будут организованы в файле спецификации с помощью синтаксиса Jasmine. describe(), beforeEach() и it() – глобальные функции Jasmine.

У Jasmine хороший синтаксис для написания тестов, и он отлично работает с Protractor. Если вы не знакомы с Jasmine, рекомендую сначала зайти на страницу Jasmine на GitHub.

Блок describe разбивает тесты на логические сьюты. В каждом блоке describe (или тест сьюте) может быть несколько блоков it (тестовых спецификаций). Сами тесты пишутся в тестовых спецификациях.

Вы спросите: «зачем мне делать такую структуру в тестах?». Тест сьют логически описывает отдельную функцию приложения. Например, все тестовые спецификации по компоненту Pastebin должны, в идеале, быть покрыты в блоке describe с заголовком Pastebin Page. Однако это может привести к избыточности тестов, но сделает их более читаемыми и обслуживаемыми.

В блоке describe может быть метод beforeEach(), который запускается один раз перед каждой спецификацией в этом блоке. То есть если вам перед каждым тестом необходимо редиректить браузер на заданный URL, разместите редирект внутри beforeEach().

Выражения expect, принимающие значение, сцеплены с функциями поиска. Реальное и ожидаемое значение сравниваются, и возвращается булево значение, показывающее, провалился тест или нет.

Protractor API

Давайте «обтянем наш скелет плотью».

browser.get(‘/’) и element(by.css(‘.pastebin’)).getText() – часть Protractor API. Давайте испачкаем руки и запрыгнем в Protractor. Популярные компоненты из Protractor API перечислены ниже.

Browser(): вызывается для всех операций на уровне браузера, например, навигация, дебагинг и т.д.

Element(): используется для поиска элемента в DOM по условию поиска или связки условий. Возвращается объект ElementFinder, с ним можно выполнять операции типа getText() или click().

element.all(): ищет массив элементов по связке условий. Возвращает объект ElementArrayFinder. К ElementArrayFinder применимы все операции от ElementFinder.

Локаторы: с помощью локаторов в приложении Angular можно искать элементы.

Мы очень часто будем использовать локаторы, поэтому вот самые исползуемые:

By.css(‘selector-name’): самый часто используемый локатор для поиска элемента по названию CSS селектора

by.name(‘name-value’): обнаруживает элемент по значению атрибута name

by.buttonText(‘button-value’): находит элемент button или массив button по внутреннему тексту

Обратите внимание: локаторы by.model, by.binding и by.repeater не работают в приложениях Angular 2+ на момент написания урока. Используйте CSS локаторы. Напишем тесты для нашего приложения Pastebin.

Код выше работает, можете сами проверить. Однако не будет ли удобнее писать тесты без словаря Protractor в файле спецификации? О чем я говорю:

Спецификации кажутся проще без дополнительного мусор от Protractor. Как я это сделал? Позвольте познакомить вас с Page Objects.

Page Objects

Page Objects – шаблон проектирования, популярный среди автоматизаторов кейсов. Объект страницы моделирует страницу или часть приложения с помощью объектно-ориентированного класса. Все объекты (нашего теста), такие как текст, заголовки, таблицы, кнопки и ссылки захватываются в объект страницы. Эти объекты страниц можно импортировать в файл спецификации и выполнять их методы. Это снижает повторения в коде и упрощает его обслуживание.

Создайте папку page-objects и добавьте новый файл pastebin.po.ts. Все объекты компонента Pastebin будут здесь. Как я раньше уже сказал, мы разбили все приложения на 3 компонента, и у каждого компонента будет объект страницы. Схема именования .po.ts, имена можете придумать, какие угодно.

Макет страницы для тестирования.

Знакомство с комплексным тестированием в Angular с помощью Protractor

Код pastebin.po.ts

Что мы уже знаем. Protractor API возвращает объекты. Пока что мы работали с объектами трех типов. Это:

promise.Promise

ElementFinder

ElementArrayFinder

Если коротко, element() возвращает ElementFinder, element().all возвращает ElementArrayFinder. С помощью локаторов (by.css, by.tagName и т.д.) можно искать положение элемента в DOM и передавать его в element() или element.all().

ElementFinder и ElementArrayFinder можно сцепить действиями, например, isPresent(), getText(), click() и т.д. Эти метод возвращают промис, который разрешается, когда завершается определенное действие.

Почему у нас в тесте нет цепи then() – потому что Protractor делает это внутри. Тесты кажутся синхронными, хотя это не так. Поэтому наш код будет линейным. Но я рекомендую использовать синтаксис async/await , чтобы защитить код.

Ниже показано, как можно сцепить объекты ElementFinder. Это очень удобно, если в DOM есть несколько селекторов на одно имя, а нам нужно выбрать правильное.

Наш код для объекта страницы готов. Давайте импортируем его в спецификацию. Код для первичных тестов.

Организация тестов и рефакторинг

Тесты должны быть организованы так, чтобы общая структура выглядела просто и понятно. Вот пара советов, которых следует придерживаться при организации E2E тестов.

Отделите E2E тесты от юнит тестов

Сгруппируйте E2E тесты разумно. Организуйте тесты по структуре проекта

Если у вас много страниц, у объектов страниц должен быть отдельный путь

Если объекты страниц делят методы (например navigateToHome()), создайте объект базовой страницы. Модели других страниц могут наследоваться от модели базовой страницы

Сделайте тесты независимыми друг от друга. Вам не нужно, чтобы все тесты провалились из-за небольшого изменения в UI, так ведь?

Не используйте проверки в определениях объектов страниц. Проверки должны быть в файле спецификации

Следуя советам выше, мы получаем следующую иерархию страниц и организацию файлов.

Знакомство с комплексным тестированием в Angular с помощью Protractor

О файлах pastebin.po.ts и mainPage.e2e-spec.ts мы уже говорили. Ниже представлены оставшиеся файлы. Base Page Object

Объект Add Paste Page

Знакомство с комплексным тестированием в Angular с помощью Protractor

Файл Add Paste Spec

Упражнения

Мы кое-что не учли: тесты для кнопки View Paste и модальное окно, которое появляется после клика на нее. Это будет ваше упражнение. Но я дам подсказку. Структура объектов страницы и спецификаций для ViewPastePage такая же, как для AddPastePage.

Знакомство с комплексным тестированием в Angular с помощью Protractor

Вам необходимо протестировать следующие сценарии:

Страница ViewPaste должна иметь кнопку, по клику должна появляться модалка

Модальное окно должно отображать данные последней вставки

Модальное окно должно позволять обновлять значения

Должна работать кнопка удаления

Попробуйте максимально придерживаться советов. Если сомневаетесь, переключитесь на финальную ветку, чтобы увидеть конечный черновик кода.

Заключение

Вот и все. В этой статье мы научились писать комплексные тесты для Angular приложения с помощью Protractor. Сначала мы поговорили о юнит тестах и e2e тестах, после чего изучили установку, настройку и запуск Protractor. Оставшаяся часть урока была отдана на написание тестов под демо приложение Pastebin.

Автор: Manjunath M

Источник: //code.tutsplus.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: