Introduction To Protractor

Introduction

Protractor is an E2E UI automation testing tool for Angular or Angular JS and it is very similar to Selenium Webdriver. Angular has some extra web elements, like ng-model and ng-if so we can’t test Angular applications without protractor. Protractor is built on the top of WebDriverJS that uses native events and browser-specific drivers to interact with web application.

Before jumping into Protractor, we should have a little background knowledge. As all of us know, AngularJS is developed using JavaScript. In simple words, we need to know JavaScript for AngularJS application development. Angular is an advanced version of AngularJS. For the development of any application in Angular, we use TypeScript. So, if we need to write a test case in Protractor, we can use JavaScript or TypeScript.

Environment Setup

One more bit of information before we start the setup. We need to know about npm or Node Platform Manager which is a very important platform on which we can install Protractor. NPM is the platform that is mandatory to exist on your machine to get Protractor to work on your machine. The simplest way to know whether the node or npm is available or not is to go to the command prompt or terminal and type command

npm -v

or

node -v       

If node or npm is not available, then please visit node.org and download the latest version and install.

After installation of npm or node, you can install Protractor.

Command to install Protractor from command line or terminal:

npm install -g protractor

Command to add/update webdriver

webdriver-manager update

Now, start up a server with:

webdriver-manager start

Application setup and development environment

There is N number of IDE’s available like Sublime text, Visual Studio code, Eclipse, or Netbeans etc. These all are open source tools. Also, there are some paid IDE's too.

There are two programming language options that we can use for development.

• JavaScript
• TypeScript 

In this document, all samples are developed using TypeScript because TypeScript is easier. 

If anyone is not aware of TypeScript, then please visit https://www.typescriptlang.org/

TypeScript is very similar to JavaScript.  

Use the following command for installing Angular CLI.

npm install -g @angular/cli

 

Basically, the Angular CLI sets up the development environment for Angular 2 and also has a provision for Protractor as well. After successfully installing the Angular client, one can use the following commands from command prompt or terminal.

Try ng --help to get help 

Follow the steps to create a new application.

1. Open terminal or command prompt.
2. Write the command - 
   
   ng new simple-test-app
   
   
3. If you see the folder structure, it looks like below.
   
    

Now, we can go with the required files and folders one by one.

1. package.json 
2. protractor.config.js
3. e2e folder 

These three files are very important for automation. The rest of the files and folders are used for developing the Angular application. In node_module, all the dependencies are stored. 

Package.json 

{
  "name": "test-ng-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

This is the content of your package.json file. It is having few commands, few dependencies. So we need to know  "e2e": "protractor"

If we need to run Protractor, then go to terminal and use

npm run e2e.

This command will execute your Protractor test cases. 

Protractor.config.js 

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};

In this file, you can set baseUrl, browser, file-naming structure, and testing framework. The default framework used by Protractor is Jasmine. One can change to Mocha or any other framework. 

Folder e2e 

App.e2e-spec.ts

Here, we need to add the application specific test cases. See the below sample test case.

import { TestNgAppPage } from './app.po';

describe('test-ng-app App', function() {
  let page: TestNgAppPage;

  beforeEach(() => {
    page = new TestNgAppPage();
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('app works!');
  });
});

App.po.ts

The page object related data needs to be specified here. Sample page object is shown below.

import { browser, element, by } from 'protractor';

export class TestNgAppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

One can change baseUrl as per the application. You can write the page object and the tase cases to run the application using following command -

ng run e2e

Happy coding :)  Stay connected for more stuff.