E2E test in AngularJS by using protractor

index-spec.js

describe("index page", function() {
    beforeEach(function() {
        browser.get("http://localhost:9999/app/index.html");
    });

    it("should have navigator", function() {
        expect(element("#navigator")).toBeDefined();
    });

    it("should have input box", function() {
        element(by.css('.legend')).click();
        expect(element(by.id('settings'))).toBeDefined();
    })

});

install-intro.md

install protractor

$ npm install -g protractor

config protractor

$ touch protractor.conf.js

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['test/e2e/**/*-spec.js']
};

---

start webdriver / chromedriver

$ webdriver-manager update
$ webdriver-manager start

update will try to fetch all the dependencies(chromedriver and selenium standalone), start will start the selenium standalone server for communicate with driver later.

---

run the e2e test

$ protractor protractor.conf.js

quick way to start the app server

$ python -m SimpleHTTPServer 9999

How to perform an action in protractor

ptor.actions().
    mouseMove(ptor.findElement(protractor.B.id('foo'))).
    perform();

protractor-take-screenshot.js

var fs = require('fs');

Utils = {

    /**
     * @name screenShotDirectory
     * @description The directory where screenshots will be created
     * @type {String}
     */
    screenShotDirectory: 'test/results/',

    /**
     * @name writeScreenShot
     * @description Write a screenshot string to file.
     * @param {String} data The base64-encoded string to write to file
     * @param {String} filename The name of the file to create (do not specify directory)
     */
    writeScreenShot: function (data, filename) {
        var stream = fs.createWriteStream(this.screenShotDirectory + filename);

        stream.write(new Buffer(data, 'base64'));
        stream.end();
    }

};

/**
 * Automatically store a screenshot for each test.
 */
afterEach(function () {
    var currentSpec = jasmine.getEnv().currentSpec,
        passed = currentSpec.results().passed();

    browser.takeScreenshot().then(function (png) {
        browser.getCapabilities().then(function (capabilities) {
            var browserName = capabilities.caps_.browserName,
                passFail = (passed) ? 'pass' : 'FAIL',
                filename = browserName + ' ' + passFail + ' - ' + currentSpec.description + '.png';

            Utils.writeScreenShot(png, filename);
        });
    });
});

protractor.conf.js

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['test/e2e/**/*-spec.js']
};