Setting Up a Testing Challenge in Protractor with Cucumber and Web page Object Mannequin – Grape Up

For a few years, when it got here to automating internet UI testing, Selenium was the king. And it’s protected to say it nonetheless is! As a broadly identified and confirmed automation testing software, it’s usually a default selection for a lot of software program initiatives. However does it imply one shouldn’t discover different applied sciences and frameworks? After all not! On this article, I’ll talk about the details behind using Protractor and clarify the way to set it up for seamless use with Cucumber and Web page Object Mannequin.

The principle level behind utilizing Protractor is that it was developed primarily for testing Angular purposes. Since Angular has its personal particular person properties – strategies, options, and synchronization, Protractor addresses these to make testing such apps simpler and extra dependable. It’s price mentioning that Protractor is a wrapper over webdriver.js – the official JavaScript implementation of Selenium Webdriver. What this implies is that in checks improvement specific Angular components could be reached with out-of-the-box take a look at framework strategies and it nonetheless appears just like what would have been coded in a typical Selenium challenge. On prime of that, Protractor is able to synchronizing with Angular, which additionally helps with the steadiness of the checks.

The assumptions for organising the challenge have been just like earlier endeavors with take a look at automation initiatives – the construction needs to be clear (Web page Object Mannequin) and take a look at scripts should be clear and comprehensible, even for non-technical group members (Cucumber and Gherkin). The selection of programming language fell on JavaScript since Protractor is a node.js utility and the opposite viable choice, TypeScript, would require a bit extra coding. This time the challenge will make the most of Visible Studio Code as IDE.

To start organising the challenge, first, you’ll want to put in node.js. After putting in it in your machine, you may confirm that the set up was profitable by typing in ‘node -v’ within the terminal. When you’re at it, in the identical place you may as well confirm the Node Packages Supervisor, typing in ‘npm – v’. Then, kind in ‘npm set up -g protractor’ and confirm its profitable set up with ‘protractor –model’. Simply in case, you may replace the driving force once in a while through the use of the “internet driver-manager replace” command.

Our subsequent step will probably be organising the IDE for snug work. First, in Visible Studio Code set up the “Cucumber (Gherkin) full help” extension. As soon as that’s accomplished, we’ve got to maintain our dependencies. In our challenge’s bundle.json file we’ll want to incorporate chai and chai-as-promised for assertions, cucumber, and protractor – all within the dependencies part. In devDependencies, we’ll want protractor-cucumber-framework to attain the aim we’re striving for.

To have consolation and readability throughout the improvement course of, one of many options that present it’s the capability to shortly search for what code is executed behind every gherkin step. To attain that in a Protractor challenge, we’ll have to specify Cucumber choices within the conf.js file. What is critical is the trail to the steps folder. 

Then, within the settings.json file, we’ll have to specify the paths to folders containing step definitions and strategies which are executed behind them. We are able to do that within the following method: 

Once we do that, we are able to simply navigate by way of the challenge by clicking the step/definition/technique/aspect specified within the code with a CTRL or CMD button pressed. It’s a easy factor, however it could dramatically enhance productiveness and reduce the time spent on growing or debugging checks! 

Our subsequent premise that we have to sort out is operating the checks by tags. Whereas including a tag to a characteristic file is fairly simple, the half the place these are run requires offering a path to Cucumber Characteristic information within the conf.js file. 

As you may observe within the above piece of code, the cucumberOpts part within the conf.js file requires a variable named ‘tags’ as an empty checklist. 

Whereas we’re at it, it is very important level out that the conf.js file must have a piece the place we specify the Cucumber as our testing framework: 

The general construction of the automated testing challenge created in Web page Object Mannequin is comparable throughout applied sciences. An summary for Protractor could be noticed under:  

When you create all the required information and end the configuration, it’s time to write the checks themselves. 

Since we’re working in BDD framework, let’s begin with a easy Characteristic File with a easy state of affairs specializing in verifying a Registration type (with a tag for operating it later) 

As soon as that’s accomplished, we are able to specify what occurs in every step in /steps/registration.js: 

In that file, we first specify the trail to the file containing strategies which are going to be known as in every of the step definitions. Then we’re calling assertion libraries and organising timeouts. 

Step definition implementation is fairly simple; the Cucumber key phrase precedes a regex and a parameter; the physique of a step calls a way from /pages/registration.js file. Normally, one step calls for only one technique however take a look at steps may very well be extra intricate if want be. Discover that if a way returns a Boolean worth, we’re invoking assertion on the stage of a step definition (line 23). 

 Within the/pages/registration.js file, we have to specify a locator dictionary for components that we’re going to work together with. You are able to do this within the following method: 

Please notice the selectors used for finding the weather; you should use varied out-of-the-box strategies for finding components in Protractor, which have been extensively described within the official Protractor Information (link) 

The identical goes for strategies used to work together with components:

(PS. Don’t retailer your login credentials within the take a look at automation code… The above is only for demonstration functions) 

What occurs above is that we’re implementing strategies that we’ve known as in /steps/registration.js file, utilizing the weather we’ve put within the locator dictionary (highlighted in gentle blue) and interacting with them utilizing Protractor strategies (highlighted in purple). 

Then it’s time to run the checks. In VS Code, open a brand new terminal window and hit the “internet driver-manager begin” command. Webdriver ought to be up and operating now. 

To run the take a look at you’ve written and tagged accordingly, all it is advisable do now could be it’s a must to open one other new terminal window in VS Code and enter the command:  

protractor protractor.conf.js –cucumberOpts.tags=’@smoke1′ – tagging the specified characteristic accordingly. 

And there you’ve it! Now you’ve a prepared, arrange Protractor testing framework built-in with Cucumber, Web page Object Mannequin which you’ll run with the assistance of tags. If you wish to discover out extra about Protractor, I encourage you to go to the Protractor web site, which incorporates complete documentation with code examples here.