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

For a lot of years, when it came to automating net UI screening, Selenium was the king. And it is secure to say it however is! As a extensively recognised and demonstrated automation screening instrument, it is usually a default preference for quite a few computer software projects. But does it signify a single shouldn’t investigate other technologies and frameworks? Of course not! In this post, I will explore the primary details guiding using Protractor and clarify how to set it up for seamless use with Cucumber and Web site Item Product.

The principal position behind employing Protractor is that it was produced primarily for testing Angular applications. Because Angular has its own individual properties – approaches, features, and synchronization, Protractor addresses people to make tests these apps much easier and more trusted. It is truly worth mentioning that Protractor is a wrapper about webdriver.js – the official JavaScript implementation of Selenium Webdriver. What this implies is that in the course of assessments development particular Angular features can be reached with out-of-the-box take a look at framework procedures and it nonetheless appears equivalent to what would have been coded in a common Selenium challenge. On best of that, Protractor is able of synchronizing with Angular, which also helps with the stability of the assessments.

The assumptions for setting up the challenge have been equivalent to former endeavors with exam automation projects – the framework has to be very clear (Site Item Design) and test scripts have to be crystal clear and understandable, even for non-specialized crew associates (Cucumber and Gherkin). The alternative of programming language fell on JavaScript given that Protractor is a node.js application and the other viable solution, TypeScript, would demand a little bit much more coding. This time the venture will employ Visible Studio Code as IDE.

To commence location up the venture, initial, you’ll require to install node.js. Following putting in it on your machine, you can validate that the set up was successful by typing in ‘node -v’ in the terminal. When you are at it, in the exact same place you can also validate the Node Packages Manager, typing in ‘npm – v’. Then, form in ‘npm set up -g protractor’ and validate its thriving set up with ‘protractor –version’. Just in scenario, you can update the driver from time to time by applying the “web driver-supervisor update” command.

Our upcoming action will be location up the IDE for relaxed work. Initial, in Visible Studio Code set up the “Cucumber (Gherkin) full support” extension. The moment that’s completed, we have to consider treatment of our dependencies. In our project’s bundle.json file we’ll will need to involve chai and chai-as-promised for assertions, cucumber, and protractor – all in the dependencies portion. In devDependencies, we’ll need to have protractor-cucumber-framework to accomplish the goal we’re striving for.

To have ease and comfort and clarity in just the improvement procedure, one particular of the options that present it is the potential to immediately search up what code is executed guiding each and every gherkin action. To realize that in a Protractor challenge, we’ll require to specify Cucumber solutions in the conf.js file. What is necessary is the path to the actions folder. 

Then, in the configurations.json file, we’ll require to specify the paths to folders made up of action definitions and approaches that are executed behind them. We can do this in the pursuing method: 

When we do this, we can very easily navigate via the project by clicking the move/definition/approach/element specified in the code with a CTRL or CMD button pressed. It is a uncomplicated detail, but it can substantially improve productivity and lower the time expended on building or debugging assessments! 

Our next premise that we want to deal with is working the tests by tags. Although including a tag to a element file is pretty straightforward, the element wherever these are run calls for supplying a path to Cucumber Feature data files in the conf.js file. 

As you can observe in the over piece of code, the cucumberOpts section in the conf.js file needs a variable named ‘tags’ as an empty listing. 

Even though we’re at it, it is critical to issue out that the conf.js file wants to have a area exactly where we specify the Cucumber as our screening framework: 

The overall framework of the automatic testing undertaking designed in Website page Item Design is related throughout technologies. An overview for Protractor can be observed under:  

When you produce all the essential files and end the configuration, it is time to produce the assessments by themselves. 

Considering the fact that we’re doing work in BDD framework, let’s commence with a basic Aspect File with a very simple circumstance focusing on verifying a Registration kind (with a tag for functioning it later) 

When which is accomplished, we can specify what takes place in each stage in /steps/registration.js: 

In that file, we very first specify the path to the file that contains solutions that are going to be identified as in each individual of the move definitions. Then we’re contacting assertion libraries and environment up timeouts. 

Step definition implementation is quite simple the Cucumber search phrase precedes a regex and a parameter the physique of a action calls a system from /web pages/registration.js file. Usually, a person stage phone calls for just a single approach but check methods could be additional intricate if will need be. Notice that if a process returns a Boolean value, we are invoking assertion at the level of a stage 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 subsequent method: 

Please be aware the selectors employed for locating the things you can use several out-of-the-box approaches for locating components in Protractor, which have been extensively explained in the formal Protractor Tutorial (hyperlink) 

The very same goes for strategies employed to interact with aspects:

(PS. Do not shop your login qualifications in the check automation code… The above is just for demonstration reasons) 

What takes place higher than is that we’re applying solutions that we’ve referred to as in /measures/registration.js file, using the components we have put in the locator dictionary (highlighted in mild blue) and interacting with them using Protractor approaches (highlighted in purple). 

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

To run the test you have created and tagged appropriately, all you require to do now is you have to open up a further new terminal window in VS Code and enter the command:  

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

And there you have it! Now you have a ready, set up Protractor testing framework built-in with Cucumber, Web page Item Design which you can run with the enable of tags. If you want to find out more about Protractor, I motivate you to go to the Protractor web page, which includes detailed documentation with code illustrations listed here.