Protractor: Angular Testing Framework

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor Angular Testing Framework Features

• Built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user would.
• Protractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part.
• You no longer need to add waits and sleeps to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes pending tasks, so you don’t have to worry about waiting for your test and webpage to sync.

#Setup

Protractor is a Node.js program. To run, you will need to have Node.js installed. You will download Protractor package using npm, which comes with Node.js. You can check the version and upgrade Node.js version already installed on your machine.

Once you are ok with the Node.js version, follow this simple command to install Protractor on your machine.

npm install -g protractor

The above command will install two command line tools protractor and webdriver-manager

Trying running the command protractor –version to make sure it’s running.

The webdriver-manager command line tool is a helper tool to get an instance of running Selenium Server easily. Use the following command to download the necessary binaries.

webdriver-manager update

Once all the necessary binaries are downloaded let’s start the server with the following command:

webdriver-manager start

The above will start the Selenium Server and will output a bunch of info logs. Protractor tests will send requests to this server to control a local browser. The information about the status of the server can be seen at http://localhost:4444/wd/hub.

#Write a Test

Protractor needs two files to run the tests, a spec file, and configuration file.

Let’s take the example of the ToDo list on the Angular website and create a test case to add a new ToDo item to the list. Copy the below code in the file todo-spec.js.

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

The describe and it syntax is from the Jasmine framework. browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

#Configuration

Now let’s create the configuration file.

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

The above-specified configuration files tell Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). It will use the defaults for all other configuration. Chrome is the default browser.

#Run the Test

Now let’s run the test using the command provided below:

protractor conf.js

You should be able to Chrome browser window open up and navigate to the to-do list app on the AngularJS page, then close itself down (this happens very fast). The final test result output on the terminal window should be something like this:

1 test, 3 assertions, 0 failures.

Congratulations, you just created and run a successful Protractor test case.