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

For several years, when it came to automating world-wide-web UI testing, Selenium was the king. And it is safe and sound to say it nonetheless is! As a widely recognised and confirmed automation tests tool, it is usually a default choice for many computer software initiatives. But does it imply one particular should not explore other technologies and frameworks? Of class not! In this write-up, I will go over the main points powering using Protractor and demonstrate how to established it up for seamless use with Cucumber and Webpage Item Product.

The main place powering employing Protractor is that it was made mainly for tests Angular apps. Due to the fact Angular has its individual individual attributes – approaches, features, and synchronization, Protractor addresses those to make tests these applications less difficult and more dependable. It is worth mentioning that Protractor is a wrapper around webdriver.js – the formal JavaScript implementation of Selenium Webdriver. What this usually means is that throughout tests improvement unique Angular aspects can be achieved with out-of-the-box exam framework methods and it nonetheless seems very 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 helps with the stability of the assessments.

The assumptions for location up the task had been equivalent to previous endeavors with examination automation projects – the structure has to be very clear (Site Object Design) and exam scripts have to be very clear and comprehensible, even for non-specialized workforce customers (Cucumber and Gherkin). The choice of programming language fell on JavaScript considering that Protractor is a node.js software and the other practical solution, TypeScript, would involve a bit extra coding. This time the venture will use Visible Studio Code as IDE.

To start setting up the challenge, 1st, you’ll require to install node.js. Immediately after putting in it on your machine, you can verify that the set up was prosperous by typing in ‘node -v’ in the terminal. While you’re at it, in the identical place you can also confirm the Node Offers Manager, typing in ‘npm – v’. Then, type in ‘npm set up -g protractor’ and verify its effective set up with ‘protractor –version’. Just in scenario, you can update the driver from time to time by utilizing the “web driver-supervisor update” command.

Our future phase will be location up the IDE for snug function. First, in Visible Studio Code put in the “Cucumber (Gherkin) total support” extension. At the time that’s accomplished, we have to consider treatment of our dependencies. In our project’s bundle.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 have to have protractor-cucumber-framework to accomplish the goal we’re striving for.

To have comfort and clarity within just the development method, just one of the characteristics that present it is the capability to speedily glimpse up what code is executed behind just about every gherkin move. To attain that in a Protractor venture, we’ll will need to specify Cucumber solutions in the conf.js file. What is required is the path to the techniques folder. 

Then, in the options.json file, we’ll have to have to specify the paths to folders made up of move definitions and solutions that are executed behind them. We can do this in the following way: 

When we do this, we can conveniently navigate as a result of the job by clicking the move/definition/process/aspect specified in the code with a CTRL or CMD button pressed. It’s a uncomplicated thing, but it can radically raise productivity and lower the time spent on producing or debugging exams! 

Our upcoming premise that we have to have to deal with is running the tests by tags. While introducing a tag to a element file is fairly uncomplicated, the aspect wherever these are run needs offering a path to Cucumber Element information in the conf.js file. 

As you can observe in the earlier mentioned piece of code, the cucumberOpts section in the conf.js file requires a variable named ‘tags’ as an empty list. 

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

The general composition of the automatic testing undertaking developed in Site Object Product is very similar across systems. An overview for Protractor can be noticed down below:  

After you make all the essential documents and end the configuration, it is time to compose the exams by themselves. 

Since we’re operating in BDD framework, let us get started with a uncomplicated Function File with a very simple situation concentrating on verifying a Registration form (with a tag for running it later) 

When which is completed, we can specify what occurs in every single stage in /methods/registration.js: 

In that file, we very first specify the route to the file made up of procedures that are heading to be termed in just about every of the stage definitions. Then we’re calling assertion libraries and environment up timeouts. 

Phase definition implementation is very simple the Cucumber search phrase precedes a regex and a parameter the body of a stage phone calls a technique from /web pages/registration.js file. Ordinarily, just one step phone calls for just one particular system but take a look at ways could be a lot more intricate if will need be. See that if a technique returns a Boolean worth, we are invoking assertion at the level of a step definition (line 23). 

 In the/internet pages/registration.js file, we require to specify a locator dictionary for components that we’re going to interact with. You can do this in the adhering to manner: 

You should notice the selectors utilized for finding the features you can use several out-of-the-box procedures for finding factors in Protractor, which have been extensively described in the official Protractor Guideline (connection) 

The similar goes for solutions employed to interact with elements:

(PS. Do not retail store your login qualifications in the check automation code… The earlier mentioned is just for demonstration applications) 

What happens above is that we’re applying approaches that we have named in /measures/registration.js file, employing the features we have put in the locator dictionary (highlighted in light blue) and interacting with them applying Protractor methods (highlighted in purple). 

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

To operate the examination you have prepared and tagged appropriately, all you require to do now is you have to open up one more new terminal window in VS Code and enter the command:  

protractor protractor.conf.js –cucumberOpts.tags=’@smoke1′ – tagging the sought after feature appropriately. 

And there you have it! Now you have a ready, set up Protractor testing framework integrated with Cucumber, Web site Object Product which you can run with the assistance of tags. If you want to obtain out more about Protractor, I inspire you to go to the Protractor site, which consists of comprehensive documentation with code examples right here.