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

For quite a few many years, when it came to automating website UI screening, Selenium was the king. And it is safe to say it nevertheless is! As a greatly recognised and verified automation tests instrument, it is often a default preference for quite a few software program tasks. But does it suggest one particular should not investigate other technologies and frameworks? Of training course not! In this short article, I will talk about the key details powering utilizing Protractor and describe how to set it up for seamless use with Cucumber and Page Object Product.

The key position behind employing Protractor is that it was produced primarily for screening Angular apps. Since Angular has its have specific properties – procedures, capabilities, and synchronization, Protractor addresses all those to make tests this sort of applications much easier and a lot more responsible. It is worthy of mentioning that Protractor is a wrapper above webdriver.js – the official JavaScript implementation of Selenium Webdriver. What this means is that during tests progress specific Angular features can be achieved with out-of-the-box test framework techniques and it still looks similar to what would have been coded in a standard Selenium project. On prime of that, Protractor is capable of synchronizing with Angular, which also allows with the balance of the exams.

The assumptions for environment up the challenge were related to prior endeavors with check automation projects – the composition has to be obvious (Web page Item Design) and exam scripts have to be very clear and easy to understand, even for non-technological workforce members (Cucumber and Gherkin). The alternative of programming language fell on JavaScript since Protractor is a node.js software and the other feasible solution, TypeScript, would call for a little bit far more coding. This time the venture will utilize Visual Studio Code as IDE.

To start out setting up the undertaking, initial, you will want to put in node.js. Right after setting up it on your device, you can validate that the installation was prosperous by typing in ‘node -v’ in the terminal. Although you’re at it, in the very same put you can also validate the Node Deals Manager, typing in ‘npm – v’. Then, form in ‘npm set up -g protractor’ and validate its effective set up with ‘protractor –version’. Just in situation, you can update the driver from time to time by working with the “web driver-manager update” command.

Our following move will be placing up the IDE for comfortable get the job done. Very first, in Visual Studio Code set up the “Cucumber (Gherkin) whole support” extension. The moment which is carried out, we have to choose treatment of our dependencies. In our project’s bundle.json file we’ll need to incorporate chai and chai-as-promised for assertions, cucumber, and protractor – all in the dependencies segment. In devDependencies, we’ll need protractor-cucumber-framework to accomplish the intention we’re striving for.

To have convenience and clarity inside the enhancement approach, a person of the characteristics that offer it is the ability to immediately glance up what code is executed behind every single gherkin step. To attain that in a Protractor challenge, we’ll require to specify Cucumber options in the conf.js file. What is necessary is the route to the ways folder. 

Then, in the configurations.json file, we’ll need to specify the paths to folders that contains phase definitions and methods that are executed behind them. We can do this in the subsequent way: 

When we do this, we can simply navigate through the job by clicking the step/definition/approach/component specified in the code with a CTRL or CMD button pressed. It’s a basic matter, but it can significantly boost efficiency and lower the time invested on developing or debugging exams! 

Our future premise that we require to tackle is working the assessments by tags. Although incorporating a tag to a characteristic file is fairly straightforward, the element in which these are operate involves providing a route to Cucumber Feature data files in the conf.js file. 

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

Though we’re at it, it is essential to place out that the conf.js file needs to have a segment in which we specify the Cucumber as our testing framework: 

The general framework of the automatic testing job established in Webpage Item Design is equivalent throughout technologies. An overview for Protractor can be observed beneath:  

After you develop all the necessary files and finish the configuration, it is time to publish the assessments themselves. 

Considering the fact that we’re operating in BDD framework, let’s commence with a straightforward Feature File with a basic circumstance focusing on verifying a Registration variety (with a tag for jogging it later on) 

The moment which is finished, we can specify what happens in every move in /ways/registration.js: 

In that file, we first specify the route to the file made up of methods that are likely to be termed in each of the move definitions. Then we’re calling assertion libraries and location up timeouts. 

Move definition implementation is pretty uncomplicated the Cucumber keyword precedes a regex and a parameter the overall body of a phase calls a technique from /internet pages/registration.js file. Commonly, just one move calls for just 1 strategy but examination measures could be much more intricate if need to have be. Recognize that if a system returns a Boolean value, we are invoking assertion at the stage of a step definition (line 23). 

 In the/internet pages/registration.js file, we have to have to specify a locator dictionary for aspects that we’re going to interact with. You can do this in the next way: 

Please note the selectors employed for finding the features you can use various out-of-the-box methods for finding factors in Protractor, which have been extensively explained in the official Protractor Tutorial (backlink) 

The similar goes for methods applied to interact with factors:

(PS. Do not retailer your login credentials in the exam automation code… The earlier mentioned is just for demonstration needs) 

What comes about earlier mentioned is that we’re implementing strategies that we’ve known as in /actions/registration.js file, applying the features we’ve place in the locator dictionary (highlighted in light-weight blue) and interacting with them using Protractor techniques (highlighted in purple). 

Then it is time to operate the exams. In VS Code, open up a new terminal window and strike the “web driver-manager start” command. Webdriver must be up and functioning now. 

To operate the take a look at you have written and tagged appropriately, all you have to have to do now is you have to open another new terminal window in VS Code and enter the command:  

protractor protractor.conf.js –cucumberOpts.tags=’@smoke1′ – tagging the wanted function appropriately. 

And there you have it! Now you have a all set, established up Protractor testing framework integrated with Cucumber, Page Object Design which you can run with the enable of tags. If you want to uncover out a lot more about Protractor, I inspire you to go to the Protractor web site, which consists of detailed documentation with code examples right here.