Protractor: стартовый проект

Protractor -- тестовый фреймворк для AngularJS приложений, который позволяет создавать тесты имитируя действия пользователя. Protractor является "оберткой" на WebDriverJS (JavaScript реализацией Selenium WebDriver API) и специально адаптирован для AngularJS. А это означает, что ожидания уже встроены и нам не придется реализовывать их снова и снова.

Рассмотрим пример создания тестов с помощью Protractor.

Для начала нам необходимо установить jdk, nodejs. После успешной установки nodejs, установим Protractor с помощью команды:

npm install -g protractor

Тесты мы будем писать для AngularJS приложения Wortschatz. Кратко о Wortschatz: это приложение создано для запоминания немецких слов, пользователь начинает "урок", состоящий из различных немецких слов, после чего необходимо указать перевод слова, артикль и т.д.

Приступим непосредственно к написанию тестов. Создадим новую директорию, перейдем в нее и создадим следующую структуру:

├── conf.js
├── pages
│   ├── newLessonPage.js
│   └── startPage.js
└── specs
    └── spec.js

Отредактируем conf.js файл, предназначенный для конфигурации проекта.

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['specs/spec.js'],
  capabilities: {
    browserName: 'firefox'
  }
}

Это означает, что бы будем использовать фреймворк для написания тестов Jasmine, указали где будет запущен Selenium Server, путь к файлу с тестами (spec.js), желаемый браузер.

Теперь отредактируем файл с тестами (spec.js). Мы будем использовать Page Object pattern в тестах, поэтому опишем в тесте желаемое поведение, а затем создадим описание страниц (page objects). Добавим следующий тест: откроем приложение, начнем новый урок, ведем заведомо неверный ответ, и убедимся, что ответ принят как неправильный.

"use strict";

describe('Wortschatz demo test project', function() {

  it('should display message for incorrect answer ', function() {
    var incorrectAnswer = "foo bar";

    wortschatzHomepage.get();
    wortschatzHomepage.startLesson();
    browser.waitForAngular();
    newLessonPage.enterAndsubmitAnswer(0, incorrectAnswer)
    expect(newLessonPage.getIncorrectAnswerValue(0)).
            toMatch("Wrong. Your answer is '.*" + incorrectAnswer + "', correct answer is");
  });
});

Теперь подготовим описания страниц. Для startPage.js:

var WortschatzHomepage = function() {

  this.startLessonButton = element(by.css("a[href='#/lesson']"));

  this.get = function() {
    browser.get('http://wortschatz-olyv.rhcloud.com/');
  };

  this.startLesson = function() {
    this.startLessonButton.click();
  };

module.exports = new WortschatzHomepage();

Для newLessonPage.js:

var NewLessonPage = function() {

  this.answerButons = element.all(by.css(".btn.btn-primary.main-btn"));
  this.answerField = element.all(by.css(".answer-input"));
  this.incorrectAnswerElement = element.all(by.css(".alert.alert-danger"));

  this.enterAndsubmitAnswer = function(lessonItemNumber, answer) {
    var index = lessonItemNumber
    this.answerField.get(index).sendKeys(answer)
    this.answerButons.get(index).click();
  };

  this.getIncorrectAnswerValue = function(lessonItemNumber) {
    return this.incorrectAnswerElement.get(lessonItemNumber).getText();
  };
};

module.exports = new NewLessonPage();

Далее необходимо импортировать page objects в файл с тестами:

var wortschatzHomepage = require('../pages/startPage.js');
var newLessonPage = require('../pages/newLessonPage.js');

Теперь можем запустить тесты. Для этого стартуем Selenium Server

webdriver-manager start

А затем из директории, в которой хранится conf.js выполним команду

protractor conf.js

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

1 specs, 0 failures
Finished in 8.41 seconds

Более полный пример можно найти на GitHub