Protractor is an open source end to end testing application for angular and Angular JS applications which was built by a team in google on top of web drivers.It supports two behavior-driven development test framework Mocha and Jasmine.
Jasmine: Default test framework when protractor is installed.
- First, install Node.js -:https://nodejs.org/en/download/.You will download Protractor package using npm. Check the version of Node.js you have by running node –version.
- Check the compatibility notes in the Protractor README to make sure your Node.js version is compatible with Protractor.
- Install Protractor by hitting this command in the cmd npm install -g protractor
Once you install protractor successfully you can check the protractor version by using protractor –version command
After installing Protractor, we need to install Selenium WebDriver for Chrome using webdriver-manager update
Startup a server with webdriver-manager start
Ready to Create Your First Test Case using Protractor?
It needs two files to run the test case.
- Spec.js will handle all the browser level commands
- As we are following the Jasmine framework in this example, ‘describe’ and ‘it’ are the syntaxes of Jasmine. Describe will contain the entire end to end the flow of your test case, whereas ‘it’ might contain some of the test steps/scenarios, etc. You can have multiple ‘it’ blocks in your program if you want.
- browser.get is a simple Selenium syntax that tells Protractor to hit a specific URL in the browser.
- ‘expect’ is the assertion where we are comparing the web page title to equal some predefined data.
- Configuration file is the one that tells Protractor the core details. As displayed in the code, the framework is ‘Jasmine’.
- Inside the capabilities section, browser configurations are set. You can define the browser name such as Firefox/chrome etc. You can also set the maximum instances of the browsers so that at one time, you can run multiple test cases on different available browser windows.
- In the ‘specs’ section, we give the path of the spec file, i.e. exactly where the spec file is located with respect to the configuration file.
- There are also many other cool features you can attach to your configuration file such as reporting/onPrepare function/threshold timeout etc.
Run Your Test Case
- Save your conf.js and spec.js in a folder and navigate to the folder location as flowing
Now hit the “Protractor conf.js” command in cmd to get your code running
Report Generation in Protractor
- Navigate to the npm directory and hit “npm install protractor-beautiful-reporter –save-dev” command to install jasmine reporter
And then add the following code segment to the existing conf.js
Run your test case using the previous command “Protractor conf.js” and then go to your folder where you have saved conf.js and spec.js and you will be able to see generated report in “temp/report”
Click on report folder and then click on the report HTML document, You will be able to see the test result
Enhancing Your Test Script
You can use design patterns like the page object model to enhance your protractor test script. Also, you can continue your scripting associated with the following tools.
Git is a very powerful version control tool. It is always a best practice to keep your code in Git if there are multiple developers involved.
Jenkins is a continuous integration tool with which, you can schedule your test cases and run them as per your need. Protractor scripts can also be configured with Jenkins. Best use of running your test cases on Jenkins is that it is very fast and also you can run multiple test cases at a time.
BrowserStack is a cross-browser testing tool that can also be used to test your applications across different browsers. It can also be integrated with Protractor by adding the BrowserStack credentials in your config file.
- Protractor is an open-source tool also very easy to install and setup.
- Works well with Jasmine framework to create the test.
- Supports test-driven development (TDD).
- Contains automatic waits which means we do not need to explicitly add waits and sleeps to our test.
- Offers all the advantages of Selenium WebDriver.
- Supports parallel testing through multiple browsers.
- Provides the benefit of auto-synchronization.
- Has excellent testing speed.
- Does not uncover any verticals in browser automation because it is a wrapper for WebDriver JS.
- Only provides front-end testing because it is a UI driven testing tool.
Hope you found something valuable in this article. Feel free to drop any questions or comments and keep in touch.