September 27, 2023


Digitally first class

Setting Up a Testing Project in Protractor with Cucumber and Page Object Model – Grape Up


For quite a few yrs, when it arrived to automating world wide web UI screening, Selenium was the king. And it is harmless to say it even now is! As a widely recognized and demonstrated automation tests instrument, it is normally a default option for lots of software tasks. But does it imply 1 shouldn’t discover other technologies and frameworks? Of program not! In this short article, I will focus on the key points driving utilizing Protractor and describe how to set it up for seamless use with Cucumber and Web page Item Design.

The main place at the rear of working with Protractor is that it was designed primarily for testing Angular apps. Since Angular has its very own personal properties – techniques, options, and synchronization, Protractor addresses individuals to make testing such apps a lot easier and additional trustworthy. It is really worth mentioning that Protractor is a wrapper above webdriver.js – the formal JavaScript implementation of Selenium Webdriver. What this implies is that throughout tests development particular Angular components can be reached with out-of-the-box take a look at framework strategies and it still appears to be related to what would have been coded in a normal Selenium challenge. On major of that, Protractor is capable of synchronizing with Angular, which also assists with the security of the exams.

The assumptions for setting up the project were comparable to preceding endeavors with examination automation tasks – the framework has to be apparent (Web page Object Product) and exam scripts have to be very clear and easy to understand, even for non-technological crew associates (Cucumber and Gherkin). The choice of programming language fell on JavaScript because Protractor is a node.js software and the other feasible choice, TypeScript, would need a little bit a lot more coding. This time the project will make use of Visible Studio Code as IDE.

To begin setting up the undertaking, initial, you are going to will need to set up node.js. Right after setting up it on your machine, you can confirm that the set up was productive by typing in ‘node -v’ in the terminal. Whilst you’re at it, in the similar put you can also verify the Node Deals Supervisor, typing in ‘npm – v’. Then, type in ‘npm put in -g protractor’ and validate its successful set up with ‘protractor –version’. Just in case, you can update the driver from time to time by making use of the “web driver-manager update” command.

Our future move will be placing up the IDE for comfy get the job done. Very first, in Visible Studio Code set up the “Cucumber (Gherkin) full support” extension. The moment that’s carried out, we have to take care of our dependencies. In our project’s deal.json file we’ll require to include things like chai and chai-as-promised for assertions, cucumber, and protractor – all in the dependencies portion. In devDependencies, we’ll will need protractor-cucumber-framework to reach the target we’re striving for.

To have consolation and clarity inside the growth method, 1 of the capabilities that provide it is the ability to rapidly look up what code is executed powering just about every gherkin stage. To accomplish that in a Protractor project, we’ll need to specify Cucumber solutions in the conf.js file. What is needed is the route to the ways folder. 

Then, in the options.json file, we’ll want to specify the paths to folders that contains phase definitions and solutions that are executed guiding them. We can do this in the pursuing manner: 

When we do this, we can very easily navigate through the task by clicking the stage/definition/technique/factor specified in the code with a CTRL or CMD button pressed. It’s a basic issue, but it can considerably increase efficiency and reduce the time used on establishing or debugging tests! 

Our up coming premise that we have to have to deal with is functioning the assessments by tags. Although including a tag to a aspect file is pretty clear-cut, the component the place these are run involves delivering a path to Cucumber Function documents in the conf.js file. 

As you can notice in the higher than piece of code, the cucumberOpts part in the conf.js file involves a variable named ‘tags’ as an vacant checklist. 

Whilst we’re at it, it is crucial to point out that the conf.js file demands to have a part where we specify the Cucumber as our screening framework: 

The overall composition of the automatic tests project established in Webpage Item Product is identical across technologies. An overview for Protractor can be observed underneath:  

At the time you make all the required files and finish the configuration, it is time to compose the assessments themselves. 

Since we’re doing work in BDD framework, let’s get started with a very simple Function File with a basic state of affairs concentrating on verifying a Registration variety (with a tag for functioning it later) 

After that’s performed, we can specify what comes about in every phase in /measures/registration.js: 

In that file, we 1st specify the path to the file containing techniques that are going to be known as in just about every of the phase definitions. Then we’re calling assertion libraries and placing up timeouts. 

Move definition implementation is rather straightforward the Cucumber key word precedes a regex and a parameter the physique of a step phone calls a method from /webpages/registration.js file. Generally, a single step phone calls for just a single system but examination techniques could be far more intricate if have to have be. Notice that if a method returns a Boolean value, we are invoking assertion at the degree of a move definition (line 23). 

 In the/web pages/registration.js file, we want to specify a locator dictionary for things that we’re going to interact with. You can do this in the following method: 

Please notice the selectors utilised for finding the components you can use numerous out-of-the-box approaches for finding features in Protractor, which have been thoroughly described in the official Protractor Guide (url

The exact goes for approaches applied to interact with elements:

(PS. Do not shop your login credentials in the take a look at automation code… The previously mentioned is just for demonstration applications) 

What occurs over is that we’re utilizing techniques that we’ve identified as in /steps/registration.js file, using the features we’ve put in the locator dictionary (highlighted in light blue) and interacting with them making use of Protractor approaches (highlighted in purple). 

Then it is time to run the tests. In VS Code, open up a new terminal window and hit the “web driver-supervisor start” command. Webdriver really should be up and running now. 

To run the test you have written and tagged accordingly, all you want to do now is you have to open yet another new terminal window in VS Code and enter the command:  

protractor protractor.conf.js –cucumberOpts.tags=’@smoke1′ – tagging the ideal characteristic appropriately. 

And there you have it! Now you have a ready, set up Protractor testing framework integrated with Cucumber, Website page Object Model which you can run with the assistance of tags. If you want to obtain out additional about Protractor, I really encourage you to go to the Protractor web site, which is made up of complete documentation with code illustrations in this article.


Resource backlink