Table of Contents
What is Protractor?
Protractor, formally known as the E2E testing framework, is an open source functional automation framework explicitly designed for AngularJS web applications. Protractor acts as a wrapper around Webdriver JS to automate e2e testing for angular apps. The following figure demonstrates the architecture of its process.
Why Do We Need Protractor?
Nowadays, the demand for Javascript is very high and is used in almost all web applications. As the applications grow, JavaScript also increases in size and complexity. In such a case, it becomes a difficult task for Testers to test the web application for various scenarios.
Protractor is a NodeJS program which is written in JavaScript and runs with Node to identify the web elements in AngularJS applications, and it also uses WebDriver to control the browser with user actions.
How To Install Protractor?
Before Installing Protractor, We should aware of the prerequisites.
You need to have Node.js installed. You can download the Protractor package using npm, which comes with Node.js. You can also check the version of Node.js you have by running node –version.
Install Protractor globally by using the npm
npm install -g protractor
The above command will install two new command-line tools, protractor, and WebDriver-manager. Run that command version to confirm that protractor is installed successfully.
The web driver manager is used to run the tests against the angular web application in a specific browser. After the installation, the web driver manager needs to be updated to the latest version. we can do it by running the following command in the command prompt.
webdriver-manager update
Then we need to start up the server with the following command.
webdriver-manager start
This will start up a Selenium Server and will output a bunch of info logs. Now the test will send requests to this server to control a local browser. You can able to see the status of the server at http://localhost:4444/wd/hub.
Let’s start to write a test using a Protractor framework.
Open a new command line and create a fresh directory for testing. we need two files to run, a spec file and a configuration file. Let’s start with a simple test that navigates to an example Angular application. Following is the Spec file.
describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register');
element(by.id('firstName')).sendKeys('nithinkumar');
element(by.id('lastName')).sendKeys('123456');
element(by.id('userName')).sendKeys('nithin');
element(by.id('pwd')).sendKeys('123456');
element(by.css('.btn-register')).click();
});
});
This uses the globals element and by. The element function is used for finding HTML elements on your webpage. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use sendKeys to type into <input>s, click to click a button, and getText to return the content of an element.
Element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators. Here, we’re using three types of Locators:
by.id(‘firstName’) to find the element with the given id. This finds <input type =”text” id=”firstName”>.
by.css(‘.btn-register’) to find the element with given class. This finds <button class=”btn-register”>.
Run tests with the below-mentioned command,
protractor conf.js
This will open a new screen in with registration form, it will automatically fill all the fields with the given values and the user will get registered.
Now we can try the test with multiple scenarios. Consider the following spec.js on this case,
describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register');
element(by.id('firstName')).sendKeys('nithinkumar');
element(by.id('lastName')).sendKeys('123456');
element(by.id('userName')).sendKeys('nithin');
element(by.id('pwd')).sendKeys('123456');
element(by.css('.btn-register')).click();
});
it('positive scenario of login credentials', function() {
element(by.id('form-username')).sendKeys('nithin');
element(by.id('form-pass')).sendKeys('123456');
element(by.css('.btn-login')).click();
browser.driver.wait(function() {
browser.driver.getCurrentUrl().then(function(url) {
console.log(url);
});
});
});
});
We can store the ElementFinders for the input variables in a separate file and we can include that file in our spec.js file. So, it will make the code clean which is one of the best practices we can do by following the below steps.
Also Read
Create an app.po.ts file like below,
import { browser, by, element } from 'protractor';
export class AppPage {
firstName = element(by.id('firstName'));
lastName = element(by.id('lastName'));
userName = element(by.id('userName'));
userPass = element(by.id('pwd'));
regBtn = element(by.css('.btn-register'));
loginName = element(by.id('form-username'));
loginPwd = element(by.id('form-pass'));
loginBtn = element(by.css('.btn-login'));
}
Now we can include this file in our spec.js file, and after making the changes, the above spec.js file will look like below.
import { AppPage } from './app.po';
import { browser, by, element, protractor } from 'protractor’;
describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register')
firstName.sendKeys('nithinkumar');
lastName.sendKeys('123456');
userName.sendKeys('nithin');
userPass.sendKeys('123456');
regBtn.click();
});
it('positive scenario of login credentials', function() {
loginName.sendKeys('nithin');
loginPwd.sendKeys('123456');
loginBtn.click();
browser.driver.wait(function() {
browser.driver.getCurrentUrl().then(function(url) {
console.log(url);
});
});
});
});
Here describe, and itis the jasmine framework method to writing the tests easily. We will give a brief description of describe, and it functions.
The describe method is called by passing two parameters into it. The first one is a string and the second one is a function. The first parameter string means the name of the spec suite. The second parameter function is that defines the suite.
We use it function to define specs. Similar to describe function, it also has two parameters, one is a string, and the other is a function. The string means the name of the spec. The function is the spec that defines the code as to how the test is expected to work.
Since describe and it blocks are functions, they can contain any executable code which is necessary to implement the test. JavaScript scoping rules will get applied, so variables declared in a describe are available to any it block which is inside the suite.
Protractor can be used not only for Angular apps. It works pretty well for Non-Angular pages also.
Also Read
Simply set the following flag to true and access the WebDriver instance using browser.driver instead of an element as shown below :
beforeEach( function() {
browser.ignoreSynchronization = true;
});
For example, the following code for the angular page
element(by.id(‘elementid’)).click();
would be written as shown below for the non-angular page
browser.driver.findElement(by.id(‘elementid’)).click();
I hope this post would help you to kick start with Protractor, Since it’s just an Introduction of e2e testing with Protractor so, in the future, read the blog on Using Locators In Protractor – Automation Testing In Angular. For more inquiries and suggestions comment below.
