Testing Angular Pages/Sites

We need a configuration file (conf.js) and a spec file, say, ng.spec.js. Create a directory and keep them together.

The conf.js file is set as below. The framework field is given the value 'jasmine', as we are going to write the specs in Jasmine. Corresponding to the specs field we include the spec/test file in square brackets (inside which several more spec/test files can be included, separated with commas). 

				
				exports.config = {
				  framework: 'jasmine',
				  seleniumAddress: 'http://localhost:4444/wd/hub',
				  specs: ['ng.spec.js']
				}

Next is a sample Angular page to test. For the purpose of this tutorial, we consider the page https://scriptverse.dev/sample/protractor-angular.html, which calculates the perimeter and area of a rectangle

The specs are written in Jasmine. The ng.spec.js file contains the below lines of Jasmine code 

				
				describe('Angular Rectangle Calculator', function() {	
					it('should give the perimeter 5 when length=2 and breadth=3', function() { 
				      browser.get('https://scriptverse.dev/sample/protractor-angular.html'); 
				      element(by.model('length')).sendKeys('2');
				      element(by.model('breadth')).sendKeys('3'); 
				      element(by.css('#perimeter')).click();    
				      expect(element(by.binding('perimeter')).getText()).toEqual('10');   
				  	});

					it('should give the area 12 when length=3 and breadth=4', function() { 
				      browser.get('https://scriptverse.dev/sample/protractor-angular.html'); 
				      element(by.model('length')).sendKeys('3');
				      element(by.model('breadth')).sendKeys('4');   
				      element(by.css('#area')).click();  
				      expect(element(by.binding('area')).getText()).toEqual('12'); 
				  	});
				});

Open the terminal and start the Selenium server 

				
					webdriver-manager start

Navigate to the directory where the conf.js file is located. Open another terminal, and run the command 

				
					protractor conf.js