QA Automation with Protractor

 

OVERVIEW
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in real browser,interacting with it as a user would ,it is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user would,it also includes Automatic Waiting.

WHY DO WE NEED PROTRACTOR FRAMEWORK
Protractor is a NodeJS program which is written in JavaScript and runs with Node to identinfy the web elements in AngularJS applications, and it also uses WebDriver to control the browser with user actions.
SETUP
NPM should be installed in your system before downloading protractor.
1- Use npm to install Protractor globally using npm install -g protractor, this will install protractor and webdriver-manager.

2- Check protractor version to make sure it is running using protractor –version .

3-  Update the webdriver manager using webdriver-manager update .

4- Now start up a server with webdriver-manager start ,when it will get started you will get    the    message in command prompt  last line Selenium Server is up and running below is    the  screenshot.

5- By default protractor supports jasmine and has in built framework, if you want to use Mocha       or Chai you have to install explicitly.

SAMPLE ANGULAR JS APLLICATION TESTING USING PROTRACTOR

Protractor needs 2 files to run, a spec file and configuration file.

  1. Configuration file: This File helps protractor to where the test files are placed (specs.js) and to talk with Selenium server (Selenium Address). Chrome is the default browser for Protractor.
  1. Spec file: This File contains the logic and locators to interact with the application.

    Step 1. We have to login https://angularjs.org and enter the text as “GURU99” in “Enter a            name   here” textbox.

Step 2. Entered the name “Protractor”

Step 3. Verify the displayed name and the name we have typed.

Create a spec.js File with any name e.g here we are creating with Angular.js and write the code mentioned below  here we are using the inbuilt jasmine framework

CONFIGURATION FILE

Save the file as conf.js . This configuration tells 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. Here in spec pass the name of the JS file in which we are writing code.

EXECUTION

  1. Open Command Prompt.

   2.Use webdriver-manager start to make sure selenium webdriver is up and running,and            hit Enter.

  1. If webdriver is not up and running we cannot proceed further for execution.
  2. Open another command prompt
  3. Navigate to the project folder using cd in command prompt.
  4. Run command protractor conf.js .

EXLPANATION

  1. Here protractor will execute the conf.js file with the spec file given in it.
  2. Here we can see the results how many pass and how many fail.

LOCATORS

Protractor exports a global function element which takes a locator and will return an Element Finder, for multiple elements use element.all .

element(by.css(‘[class=”button md-button”]’)).click();

element.all(by.css(‘[class=”button md-button”]’)).click();

  1. Find an element using css locator.
  2. Find an element by the given id using by.id(‘my-id’);
  3. by.model(‘name’);
  4. by.binding(‘binding-name’);

USING  BROWSER OTHER THAN CHROME

In conf.js file under :

Inside capabilites change the browser name from chrome to firefox if you want to run the test other than chrome.

DEBUGGING PROTRACTOR

  1. Using pause browser.pause();
  2. Using browser.debugger();
  3. Type c in command prompt after browser stops to move forward step  by step.

GENERATE REPORTS USING JASMINE REPORTER

  1. Open command prompt.

2.  Execute the following command npm protractor-jasmine2-html-reporter.

  1. Copy the code below in the conf.js file.

  1. Again execute the conf.js
  2. Check the result folder click on the html file you will get the result like below.

MAKING YOUR PROTRACTOR TEST DATA DRIVEN

Often when creating end to end tests using Protractor, you’ll end up writing several tests which execute the same steps over and over again, and only differ in terms of the values you’re inputting or performing assertions on. Abstracting your test data from your test automation framework is always a good idea, but it also provides an excellent way of achieving this reusability when testing very similar scenarios.

How it’s done

1- Install Jasmine Data provider cd<project location>  and run command npm install jasmine-data-provider.

2- Write your data in a separate JSDataProvi.js file

3- Write your spec.js file as

  1. Import test data: We have imported TestData file in the second line.
  2. using block: We are passing test data to protractor spec by using block. Using block will iterate test for 3 times as we have 3 inputs in JSDataProvi.js file.

RESULTS

TEST DATA DRIVEN USING JSON FILE

1- Create a JSON File and add it in your project Folder

2-Import the file into your protractor.conf.js and assign it to params

3-Access data in your test cases by referring the key values using ‘browser.params’ object

Browser is by default and  params is defined in conf.js file in step 2,Login_Credentials is defined in JSON File and url is a part of it. In short the value of URL in JSON FIle is going to store in var url.

 

USING MULTIPLE BROWSER IN THE SAME TEST

If you would like to test against multiple browsers, use the multi-capabilities configuration option.

Protractor will run tests in parallel against each set of capabilities. Please note that if multiCapabilities is defined, the runner will ignore the capabilities configuration. For internet explorer type as ‘internet explorer’.

SUITES IN PROTRACTOR

A collection of test cases that are intended to be used to test a software program to show that it has some specified set of behaviors. A test suite often contains detailed instructions or goals for each collection of test cases and information on the system configuration to be used during testing.

The another way of writing suites is :

Two run the suite use the command below:

Protractor conf.js –suite=tc_001,tc_002

Note: – You can run two suites in Parallel Also by making two different conf file and change the result path and name of the file in the suite.

 

REMOTE SELENIUM SERVER

To run your tests against a remote Selenium Server, you will need an account with a service that hosts the server (and the browser drivers). Protractor has built in support for Sauce Labs.

Using Sauce Labs as remote Selenium Server

In your config file, set these options:

  • sauceUser– The username for your Sauce Labs account.
  • sauceKey – The key for your Sauce Labs account.

You can optionally set the name property in a capability in order to give the jobs a name on the server. Otherwise they will just be called Unamed job.