Testing Non-Angular Pages/Sites

Protractor works well on non-AngularJS pages as well. The first step is to set browser.ignoreSynchronization = true; inside the beforeEach() block in the spec file, to signal Protractor not to wait for Angular components to load.

				
				beforeEach(function() {
					browser.ignoreSynchronization = true;           
				});

Secondly, instead of the element global function, access the wrapped WebDriver instance with browser.driver. For example, instead of

				
				element(by.id('#some-id');

use

				
					browser.driver.findElement(by.id('#some-id'));

Example

Consider the non-Angular page ../sample/protractor-non-angular.html, which computes the Surface Air Consumption (SAC) rate of scuba divers. It has five input fields with labels "Tank Capacity", "Tank Rated Pressure", "Psi Used", "Dive Depth" and "Dive Time".

Using the sendKeys() action method, we type in some numbers into the input fields, which we underline below, corresponding to the labels:

  • Tank Capacity (Cubic Feet): 80
  • Tank Rated Pressure (Psi): 3000
  • Psi Used: 1650
  • Dive Depth (Feet): 50
  • Dive Time (Minutes): 16

Next, we right-click on each of the input elements, select Inspect from the context menu, and get their respective ids: capacity, pressure, psi, depth and time.

We make use of these obtained ids in locators while writing the spec below.

					
					describe('Protractor on a Non-Angular Page', function() {	
					    beforeEach(function() {
							browser.ignoreSynchronization = true;
					        browser.driver.get('https://scriptverse.dev/sample/protractor-non-angular.html');        
						});

					    it('should compute the SAC rate correctly', function() {   
					        browser.driver.findElement(by.id('capacity')).clear();
					        browser.driver.findElement(by.id('capacity')).sendKeys(80);
					        browser.driver.findElement(by.id('pressure')).clear();
					        browser.driver.findElement(by.id('pressure')).sendKeys(3000);
					        browser.driver.findElement(by.id('psi')).sendKeys(1650);
					        browser.driver.findElement(by.id('depth')).sendKeys(50);
					        browser.driver.findElement(by.id('time')).sendKeys(16);
					        browser.driver.findElement(by.className('compute')).click();
					        
					        var e = element(by.css('.computed-result'));
					        var EC = protractor.ExpectedConditions;
					        var condition = EC.textToBePresentInElement(e, 'cu. ft. per minute');
					        browser.wait(condition, 3000, 'text is still not present').
					            then(function() {
					                e.getText().then(function (text) {
					                    expect(text).toEqual('= 1.09 cu. ft. per minute');            
					                });          
					            });
					    });
					});

Since a response from the server is expected (for the computed result), we make use of the protractor.ExpectedConditions object. Using its textToBePresentInElement() method, we set the expectation for checking if 'cu. ft. per minute' forms a part of the text in the specified element element(by.css('.computed-result')). This condition is passed as the first argument into browser.wait(), with a timeout of 3 seconds as its second argument to fail if the promise does not resolve within that duration. Finally, we obtain the inner text inside element(by.css('.computed-result')) by resolving the promise returned by getText() and pass it into expect(), which is chained to the matcher toEqual() which takes the expected string '= 1.09 cu. ft. per minute'.