Creating test scripts using Protractor for non Angular application

Protractor is primarily used for creating tests for Angular applications. 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(by.id('elem_id'));
• Find elements by name: browser.driver.findElement(by.name('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(by.id('id'))
              .then(function(elem) {
                elem.click();
                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' }

Debugging

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(http://selenium-release.storage.googleapis.com/index.html?path=2.42/)
• 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: ['-Dwebdriver.ie.driver=node_modules/protractor/selenium/IEDriverServer.exe']
'browserName': 'internet explorer'

Iterate Table rows and columns

browser.driver.findElement(by.id('ID')).then(function(table){
	table.findElement(by.tagName('tbody')).then(function(tbody){
		tbody.findElements(by.tagName('tr')).then(function(rows){
			for(i=0; i<rows.length;i++)
			{
				rows[i].findElements(by.tagName('td')).then(function(cols){
					expect(cols[2].getText()).toMatch('ok');
				});
			}
		});
	});
});