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

Для автоматизации тестирования UI существуют специальные инструменты. Одним из популярных является Protractor - библиотека для тестирования Angular приложений. Далее мы разберем основы работы с этим инструментом.

Что такое Protractor?

Protractor - это инструмент для end-to-end тестирования Angular приложений. Он позволяет писать и запускать автоматизированные UI тесты, написанные на JavaScript.

Основные возможности Protractor:

Тестирование AngularJS приложений
Использование WebDriver для взаимодействия с браузером
Синхронизация с AngularJS для упрощения тестирования
Ожидания для элементов страницы
Мощный API для поиска элементов и взаимодействия с ними

Protractor хорошо подходит для:

Функционального тестирования UI
Проверки работы приложения целиком
Тестирования потоков пользователя

Установка и настройка Protractor

Для работы с Protractor нужно установить:

Node.js
Protractor npm пакет
WebDriver

Шаги по установке:

Установить Node.js
Установить Protractor через npm:

npm install -g protractor

Настроить WebDriver, например Selenium:

npm install -g webdriver-manager
webdriver-manager update

Создать конфигурационный файл protractor.conf.js

В нем указать:

селениум сервер
браузер для тестов
опции тестирования

Настроить npm scripts для удобного запуска

Первый тест на Protractor

Рассмотрим пример простого теста на Protractor:

describe('Protractor Demo App', function() {

  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');

    expect(browser.getTitle()).toEqual('Super Calculator');
  });

});

describe и it - блоки для группировки тестов
browser - объект для взаимодействия с браузером
browser.get - переходит на указанный url
expect - утверждение, что title страницы равен 'Super Calculator'
toEqual - проверка равенства текущего и ожидаемого значения

Этот простой тест открывает страницу приложения и проверяет заголовок.

Работа с элементами

Чтобы тестировать UI, нужно уметь находить элементы на странице и взаимодействовать с ними.

Поиск элементов

Основные локаторы в Protractor:

element - поиск по css selector
by.binding - по связыванию в Angular
by.model - по ng-model
by.repeater - по ng-repeat

Пример поиска кнопки:

let button = element(by.css('button.calculate'));

Взаимодействие с элементами

Методы для взаимодействия:

click() - клик по элементу
sendKeys() - ввод текста в поле
clear() - очистка поля ввода
getAttribute() - получение атрибута
getText() - получение текста элемента

Пример ввода текста в поле:

let input = element(by.model('first'));
input.sendKeys('10');

Ожидания и утверждения

Чтобы тесты были стабильны, нужно использовать ожидания. Они позволяют дождаться загрузки элементов перед взаимодействием.

Основные типы ожиданий:

browser.wait - явное ожидание
element(by.css('.class')).isPresent() - неявное ожидание элемента
element.isDisplayed() - элемент видим на странице

Утверждения используются для проверок:

expect(value).toBe(true) - проверка на истинность
expect(input.getAttribute('value')).toBe('10') - проверка атрибута

Это позволяет писать стабильные и надежные UI тесты.

Запуск тестов и отчеты

Чтобы запустить тесты, используем команду:

protractor protractor.conf.js

По умолчанию, она запускает тесты в браузере и выводит результаты в консоль.

Для генерации отчетов, можно использовать пакет jasmine-spec-reporter:

npm install --save-dev jasmine-spec-reporter

И добавить его в конфиг:

onPrepare: () => {
  require('jasmine-spec-reporter');
}

Теперь после запуска тестов будет сгенерирован подробный отчет о прогоне.

Итог

Эти знания позволят вам начать писать автоматизированные UI тесты для своих Angular проектов с помощью Protractor! Для более продвинутого использования стоит изучить Page Objects, тестирование форм, работу с элементами и другие возможности этого инструмента. Удачи в тестировании!