Testing angular app with protractor in Visual Studio

  2016-09-18


Environment prerequisites

Make sure to install these on your machine before you continue:

Setup the tests

Go into the web app directory:

cd .\MyWebApp

Install protractor:

npm install -g protractor

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with:

webdriver-manager update
webdriver-manager start

Create protractor-tests.js and put the following into it:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

    // You wrote your first test, cross it off the list
    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

Create conf.js and paste the followint into it:

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['protractor-tests.js'],
    resultJsonOutputFile: "./result.json",
    multiCapabilities: [
        {
            browserName:"chrome"
        }
    ]
};

To run your tests create run.bat and execute it:

# make sure to `webdriver-manager start`

protractor %~dp0config.js

22bugs.co © 2017. All rights reserved.