Protractor: getting started

Protractor --  is a test framework for AngularJS applications which provides you with the ability to write tests simulating real user actions. Protractor is a "wrapper" for WebDriverJS (JavaScript implementation of Selenium WebDriver API) and built specifically for AngularJS. In other words, 'wait-for' conditions are already there and you don't have to implement them again.

Let's create sample Protractor project.

It is required to install jdk and nodejs. After nodejs we can install Protractor using command:

npm install -g protractor

As a sample AngularJS application we will use Wortschatz. Wortschatz is an application for memorizing German words, user starts 'lesson' consisting of different German words, the task is to specify correct translation, article etc.

Now we start creating tests. Create a new directory and open it. Then add files as displayed below:

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

Then we need to edit conf.js file, storing project configuration.

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

It means: we will be using JavaScript test framework Jasmine to launch our tests, specified address where Selenium Server is running, path to file with tests (spec.js), needed browser.

Now we can add tests, for this we will edit spec.js file. We are going to use Page Object pattern, so firstly we will describe expected behavior of our application in tests and after that we are going to create descriptions of page (page objects). We start with a simple test: open our application under test, start new lesson, enter incorrect answer and check if answer is accepted and verified as incorrect.

"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");
  });
});

Let us create page descriptions. For 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();

For 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();

We need to import page objects to the file containing tests:

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

Now we can run tests. First of all we need to start Selenium Server

webdriver-manager start

Then from a directory containing conf.js execute command:

protractor conf.js

After test run is completed, result is displayed in terminal as:

1 specs, 0 failures
Finished in 8.41 seconds

 Full sample project is available on GitHub