e2e тестирование приложений. Используя Protractor

tsumbaluk.in.ua29 Апрель 2017

e2e тестирование что это?

GUI (Graphical user interface - графический интерфейс пользователя) или End-to-End (E2E) это тестированием с точки зрения конечного пользователя. То-есть прокликивание кнопочек, заполнение авторизационных полей, скроллинг к определенной области и.т.д. Как по мне это самый действенный и эффективный вид тестирования front-end. Так как приносимая выгода от написания и отладки тестов должна превышать затраты! И это как раз тот случай, представьте приложением которое имеет в своем арсенале около полу сотни элементов управления при доработке и расширении функционала вы неизбежно задеваете переплетающиеся модули и классы и просто прокликать каждую из кнопок проверяя не сломал ли ты чего, стает очень не тревиальной задачей. Естественно есть вариант взять мануального тестировщика, но люди устают и ленятся, а ваш скрипт может гонять тесты круглосуточно!

Protractor как инструмент автоматизированного тестирования front-end

Итак я front-end работаю с Angular.js тестирую с помощью Protractor который в свою очередь основан на selenium. Selenium позволяет управлять поведением браузера, то-есть эмулировать сценарий поведения пользователя программно. Давать программные команды protractor позволяет с помощью фреймворка Jasmine, что не может не радовать так как Jasmine широко используемый инструмент, имеющий кучу примеров и уроков по работе с ним.

Список необходимых инструментов для запуска e2e тестов

  • Google chrome: желательно обновить до последней версии на данный момент доступна версия 58.0.3029.81 (64-bit))
  • nodejs: как и в случае с браузером если node у вас установлен убедитесь что его версия не ниже 6. В консоли команда node -v
  • Jdk: для запуска selenium необходимо поставить Java Development Kit

Установка Protractor

Если вы установили все из выше перечисленного списка тогда открываем консоль и выполняем команду:

npm install -g protractor

После завершения установки для достоверности можно выполнить protractor --version. Далее необходимо обновить веб-драйвер который эмулирует действия пользователя, команда:

webdriver-manager update

Если апдейт прошел успешно можно запускать selenium сервер. Важно для выполнения тестов сервер должен быть запущен в фоновом режиме. Команда:

webdriver-manager start

Время первых тестов!

Чтобы удостовериться в работоспособности Protractor можно запустить пример тестов поставляемый из коробки. Если вы установили protractor глобально , то по этому пути C:\Users\Администратор\AppData\Roaming\npm\node_modules\protractor\example (Администратор меняем на имя вашего компьютера) вам доступен пример. Переходим из консоли в данную директорию и запускаем:

protractor conf.js

Хотелось бы сказать пару слов о структуре тестов и конфигурационном файле. Относительно конфига тут все просто либо просто открываем пример conf.js из папки example поставляемой protractor либо смотрим документацию. Что же касается архитектуры то я рекомендую использовать Page Object Pattern вот тут вы найдете всю необходимую информацию.

Автоматизированный запуск gulp-protractor

Если у вас сборка проекта на gulp. То скорее всего вам, как и мне захочется добавить таск запускающий тестирование. Для этого устанавливаем в ваш проект gulp-protractor команда:

npm install --save-dev gulp-protractor

Ниже пример кода для gulpfile.js

var protractor = require("gulp-protractor").protractor;
var webdriver_update = require("gulp-protractor").webdriver_update;
gulp.task('webdriver-update', webdriver_update);
gulp.task('e2e', function(callback) {  
  gulp.src('tests/*.js')
    .pipe(protractor({
      configFile: 'conf.js', 
      args: ['--baseUrl', 'http://localhost:3000']
    }))
    .on('error', function (e) {
      throw e
    });
});
gulp.task('protractor', ['webdriver-update', 'e2e'], function(callback) {callback();});

Запускаем protractor с помощью gulp

gulp protractor

Напоследок хочу сказать, во время настройки и запуска тестов у меня в основном возникали проблемы связанные с путями. Так что внимательно прописуйте конфиги и обращайте внимание в какой директории вы находитесь перед запуском команд.И только потом начнайте штурмовать gogle!)

Новое в блоге

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Gulp инструмент для удобной и быстрой front-end разработки!
tsumbaluk.in.ua || 05.10.2016

Gulp инструмент для удобной и быстрой front-end разработки!

Как определить страну и город по IP адресу, javascript?
tsumbaluk.in.ua || 05.10.2016

Как определить страну и город по IP адресу, javascript?

Particles.js что это такое?
tsumbaluk.in.ua || 05.10.2016

Particles.js что это такое?