What’s up Guys! Welcome to automationcalling.com
13 Min Read
- Assertion library
- BDD/TDD Integration
- Integration test
- Regular updates from the community
- Cross Browser Layout Testing
- Visual Regression Testing
- Easy to follow Shift left testing for better product quality.
- Provides developers the flexibility of generating end to end tests, along with unit testing for faster and reliable shipping.
- More collaboration between Dev and QA in same language for test automation.
- Helps to implement Dev QA test and pair programming in test automation side.
- More flexible to work all in same languages and better productivity.
- Right tools and right approach in same languages gets greater benefits.
What Makes Protractor A Good Fit For Your Automation Test Scripts?
Protractor is an open-source,End to End test automation framework, that is brought up by Google which makes it a reliable, renowned and up-to-date framework. Protractor is a Node.js program that support testing framework like Jasmine, Mocha and Cucumber.
Key Features of Protractor:
- Protractor is developed as a wrapper build around Selenium WebDriver JS and Selenium Server. All key feature of Selenium WebDriver JS and additional implementation helps to do better automation supports and less maintenance when compare with Selenium.
- Protractor offers new locator strategies on top of native locator which actually helps to locate element in DOM easily.
- model, by.binding, by.repeater etc.,
- Protractor supports page object design pattern – helps on writing clean and readable code. Writing clean code is imperative for Automation testers.
- Protractor make use of Selenium Grid to initialize, control and run browser instance.
- Can easily integrate with jasmine, mocha and cucumber framework to write your test.
Advantage of Protractor when combined with Selenium:
- Excellent speed compare with other tools or libraries.
- Support cross browser parallel testing through multiple browsers.
- No need to work on synchronization strategy for eg., waits like implicit, explicits and sleep etc., Protractor has in build capabilities and intelligence to connect with Angular JS framework and knows when Angular has finished rendering the DOM for eg., page loading wait, synchronization.
- Angular-specific locator support.
Getting Started With Cross Browser Automation Testing With Protractor and Selenium
Here are the prerequisite required for performing cross browser automation testing with Protractor and Selenium on Windows:
- Install protractor using npm
- Update webdriver manager and start up a server
- Visual Studio Code
Setting up Automation Environment For Testing With Protractor and Selenium in Windows
This section has detailed steps explaining how to setup environment for performing end to end cross browser automation testing with Protractor and Selenium through Windows.
Step 1: Installation of Node.js
You need to install npm for Node.js.
What is npm?
What is package manager?
To install Node.Js, click here
Once you are done downloading the installer, run it as administrator.
Click on ‘Next’ button in Node.js setup window to proceed further.
Click on checkbox for accepting license agreement and click on Next button.
Keep default windows location or feel free to change the location and click next.
Thereafter, click on Next and Install button. Wait for a couple minutes for the installation to complete.
You would have seen the following screen after installation completed.
To verify npm gets installed in your machine. Please supply the following command:
- npm –version
Step 2: Installation of Protractor using npm
To download a package, open a command prompt and supply the following command
- npm install –g protractor
install command is for download the package
-g stands for global which means any command to operate in global mode.
The below snapshot indicates that protractor is installed successfully.
To verify installed protractor version, supply the following command:
- protractor –version
Step 3: Update WebDriver Manager and Start Up A Server
To update webdriver manager, supply the following commands
- webdriver-manager update
Once supply the above commands, it would download all necessary dependencies.
WebDriver manager is a helper tool to download necessary binaries. It will help to start and stop selenium server.
To start up with selenium server,
To verify selenium server is running in browser, please use the following url
Protractor test will send request to this server and control a local browser where you can see information about the status of the server. So, you could later go ahead and run your JS automation script with Protractor and Selenium.
Step 4: Installation of Visual Studio Code
What is Visual Studio Code?
Developed by Microsoft, Visual Studio code is a source code editor for Windows, Mac and Linux operating systems. It is a lot similar to other programming editor like Eclipse or Intellij. This tool was developed by Microsoft for Windows, Linux and Mac OS. It supports number of programming languages, to know more about Visual Studio code please visit here
Download visual studio code from here
Double click on Visual Studio installer and click “Next” button.
Click on “I accept the agreement” in Setup – Visual Studio Code window
Keep default installation location (or) feel free to change different path in your computer and click “Next’ button
Continue to click “Next” and check Desktop Shortcut if you want, finish the installation.
Once installation is complete, the following window would appear.
Click “Finish” button, finally Visual Studio Code Editors open up.
Writing Sample Code for Automation Testing With Protractor and Selenium
To run protractor test for end to end automation, you must need two files:
What is Jasmine Framework?
Executing Single Instance For Automation Testing With Protractor and Selenium WebDriver(Local)
Here is the simple example config file and how to write basic code in Protractor using Jasmine Framework.
In the above snapshot shows the syntax of how to define config file to execute browser automation with Protractor and Selenium.
- seleniumAddress: Protractor make use to Selenium Grid to run your test in specified browser.
- specs: specs indicates test suite that you can mention in one or more spec files to run multiple tests.
- Capabilities: This is the place where you can capability setting for your test configuration for eg., browser version, platform etc., in case no capabilities is provided then by default, it takes chrome browser in your machine.
We will see clear explanation of what is the above code indicating.
describe –> describe is the keyword from Jasmine to write syntax for test suites. This is definition of collection of test cases in your script file.
it –> is the keyword for test cases to meet specific condition. There can be more than one “it” added under describe in Jasmine framework.
In the above code, we launch the browser, navigate to sign up page, see the title gets matched and pass the results.
To run your test:
In Visual Studio Code: Go to View Menu-> Click “Terminal” and supply the following command
Syntax: To run your test suites protractor followed by config file name.
Note: Before run your test, please make to run selenium Grid by supply the following commands:
- webdriver-manager start
After executing the above test, observed the following failures which is expected
The above screenshot indicates the website https://lambdatest.com is not developed using AngularJS component. This is best real time examples to realize how Protractor works while launching browser. As mentioned in “Advantages” topic in above, the Protractor basically tries to connect with Angular JS framework while launching application. The moment Protractor identified and realized it’s not an AngularJS component, it recommended us to turn off waiting for Angular.
To Address this problem: we have a method called “browser.waitForAngularEnabled(false);”
Now, the method is added in the script and as you can see in the below screenshot, Protractor now supports with non-angular js application.
After executing the test, the test is passed successfully.
Executing Parallel Execution For Automation Testing With Protractor and Selenium WebDriver(Local)
In this example I’m trying to use same script like above except small tweak in conf.js page. So I copied existing config and update configuration details to run same test in multiple browsers to perform cross browser parallel testing.
In the above examples, I modified “multiCapabilities” and included firefox browser. This is the best advantage when we compare with other libraries/packages, no maintenance is needed in case of automation testing with Protractor and Selenium. Protractor supports in-build code to run cross browser automation
This time we run both same tests in chrome and firefox which executed and pass the results. So far we have seen how to run the test in protractor for Non-Angular JS application. The below section will show how to run AngularJS application in parallel using async and await
Executing Parallel Execution for AngularJS using async/await
To run parallel execution for AngularJS application, the configuration remains but I implement use async and await for right way to queue up events.
Make sure to disable promise manage in your config file.
The example script to run Synchronization way to queue up events:
By delivering Protractor as an extensive end to end testing framework, Google has put a lot of efforts to make QA engineer works easy and protractor works like a charm. There are a lot of NPM modules available to utilize work with REST API, data generators etc along with browser automation to integrate all types of automation. All these point towards Protractor being the right choice for automated cross browser testing of AngularJS as well as Non-AngularJS application.
Note: I contributed same article at lambdatest.com where you can find how to run the same script in cloud execution.
Thank you for your time, hope! you enjoyed this article. Please subscribe my blog for more updates.