Creating test scripts using Protractor for non angular application

Douglas Turner edited this page Mar 26, 2018 · 7 revisions

Protractor is majorly used for creating tests for angular application. However, support is available for non-angular pages as well.

Protractor requires the following :

  1. Jasmine

  2. Javascript

  3. Selenium

  4. Node.js server

Using protractor for non-angular pages

  1. Use browser.driver instead of driver
  2. Use browser.driver.ignoreSynchronization = true
    Reason: Protractor waits for angular components to load completely on a web-page befor it begins any execution. However, since our pages are non-angular, Protractor keeps waiting for 'angular' to load till the test fails with timeout. So, we need to explicitly tell the Protractor to not to wait for 'angular'

Methods to find elements on web page

  • Find elements by Id: browser.driver.findElement('elem_id'));
  • Find elements by name: browser.driver.findElement('elem_name'));
  • Find elements by xpath: browser.driver.findElement(by.xpath('elem_xpath'));
  • Find elements by css Selector: browser.driver.findElement(by.css('cssSelector'));
  • Find elements by tag name: browser.driver.findElement(by.tagName('tagName'));
  • Find elements by class name:browser.driver.findElement(by.className('class_name'));

There is no direct menthod to find an element by text. However, there are methods to find elements by link text:

  • Find elements by link text: browser.driver.findElement(by.linkText('link_text'));
  • Find elements by partial link text: browser.driver.findElement(by.partialLinkText ('partial_link_text'));

Introducing Waits in execution

  • Wait for an element to appear on the page and then perform a click:
browser.driver.wait(function() {
     return browser.driver.findElement('id'))
              .then(function(elem) {
                return true;
  }, timeout_interval);

Separating data from logic

Create separate data files and use them in your code to separate data from logic. This will help to deal with continously changing data in future. Steps to do the same:

  • Create a json file(test_data.json) for data and add data to it
  • Include this file in conf.js and assign it to params variable: params : require('./test_data.json')
  • Use this data in your tests: browser.params.DATA

Dealing with iframes in application

To interact(click,enterText etc) with the components, we need to switch to that particular iframe using the following command: browser.driver.switchTo().frame("IframeId");

To navigate out of all the iframes, use: browser.driver.switchTo().defaultContent();

Using different browsers for testing

Add the browser you want to execute your tests on under the 'browserName' variable in conf.js file capabilities: { 'browserName': 'chrome' }, OR capabilities: { 'browserName': 'firefox' }


Use browser.pause();

press c to continue to the next webdriver command

press d to continue to the next debugger statement

press ^C to exit

Steps to use configure test scripts to use IE Driver

  • Download IEDriver from the following location(
  • Place the downloaded file in 'npm\node_modules\protractor\selenium'(Protractor installation. Default is /AppData/Roaming/npm) ,Unzip and add the to PATH. For ex if you placed the IEDriverServer.exe in d:\ drive, then add d:\ to your PATH.
  • Add the following to conf.js:
    seleniumArgs: ['']
    'browserName': 'internet explorer'

Iterate Table rows and columns

			for(i=0; i<rows.length;i++)
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.