AngularJS Protractor Tutorial

By Raman Arora| on 09/12/2015 | 27 Comments

Angular JS - Website and Test Elements for testing Protractor Scripts

Watch Protractor Tutorials

With a sudden increase in AngularJS websites current market demand is moving towards Protractor for automation. Now before we proceed further we first need to understand what exactly is Protractor?

Protractor is an end to end testing framework specially designed to perform automation testing on AngularJS based web applications. Protractor API works as a wrapper over the most powerful WebDriver API and is built on top of WebDriverJS that uses native events and browser specific drivers to interact with web based application as a normal user would do.

There's a massive increase in locator strategies in Protractor which also allows you to test AngularJS specific elements including the existing locator that we get from WebDriver API without configuring or putting any extra effort. Waits and Syncs are handled in a more effective manner so we need to to worry about sync issues as well.

 

Protractor is one of the end to end testing framework in AngularJS

Pre-requisite:

Configure Environment variables:

C:\Users\<yourprofile>\AppData\Roaming\npm

Once the above things are successfully installed, Now install Protractor by navigating to cmd prompt and typing:

npm install -g protractor

This has actually installed Protractor and WebDriver Manager as a command line tool

Next update the WebDriver Manager by typing:

webdriver-manager update

This will now download the ChromeDriver.exe file which you may require while executing test on a Chrome Browser

For IE you need to download the IEDriverServer.exe file separately for Protractor by typing

webdriver-manager update --ie

This will then download the IEDriverServer.exe latest file to the root directly and you should be good to execute your tests on Internet Explorer

Executing the First Protractor test

Copy the below code and save it in a file with .js format for example firsttest.js

describe('To Test Gmail Login window', function() {
 
 it('should be able to login', function() {

    browser.driver  
    browser.driver.get('http://gmail.com/');

    browser.driver.findElement(by.css('#Email')).sendKeys("trainer@way2automation.com");

    var nxt = browser.driver.findElement(by.css("#next"))
    nxt.click();
    browser.driver.findElement(by.css('#Passwd')).sendKeys("lskdhgfsdf");
    browser.driver.findElement(by.css('#signIn')).click();

    //Printing Text
    var txt = browser.driver.findElement(by.css('#errormsg_0_Passwd')).getText()

    txt.then(function(text) {
    console.log(text);
    });

  });
});

Now create a conf.js file in the same directory and paste the below code

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
   //Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },
   onPrepare: function() {
    // Override the timeout for webdriver.
    browser.driver.manage().timeouts().implicitlyWait(60000);
  },
  specs: ['todo-spec.js']
};

Watch the video with complete configuration:

 

COMMENTS

NO! Comments Found

Be The first to comment on this*

WRITE A COMMENT