Using the Protractor Automation Tool to Test AngularJS Applications

One of the applications that we are working on is being built using pure AngularJS. AngularJS is a framework that is gaining in popularity because it extends the functionality of HTML and can be used to quick launch applications. In our quest for a functional automation framework to automate the UI and functionality of the web application, we zeroed in on the Protractor Automation tool.

Protractor, formally known as E2E testing framework, is an open source functional automation framework designed specifically for AngularJS web applications. It was introduced during AngularJS 1.2 as a replacement of the existing E2E testing framework. The Protractor automation tool is also recommended by AngularJS for scenario testing. To read more about AngularJS, please refer to their “Guide to AngularJS Documentation.”

Salient features of the Protractor Automation tool:

1. Built on the top of WebdriverJS and Selenium server
2. Introduced new simple syntax to write tests
3. Allows running tests targeting remote addresses
4. Can take advantage of Selenium grid to run multiple browsers at once
5. Can use Jasmine or Mocha to write test suites

Protractor is a wrapper (built on the top) around Selenium WebDriver, so it contains every feature that is available in the Selenium WebDriver. Additionally, Protractor provides some new locator strategies and functions which are very helpful to automate the AngularJS application. Examples include things like: waitForAngular, By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

Protractor Installation

For this project, the Protractor framework is being used and configured on a Windows environment. Below are the steps for installation:

Install Protractor Globally

• Step 1: Download and install NodeJS. http://nodejs.org/download/. After installation make sure its path is configured correctly, so that command execution can find Node.

• Step 2: Open the command prompt and type in the following command to install protractor globally.

npm install –g protractor

Install Protractor Locally

You can install protractor locally in your project directory. Go to your project directory and type in the following command in the command prompt:

npm install protractor

Verify Installation

To verify your installation, please type in the command

Protractor --version

If Protractor is installed successfully then the system will display the installed version. Otherwise you will have to recheck the installation.

• Step 3: If you don’t have the Selenium server on your machine, then download the latest version onto your machine. If you want to run tests on different browsers, then please download the respective drivers as well. For example, Chrome driver will come in handy to run tests on the Chrome browser.

Write your test cases:

Create a new folder and name it “test cases” or anything as per your convenience.

·         Create a test case spec file. For example: “grid_spec.js” file below, you can create multiple spec files as per your automation scope.

grid_spec.js

describe('HealthSense POC Grid', function() {
         beforeEach(function() {
           browser.get('http://Your Application URL');
            ptor = protractor.getInstance();
           });
 
        it('should click on the grid link', function() {
               element(by.xpath('//a[contains(text(),"Grid")]')).click();
           expect(element(by.xpath('//h1')).getText()).toEqual('Master Grid');
           });
           
        it('should enter ID in filter', function() {
                   ptor.actions().sendKeys(protractor.Key.HOME).perform();
          element(by.model('Model.ID')).sendKeys('10');
          results = element.all(by.repeater('value in testValues'));
               expect(results.count()).toEqual(5);
           element(by.model('Model.ID')).clear();
          ptor.actions().sendKeys(protractor.Key.SPACE).perform();
        });
           
        it('should change the number of records per page to 10', function(){
           element(by.xpath('//select')).click();
            element(by.css('option[value="10"]')).click();
            results1 = element.all(by.repeater('value in testValues'));
          expect(results1.count()).toEqual(10);
        });
});

·         Create a configuration: The configuration file is used to define some parameters which will be passed to Protractor to execute our spec files. Please note:

1. Selenium server details (required)
2. Location of our spec files (required)
3. Browser capabilities for spec files (required)
4. Jasmine node configuration options (required)
5. Jasmine reporter configuration options (optional)

Below is a sample configuration file:

Conf.js

exports.config = {

  //The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',
 
  //Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },
 
  //Specify the name of the specs files.
  specs: ['grid_spec.js'],
 
  //Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
      onComplete: null,
      isVerbose: false,
      showColors: true,
      includeStackTrace: true
  }
};

Execute your tests:

Once you are ready with your test cases and configuration file, the next step is to execute the test and see the results. Please follow these steps to execute the tests:

Run selenium server

• Make sure the Selenium server (which is specified in the configuration file) is running.

If you want to run the Selenium server manually, then run the following command

java -jar selenium/selenium-server-standalone-2.35.0.jar -Dwebdriver.chrome.driver=./selenium/chromedriver

Run tests

Finally, you are ready to run the tests. Type the following command in the command prompt:

protractor Conf.js

• You should be able to see the test execution progress and its status on the command line and also generate the test reports in an XML format. Please see the next section for details.

Generate Reports:

Protractor supports integration with Jasmine reporters. Jasmine reporters have a collection of JavaScript Jasmine reporter classes. We have used the JUnitXMLReporter which provided the test execution results in XML format. Please follow the following steps to configure the reporter.

Install Jasmine reporter

Install Jasmine reporter by typing the following command on command promptnpm install -g jasmine-reporters

Update Configuration file

After successful installation, create a report output directory inside your project folder and specify the report output directory name in the configuration file. Add the following code into your configuration

file.require('jasmine-reporters');
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('outputdir/', true, true));

XML output report

After execution of your tests again, you can find the test execution report XML in the output directory. Below is a sample of an XML report.