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.
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.