Framework Setup for Protractor with Jasmine
Protractor is an automation tool solely designed for web based applications. It is a resilient platform using robust technologies such as Jasmine, Selenium Webdriver and Node.js etc.
Protractor is a testing tool based on behavior-driven testing framework and designed ideally for Angular JS applications. However, using some of the provided keys, it works well with non-angular JS applications too. Here is the step to step guide to be familiar with Protractor:
How to install prerequisites for protractor
- As protractor is node.js program, we need to install node.js first.
- With the following link, we can download node.js : https://nodejs.org/en/download/
- Node.js will be installed in your machine with the below set of files under the program file by default
- Path for node.js setup is automatically installed in Environment Variable:
- Now to install Protractor, open command prompt and hit the command “npm install -g protractor”
- The above command will automatically install Protractor in the default location of node.js having folder name : “node_modules”
- If you want to install the tool on a specific local path, you can remove ‘-g’ from the command “npm install”.
- Along with Protractor, this command will install the Protractor API and the default selenium server.
- By running the command “webdriver-manager update”, selenium server and chrome driver will get updated.
- Now all we need to do is get an IDE and set up framework to start test case creations.
Set up framework for Jasmin and type scripts
- Firstly, select a folder location where we can set up the framework.
- Below is the structure sample of protractor Jasmine framework which is based on Page object model having key components as explained below:-
Components : are having generic functions used in the entire framework such as click on element, get text of element etc.
Page-objects : are having functions specific to pages, available on the application. Ex: Login verify, Create Order on page etc.
Test-suites : This is the main and vital component which keeps page wise Spec files and each Spec file contains per page test cases. Each test case starts with the key “it”, which signifies single test.
Ex: ‘login’ will keep only login page test cases such as login and logout, verify logged in user etc.
Protractor: Type scripts automation
In protractor, there are two mandatory files, which are used to execute test cases.
- Configuration File:- Configuration file keeps the instructions to perform executions of tests. Such as which script file to execute, which browser to be executed, and which framework to use (Jasmine/Mocha).
Capabilities are set in the below format:-
- Framework: It should be Jasmine or Mocha as per your preferences.
- If the web application is non angular, key: ‘ignoreSynchronizationtag’ is to put ‘true’. If you do not make this tag true, your test will fail with error “Angular could not be found on the page”. The logic behind is that Protractor is expected to work with angular websites by default, and if we are using Protractor to validate non-angular websites, we need to tell this to Protractor explicitly. However, if you are working on angular websites, there is no need to use this statement as Protractor will by default consider the web page to be angular.
Here is an example of setting up some capabilities under Config file:-
- Spec File:- this is not the only file but group of files, having test cases embedded. In the spec file, codes of instructions, assertions on web pages are defined
In Jasmine framework, ‘describe’ and ‘it’ are the syntaxes of Jasmine.
- Where ‘describe’ will contain the entire end to end the flow of the scenarios.
- Whereas ‘it’ contains test steps/scenarios etc. Where the flow of each test cases are defined and the code of instructions between ‘it’ will get executed one by one. We can have multiple ‘it’ sections in spec file to maintain and cover required test cases.
There are default and necessary instructions:-
- ‘browser.get’ is a simple Selenium syntax which tells Protractor to hit a specific URL in the browser.
- Every line of execution requires await function to wait for synchronization such as mentioned above which is waiting to synchronize after current url.
- ‘expect’ is nothing but an assertion where we are comparing web page contents with some predefined inputs.
Execution of tests through command line:-
In command line, go to the root path of the project till the configuration file and open cmd,
This command will start running the selenium server followed by test scripts. We can view the logs in cmd itself having pass and fail statue of tests or can have customized reports as per project requirements.
To sum up, it is a wrapper build on top of Selenium Web driver. Thus, provides all the capabilities of Selenium along with many useful additions. Such as, it is well versed with synchronization and we don’t have to put wait on each and every elements. Additionally, it provides a variety of assertions & annotations along with the ability to create your own assertions which are a lot easier than selenium.
So overall, it is a perfect upgraded tool to use for the AngularJS websites, it will make your life much easier. Last but not the least, there are hundreds of NPM packages available out there which can be embedded with your framework smoothly. These packages are just like icing on the cake and make your framework even better.
Author : Priyanka Sharma