Protractor, its normally known as the E2E testing framework, which is commonly used in ANGULAR and is an open-source functional automation framework.
Why do we need Protractor?
In the present day, the demand for Javascript is very high and is used in almost all web applications. When the applications are getting bigger, our javascript also increases in complexity and size. In such cases, it becomes a very difficult task for our Testers to test the web application for various areas. Here is the usage of the Protractor Framework.
Protractor is a NodeJS program that is written in JavaScript and runs with Node to identify the web elements in Angular applications, and it is also a WebDriver to control the browser with user actions.
An Overview of the Protractor
Protractor is a designed wrapper around WebdriverJS which will automate e2e testing between angular apps. The following figure which gives an overview of the architecture of protractor which is involved for automation and testing :
How to install Protractor?
Before Installing Protractor we need to be aware of the requirements.
Protractor is a Node.js program. To run protractor, we need to have Node.js installed. We need to download the Protractor package using npm, which comes with Node.js. We can check the Node.js version using node –version.
Install Protractor globally by using the npm
Protractor, which is normally known as the E2E testing framework, which will be commonly used in ANGULAR and which is an open-source functional automation framework.
Before Installing Protractor we need to be aware of the requirements.
Protractor is a Node.js program. To run protractor, we need to have Node.js installed. We need to download the Protractor package using npm, which comes with Node.js. We can check the Node.js version using node –version.
Install Protractor globally by using the npm
npm install -g protractor
The above command will install 2 new command line protractors, web driver-manager, and tools. Run the command protractor –-version to confirm that protractor is installed successfully.
The web driver manager will be used for running the tests against the angular web application in all the browsers. After the installation of Protractor, the web driver manager needs to be get updated to the latest version. The version can be updated by running the below command in the command prompt.
webdriver-manager update
Then we can update the server using the following command
webdriver-manager start
The above command will start Selenium Server and will output a lot of info logs. Your Protractor test will send the requests to this server to control a local browser. It’s possible to see that the status of the server at http://localhost:4444/wd/hub.
Let’s start to write a test using protractor framework
Open a new command line or terminal and create a fresh folder for testing.
Protractor needs 2 files to run, The first one is the spec file and the next one is the configuration file.
Let us start with a test that will navigate 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('harikrishnan');
element(by.id('lastName')).sendKeys('r');
element(by.id('userName')).sendKeys('hari');
element(by.id('pwd')).sendKeys('123456');
element(by.css('.btn_register')).click();
});
});
This uses the globals element and by, which are also created by Protractor. The element of the above function is used for finding the HTML elements of our webpage. Which will return an ElementFinder object, which will be used to interact with an element or get information from it? In the above test, we are used to sendKeys in the type into <input>s, click is used to click a button, and getText is used to return the content of an element.
The element will take one Locator, a parameter, which describes how to find the element. The object will create Locators. Here, we are 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
protractor conf.js
This will open a new screen in with a registration form, then this fills all the fields with the given values and the user is registered.
Now we can try the test with multiple types
Consider the following spec.js
describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register');
element(by.id('firstName')).sendKeys('Harikrishnan');
element(by.id('lastName')).sendKeys('r');
element(by.id('userName')).sendKeys('hari');
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('Harikrishnan');
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 using the ElementFinders for the input variables in a separate file and include that file in our spec.js file. Which will make our code clean and which will be the best practices that we can follow.
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 are going to include the above file in our spec.js file and after that we are making the changes the above spec.js file which 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('Harikrishnan');
lastName.sendKeys('R');
userName.sendKeys('Hari');
userPass.sendKeys('123456');
regBtn.click();
});
it('positive scenario of login credentials', function() {
loginName.sendKeys(Hari);
loginPwd.sendKeys('123456');
loginBtn.click();
browser.driver.wait(function() {
browser.driver.getCurrentUrl().then(function(url) {
console.log(url);
});
});
});
});
Here describe and we are going to use jasmine framework methods to write the tests easily. Here I will give a small description of its functions.
A test will start with a call to the global method Jasmine which describes with two parameters: a function and string. The string will be a name or title for a spec suite - which is usually under test. The method is a block of code that implements the suite.
Specs are defined by invoking the global function of the Jasmine which, likes to describe a function and a string. The string is a title for this spec and the function is the spec or test. A spec contains more than one expectation of that test the state of the code under test.
Since that describes and its blocks are the functions, that will contain any executable code necessary which will help us to implement the test. JavaScript scoping rules will apply so that the variables are declared in the description and are available to any it block inside the suite. Protractor will be used not only for Angular applications, it will be work perfectly well in Non-Angular pages also.
Simply we are going to set the following flag to true and we are going to access the web driver instance using any browser. The driver of an element as shown below :
beforeEach( function() {
browser.ignoreSynchronization = true;
});
In the below example, the following codes are in angular applications
element(by.id(‘elementid’)).click();
the below would be written as shown below for the non-angular applications
browser.driver.findElement(by.id(‘elementid’)).click();
I hope that the above post was a good reference for the beginners who starts to learn about Protractor, mainly things like how we install, why we use Protractor & use Protractor. This is only an introduction about the e2e testing with Protractor. So we can be starting working with the Protractor and will crack its world.
Comments
Post a Comment