Недавно для себя открыл интересный npm модуль elementor. Крайне странно, что я не слышал о нем ничего от “избранных” мира JS. Он представляет из себя что-то на подобие оболочки для Protractor для удобной работы с локаторами.

Думаю даже ничего рассказывать не нужно все показано в этом 4х минутном ролике:

Кому лень смотреть 4 минуты (хотя я крайне рекомендую), вот основные моменты:

• Удобное тестирование локаторов в браузере:

• Дополнительная вкладка в WebDeveloper Tools, которая показывает возможные локаторы для выбранного элемента:

• Плагины для WebStorm и Sublime, которые позволяют сразу выполнять локаторы в коде:

Установка и запуск

Так как это npm модуль, то для установки достаточно выполнить команду:

[shell]
npm install elementor -g
[/shell]

А потом чтобы запустить:

[shell]
elementor https://angularjs.org
[/shell]

* При этом конечно у вас уже должны быть установлены protractor и запущен веб-драйвер ( об этом можно почитать тут и тут).

UPD: с новым релизом появилась возможность тестировать сайты без AngularJS, для этого запускаем командой:

[shell]elementor https://google.com –nonAngular[/shell]

Подробно о protractor можно почитать тут и тут.

Настройка конфига

Ключевые опции это capabilities и seleniumAddress:

[javascript]
capabilities: {
//эти параметры можно получить на странице – https://www.browserstack.com/automate
‘browserstack.user’ : ‘my_user_name’,
‘browserstack.key’ : ‘my_secret_key’,

‘browserstack.local’ : ‘true’,

‘browser’ : ‘Chrome’,
‘browser_version’ : ‘36.0’,
‘os’ : ‘OS X’,
‘os_version’ : ‘Mavericks’,
‘resolution’ : ‘1024×768’
},

seleniumAddress: ‘http://hub.browserstack.com/wd/hub’
[/javascript]

Более подробно о возможных параметрах тут.

Подробный лог (например: для отладки) можно включить следующей опцией:

[javascript]
capabilities: {
//…
‘browserstack.debug’ : ‘true’,
//…
},
[/javascript]

Настройка Browserstack для локального запуска

Достаточно скачать(тут) и запустить файл:

[bash]
./BrowserStackLocal my_secret_key localhost,3000,0
[/bash]

3000 – номер порта, на котором локально проект (только для случая локального тестирования)

Запуск протрактора

Тут ничего нового, так же команда с указанием конфиг-файла:

[bash]
protractor protractor-browserstack.config.js
[/bash]

UPD: Если вы тестируете реальный сайт (не локальное окружение), то BrowserStackLocal запускать не нужно. Но в любом случае его лучше иметь для локальной отладки.

UPD2: Если вы хотите использовать несколько браузеров (и запускать тесты параллельно) используйте опцию multiCapabilities вместо capabilities.

* Если что, автоматические тесты – это платная услуга, но ее можно попробовать бесплатно (на данный момент предоставляется 100 минут бесплатно)

О том как установить и запустить Protractor уже было в этом посте – Тестируем AngularJS используя Protractor. А сейчас мы сделаем фокус  на том, как мы можем интегрировать Protractor в нашу систему и подкючить к Grunt.

Подключаем Protractor к Grunt

Для подключение нам необходимо поставить специальный таск-плагин grunt-protractor-runner к grunt путем выполнения следующей команды:

$ npm install grunt-protractor-runner

После чего можем дополнить наш конфигурационный файл секцией для него:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {}
}
[/javascript]

protractor.conf.js – конфигурационный файл, который уже у нас есть (создание подробно описано в предыдущем посте)

all: {} – grunt требует как минимум один “target”, поэтому, если все параметры уже указаны в конфиге протрактора, то можем просто добавить пустую сецию.

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

[bash]
$ grunt protractor:all
[/bash]

PhantomJS и Protractor

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

Теперь вместо вебдрайвера мы должны запустить фантом-сервер:

$ phantomjs --webdriver=4444

а наша секция grunt конфига преобразиться следующим образом:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {
options: {
args:{
seleniumAddress: ‘http://localhost:4444’,
capabilities: {
browserName: ‘phantomjs’
}
}
}
}
}
[/javascript]

иногда бывает необходимо специфицировать конкретную версию/путь к phantomjs, тогда добавляем еще одну опцию – phantomjs.binary.path, а аргументы к фантому можем передавать через опцию phantomjs.cli.args; итого получим:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {
options: {
args:{
seleniumAddress: ‘http://localhost:4444’,
capabilities: {
browserName: ‘phantomjs’,
‘phantomjs.binary.path’:’./node_modules/.bin/phantomjs’,
‘phantomjs.cli.args’: [‘–ignore-ssl-errors=true’, ‘–web-security=false’]
}
}
}
}
}
[/javascript]

Если мы хотим, чтобы вебдрайвер запустил фантом за нас, то просто не указываем параметр seleniumAddress.

Отладка тест-сценариев в WebStorm

Пару слов о том как можно дебажить тесты в WebStorm. Что для этого нужно сделать:

Открываем настройки Run/Debug:

Добравляем новую конфигурацию для Node.js:

Прописываем следующие ключевые настройки:

• Working directory: корневой путь вашего проекта (например: ‘/Users/stevermeister/workspace/academy-js’)
• JavaScript file: путь к cli.js файлу протрактора (как правило это node_modules\protractor\lib\cli.js)
• Application parameters: путь к файлу конфиг файлу протрактора(например: protractor.conf.js)

Сохраняем. Готово:

Теперь можно проставлять бреймпоинты и дебажить.

Подключение вспомогательных файлов

Иногда возникает необходимость подключить файлы, которые не являются тест сценариями, но, в которых содержится вспомогательный функционал(например логин). Для этого необходимо подключаем файл сделать формата модуля node.js (module.exports), то есть(helpers.js):

[javascript]
function login(){
//…
}
function logout(){
//…
}
var Helper = {};
Helper.login = login;
Helper.logout = logout;
[/javascript]

и потом подключить в файле сценария:

[javascript]
var helpers = require(‘./helpers’);
helpers.login();
[/javascript]

Для тех, кто ранее не работал с таким синтаксисом, подчеркну: расширение “.js” в данном случае не пишется.

Примеры тест сценариев

Авторизация пользователя в приложении:

[javascript]
describe(‘Auth Module’, function() {
var ptor = protractor.getInstance();

it(‘should login user’, function() {
browser.get(‘/login’);
browser.waitForAngular();

element(by.model(‘username’)).sendKeys(browser.params.login.user);
element(by.model(‘password’)).sendKeys(browser.params.login.password);
element.all(by.css(‘.button–primary’)).first().click();

element(by.binding(‘user.name’)).getText().then(function(username) {
expect(username).equal(browser.params.login.username);
});
ptor.getCurrentUrl().then(function(url) {
expect(url.slice(-10)).equal(‘/dashboard’);
});
});
});
[/javascript]

Параметры типа пароля в тестах, понятное дело лучше не держать. Здесь они вынесены в отдельную секцию конфига протрактора (да, согласен, тоже не комильфо, но всеравно лучше, чем прям в тестах):

[javascript]
params: {
login: {
user: ‘stepan@mail.com’,
password: ‘XXXXXXXXX’,
username: ‘Stepan Suvorov’
}
}
[/javascript]

Покупка продукта

[javascript]
describe(‘Purchase item’, function() {
var ptor = protractor.getInstance();

beforeEach(function() {
helpers.logout();
helpers.login();
browser.sleep(3000);
});

it(‘should purchase an item’, function() {

browser.get(‘/items/552/buy’);
browser.sleep(3000);
element(by.css(‘.modal-window__block .button–primary’)).click();

ptor.ignoreSynchronization = true;

element(by.css(‘#mainSubmit’)).click();
element(by.css(‘input[type="submit"]’)).click();

ptor.ignoreSynchronization = false;
});
});
[/javascript]

хотел бы отметить очень важный момент в этом куске кода:

[javascript]
ptor.ignoreSynchronization = true;
[/javascript]

этим мы говорим протрактору, что мы покидаем приложение и переходим на страницу без AngularJS.

Поиск по каталогу

[javascript]
describe(‘Search’, function() {
it(‘should do search’, function() {

browser.get(‘/items’);
element(by.model(‘itemsSearch.query’)).sendKeys(‘iBrick’, protractor.Key.ENTER);

element.all(by.repeater(‘item in items’)).then(function(rows) {
var itemTitleElement = rows[0].element(by.className(‘item-tile__name’));
itemTitleElement.getText().then(function(itemTitle) {
expect(itemTitle).equal(‘iBrick Plus’);
})

});
});
});
[/javascript]

Дополнительно

• Protractor Interactive (видео от Egghead)
• Развернутый ответ на стеке по поводу возможных ошибок

Protractor – e2e тест-фреймворк сделанный на основе WebDriverJS, который приходит на смену первоначальным e2e тестам AngularJS. Запускает тесты в реальном браузере. Может быть запущен как самостоятельный бинарник либо включен в тесты как библиотека.

Установка

Для установки достаточно установить npm-пакет:

$ npm install -g protractor

проверим все ли прошло успешно:

$ protractor --version
Version 0.18.1

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

$ webdriver-manager update

а потом

$ webdriver-manager start

Запуск

Для запуска протрактора делаем:

$ protractor protractor.js

где protractor.js – предварительно созданный нами файл конфигурации.

Для старта можно использовать конфиг из примера:

// An example configuration file.
exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['example_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};

Единственно что вам нужно изменить это опцию specs(по умолчанию [‘example_spec.js’]). В ней мы укажем путь к файлу(либо группе файлов) тест-сценария. Давайте создадим его также по примеру:

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');
    element(by.model('yourName')).sendKeys('Julie');
    var greeting = element(by.binding('yourName'));
    expect(greeting.getText()).toEqual('Hello Julie!');
  });
});

Из описания видно что наш тест:

• зайдет на страницу http://www.angularjs.org
• выберет елемент связанный с моделью yourName и установит значение ‘Julie’
• выберет элемент по связке(bind) с моделью yourName
• проверит что текст приветствия равен ‘Hello Julie!’

Теперь запустим:

$ protractor protractor.js
Using the selenium server at http://localhost:4444/wd/hub
.

Finished in 5.629 seconds
1 test, 1 assertion, 0 failures

Настройка

Все возможный варианты параметров конфигурации описаны в этом примере.

Разберем некоторые

Написание тестов

По умолчанию используется Jasmine фреймворк, но при желании его можно поменять на mocha(инструкции тут ).

Глобальные переменные, которые добавляет протрактор:

• protractor – нэймспэйс-оболочка протрактора, которая содержит статические вспомогательные переменный и классы
• browser – оболочка вебдрайвера, используется для навигации и получение информации о странице
• element – вспомогательная функция для нахождения и взаимодействия с элементами
• by – коллекция стратегий поиска элементов (ccs selector, id, binding attribute)

Основные методы-помошники:

• browser.get(targetUrl) – переход на указанный URL
• element(by.css(‘.error’)) – выбор элемента по css
• element(by.model(‘modelName’)) – выбор элемента по модели
• element(by.binding(‘variableName’)) – выбор элемента по баиндингу (ng-bind или {{variableName}})
• element.all(by.repeater(‘item in items’)); – выбор списка элементов из ngRepeat
• element(by.model(‘modelName’)).getText() – получение текстового значения
• element(by.model(‘modelName’)).getAttribute(‘id’) – получение значение аттрибута
• element(by.model(‘modelName’)).sendKeys(‘Some text’) – задание значения
• element.all(by.repeater(‘item in items’)).count() – получение количества элементов в списке
• element.all(by.repeater(‘item in items’)).get(1) – получение одного элемента из списка
• element.all(by.repeater(‘item in items’)).first() – получение первого элемента из списка
• element.all(by.repeater(‘item in items’)).last() – получение последнего элемента из списка
• element.all(by.repeater(‘item in items’)).row(1).column(‘title’) – получение значение title из 2й строки
• browser.isElementPresent(by.model(‘modelName’)) – проверка наличия элемента
• $(‘.info’) – короткий алиас к element(by.css(‘.info’))   !Внимание: не путать с jQuery.
• $$(‘option’) – короткий алиас к element.all(by.css(‘option’))

Тестирование асинхронных операций

Учитавая что ваше приложение скорее всего подгружает большое количество контента асинхронно, то повозится со спецификой прийдется прилично.

Воздержусь от подробного разбора данного пункта, так как в зависимости от выбранной библиотеки подходы в написании тестов могут отличатся. Единственное что скажу: сразу для себя настроил mocha-фреймворк, с ним намного удобнее работать с асинхронными операциями.

Создание снимков экрана

Вебдрайвер позволяет делать скриншоты с помощью метода browser.takeScreenshot(), который возвращает промис, который в свою очередь вернет PNG  снимок экрана в формате base64:

browser.takeScreenshot().then(function (png) {
 //...
}

Для записи файла на диск можно написат свою вспомогательную функцию:

var fs = require('fs');
function writeScreenShot(data, filename) {
  var stream = fs.createWriteStream(filename);
  stream.write(new Buffer(data, 'base64'));
  stream.end();
}

и потом ее вызвать:

browser.takeScreenshot().then(function (png) {
    writeScreenShot(png, 'test_screen.png');
}

!Внимание: в некоторых случаях необходимо дождаться полной загрузки страницы (или отдельного компонента) чтобы не получить частичный снимой недогруженного контента.

Отладка(debugging) сценариев Protractor

Функциональные(end to end) тесты крайне сложно дебажить, потому что они зависят от системы в целом, также могут зависеть от предыдущих действий (например логин), и могут изменять состояние приложения, которое тестируют. В частности отладку тестов на вебдрайвере(webdriver) усложняют длинные соообщения об ошибках и разделение процессов: на тот, который выполняется в браузере, и тот, который выполняет сам тест сценарий.

Возможные причины остановки:

• вебдрайвер выдает ошибку, когда команда не может быть завершена, например: элемент не найден
• protractor останавливается, когда не может найти AngularJs. Если необходимо проверять так же страницы без AngularJs, тогда используйте вебдрайвер напрямую через browser.driver

Чтобы поставить точку остановки (debug point) необходимо в коде теста вызвать следующий метод:

browser.debugger();

и запустить protractor в режиме отладки(с флагом debug):

$ protractor debug protractor.js

И после чего вы сможете насладиться радостью дебага из консоли

debug> help
Commands: run (r), cont (c), next (n), step (s), out (o), backtrace (bt), setBreakpoint (sb), clearBreakpoint (cb),
watch, unwatch, watchers, repl, restart, kill, list, scripts, breakOnException, breakpoints, version
debug>

Используется node-debugger, только точка остановки задается методом browser.debugger(); вмето debugger;

Интерактивный запуск

Альтернативный способ отладки – интерактивный запуск, когда вы можете сами выполнить команды сценария из консоли и обнаружить ошибку.

Для запуска protractor в режиме консоли необходимо выполнить следующую команду в директории программы:

$ node ./bin/elementexplorer.js

(в зависимости от ОС и типа установки путь к директории программы может отличаться. В моем случае это было /usr/local/lib/node_modules/protractor/)

Теперь можно  выполнить что-то типа такого:

> browser.get('http://www.angularjs.org')

или просто

> browser

Дополнительно

Что можно еще интересного почитать в тему:

• Advanced Testing and Debugging in AngularJS
• Advanced Protractor features

Приятных вам тестов с Protractor!