Thursday, May 8, 2014

Angularjs protractor e2e test

Was trying to figure out how to do testing on angularjs and i found that there are different ways to do testing, one of which is e2e or end to end testing. With e2e angularjs uses protractor. Here is how i got it working

Installation (i used global install on mac osx)
sudo npm install -g protractor
sudo webdriver-manager update

on your test director copy the reference configuration
cp /usr/local/lib/node_modules/protractor/referenceConf.js protractor-conf.js

Go inside the protractor-conf.js and change the following
{
    chromeDriver: '/usr/local/lib/node_modules/protractor/selenium/chromedriver',
    chromeOnly: true,
    baseUrl: 'http://...url of your project...',
    specs: [
        'e2e/*.js',
    ],
}

as you could see i changed the specs to look at a folder called e2e, what i did is create an e2e folder with a loginSpec.js where i have
describe('Login Page', function() {
    var ptor;

    beforeEach(function() {
        ptor = protractor.getInstance();
        ptor.ignoreSynchronization = true;
    });

    it('should load the home page', function() {
        ptor.get('/login');
        var ele = by.id('login-page');
        expect(ptor.isElementPresent(ele)).toBe(true);
    });

});
then to run it i used on command line
protractor ./tests/protractor-conf.js
Then wait for a few seconds, it should tell you if you have failed test or not

Resources
Practical End-to-End Testing with Protractor