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

For many decades, when it arrived to automating internet UI tests, Selenium was the king. And it is safe and sound to say it nevertheless is! As a extensively acknowledged and proven automation screening device, it is frequently a default preference for a lot of software package initiatives. But does it indicate one particular should not check out other systems and frameworks? Of program not! In this short article, I will go over the primary details guiding using Protractor and explain how to set it up for seamless use with Cucumber and Page Item Model.

The most important point powering working with Protractor is that it was created mainly for testing Angular apps. Considering that Angular has its possess person attributes – solutions, options, and synchronization, Protractor addresses all those to make tests such apps easier and more dependable. It is really worth mentioning that Protractor is a wrapper more than webdriver.js – the formal JavaScript implementation of Selenium Webdriver. What this means is that through assessments growth individual Angular elements can be arrived at with out-of-the-box check framework techniques and it even now looks comparable to what would have been coded in a normal Selenium job. On best of that, Protractor is capable of synchronizing with Angular, which also aids with the balance of the tests.

The assumptions for setting up the task ended up related to past endeavors with examination automation initiatives – the composition has to be obvious (Web page Item Design) and exam scripts have to be very clear and comprehensible, even for non-specialized team customers (Cucumber and Gherkin). The alternative of programming language fell on JavaScript considering the fact that Protractor is a node.js application and the other feasible solution, TypeScript, would require a little bit much more coding. This time the task will employ Visible Studio Code as IDE.

To start out environment up the task, initial, you are going to require to set up node.js. Just after setting up it on your machine, you can confirm that the set up was prosperous by typing in ‘node -v’ in the terminal. Even though you are at it, in the identical position you can also validate the Node Deals Manager, typing in ‘npm – v’. Then, variety in ‘npm put in -g protractor’ and confirm its thriving set up with ‘protractor –version’. Just in case, you can update the driver from time to time by making use of the “web driver-supervisor update” command.

Our subsequent phase will be location up the IDE for comfy operate. Initial, in Visual Studio Code install the “Cucumber (Gherkin) entire support” extension. When which is done, we have to take treatment of our dependencies. In our project’s offer.json file we’ll need to involve chai and chai-as-promised for assertions, cucumber, and protractor – all in the dependencies area. In devDependencies, we’ll need to have protractor-cucumber-framework to accomplish the target we’re striving for.

To have convenience and clarity in just the development method, 1 of the features that provide it is the potential to quickly search up what code is executed powering each individual gherkin stage. To obtain that in a Protractor project, we’ll require to specify Cucumber alternatives in the conf.js file. What is important is the route to the actions folder. 

Then, in the settings.json file, we’ll will need to specify the paths to folders containing move definitions and procedures that are executed powering them. We can do this in the subsequent way: 

When we do this, we can quickly navigate by the undertaking by clicking the stage/definition/approach/factor specified in the code with a CTRL or CMD button pressed. It is a uncomplicated detail, but it can significantly boost productivity and lower the time expended on building or debugging exams! 

Our upcoming premise that we require to tackle is jogging the exams by tags. Although introducing a tag to a element file is very straightforward, the component wherever these are operate needs supplying a route to Cucumber Characteristic information in the conf.js file. 

As you can notice in the above piece of code, the cucumberOpts area in the conf.js file necessitates a variable named ‘tags’ as an empty record. 

Though we’re at it, it is critical to place out that the conf.js file wants to have a portion where by we specify the Cucumber as our tests framework: 

The in general composition of the automatic testing project produced in Site Item Model is comparable throughout technologies. An overview for Protractor can be observed down below:  

After you generate all the needed data files and complete the configuration, it is time to generate the exams them selves. 

Considering that we’re working in BDD framework, let us start off with a easy Aspect File with a very simple circumstance focusing on verifying a Registration form (with a tag for running it later) 

At the time that is finished, we can specify what transpires in every single action in /actions/registration.js: 

In that file, we initially specify the path to the file containing techniques that are going to be called in each and every of the action definitions. Then we’re calling assertion libraries and placing up timeouts. 

Step definition implementation is pretty easy the Cucumber search phrase precedes a regex and a parameter the physique of a step phone calls a strategy from /internet pages/registration.js file. Ordinarily, 1 move phone calls for just one particular process but check methods could be far more intricate if need be. Observe that if a technique returns a Boolean worth, we are invoking assertion at the stage of a action definition (line 23). 

 In the/pages/registration.js file, we need to specify a locator dictionary for elements that we’re likely to interact with. You can do this in the adhering to method: 

You should note the selectors utilized for locating the features you can use numerous out-of-the-box procedures for finding aspects in Protractor, which have been extensively explained in the official Protractor Manual (website link) 

The very same goes for methods employed to interact with things:

(PS. Do not retail outlet your login credentials in the examination automation code… The over is just for demonstration reasons) 

What transpires earlier mentioned is that we’re utilizing strategies that we’ve called in /methods/registration.js file, making use of the factors we’ve place in the locator dictionary (highlighted in gentle blue) and interacting with them utilizing Protractor strategies (highlighted in purple). 

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

To operate the check you have prepared and tagged accordingly, all you need 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 accordingly. 

And there you have it! Now you have a all set, set up Protractor screening framework integrated with Cucumber, Site Item Model which you can run with the help of tags. If you want to uncover out more about Protractor, I inspire you to go to the Protractor web site, which includes extensive documentation with code illustrations below.