Boost Your Web App Testing with Protractor and SeeTest
Protractor is a test automation framework designed to run end-to-end testing on angular apps as well as Angular JS apps. This open-source framework is simple to install and use. It works as a WebDriver JS wrapper and uses the Jasmine behavior-driven development (BDD) framework and the Selenium browser automation tool to seamlessly perform E2E testing on Angular web applications. Besides, you can use it to test non-angular web applications as well by making slight changes to the syntax. You can add it to your project as a library or use it as a standalone binary runner. By simulating user interaction, Protractor allows you to test the actual functionality of an application. The tool integrates with CI/CD tools such as Jenkins and test runners such as Grunt.
Protractor was designed by Google as a replacement for Angular Scenario Runner. Julie Ralph was the main contributor to this open-source framework. When the test engineers team at Google was working with Angular Scenario Runner, they found certain limitations with the tool. Scenario Runner was not able to efficiently handle popup windows and browser history. As it was a dedicated Angular app testing tool, it was not able to deal with non-angular pages. So, the team came up with Protractor which enables you to easily test all layers of the applications with ease.
Another challenge with Angular JS web applications is that they contain extended HTML attributes. As these attributes are not included in Selenium locators, you cannot find these web elements using Selenium Web Driver. The Protractor framework is built on top of Selenium which enables it to easily work with web elements as well as work with large and complex projects. The reason Protractor is helpful is that it tests the actual functionality of the application instead of running unit tests.
Here are the core components of Protractor's Architecture:
- Protractor: E2E framework wrapped over WebDriver JS for Angular apps.
- Jasmine: BDD framework for JS test automation projects
- Selenium: Browser automation tool
- Web Driver JS: Selenium web driver binding for JS.
Jasmine is the default framework to write your Protractor test scripts. You can also integrate other frameworks such as Mocha and Cucumber. Protractor uses two files namely spec.js and conf.js. The spec.js file contains the test scripts while the conf.js file contains the test configuration details. After writing your tests, you need to initiate the Selenium server and run the test scripts using the Protractor test runner. The Selenium WebDriver invokes browser APIs and runs the test scripts.
Protractor is easy to install and use. It supports Behaviour-driven development (BDD) testing as well as Test-driven Development testing. Tests are run pretty fast. You don't have to add ‘waits' for elements to load as it comes with automatic waits and auto-synchronization. It also supports parallel testing on multiple browsers.
The installation procedure is pretty simple and easy. To use Protractor, you nee the following tools:
Step 1: Install Java
Protractor runs on Node.js which in turn works on Java. So, you should first download and install Java on your machine. Java SE 15 is the latest SE platform.
To download and install Java, visit this link:
Step 2: Configure Environment Variables
To use Java, you should configure environment variables.
To do so:
Open System -> Advanced System Settings -> Advanced -> Environment variables
- Under user variables, add Java JDK folder path
- Under system variables, add JDK Bin folder path
Step 3: Install Node.js and NPM
Visit this link to download Node.js:
12.19.0 is the latest LTS version of Node.js. It comes with npm 6.14.8.
After downloading the .msi installer package, double-click it to install Node.js.
Step 4: Configure Environment Variables
After installing Node.js, you need to configure the environment variables. Follow the same procedure done in step 2. Add the Node.js folder path to the system variable.
Now, Java, node.js, and npm are installed on your machine. To check if they are working fine, open the command prompt window, and type the following commands:
- java –version
- node –v
- npm –v
So, all the tools are working fine.
Step 5: Install Protractor
Protractor runs on Node.js v0.10.0 or higher. When you have Node.js installed on your machine, you can directly install Protractor using npm.
To do so, open the command prompt and type the following command:
- npm install –g protractor
NPM package manager has installed the tool. To check if it properly installed, type the following command in the command prompt:
- protractor –version
It shows that protractor 7.0.0 is installed on the machine. It comes with webdriver-manager that will help you to manage the browser.
Before using the tool, update the webdriver-manager to download any necessary binaries.
- webdriver update
It will update the browser drivers.
To start the webdriver server, type the following command:
- webdriver-manager start
Here, you can see that the webdriver server-initiated, and the Selenium Server is up and running on port 4444.
So, the Protractor test automation framework is installed and ready for use.
Writing your First Test on Protractor
Before writing your first test, create a project folder to save all your files.
Protractor uses two files:
- Configuration file (conf.js): This is the configuration file that contains details of the tests folder, framework, Selenium server address, etc.
- Specification file (spec.js): It contains your test specs.
To run this test case, type the following command in the command prompt:
- protractor conf.js
Note: When you type this command in the same command prompt window, it will give an error ‘attempting to shut down nicely'. It is because the Selenium server is running in the same window. So, open another Windows prompt and type the command.
Now, you can see that the test has successfully run in 4.447 seconds.
If you check the Selenium server window, you can see details about the test.
It shows that the ChromeDriver was started successfully along with the session details.
Running Protractor on SeeTest Platform
SeeTest is a comprehensive test automation platform that enables us to seamlessly run automated tests on multiple platforms, browsers, and devices.
Note: Enter your SeeTest username and password in the Selenium Address URL field.
Now, run the conf.js file from the command prompt:
- Protractor conf.js
The test has passed. The Protractor tool has logged into the SeeTest platform, opened the Chrome browser, and opened the Experitest website, and verified the title.
So, you can write different test cases to perform various tests using multiple browsers and devices.
Parallel Testing with Protractor and SeeTest
Now, run the conf.js file from the command prompt:
The test has successfully run on the Chrome browser and Firefox browser. You can see that it is running 2 instances of WebDriver.
One of the advantages of using the SeeTest cloud platform for test automation tasks is the reporting feature. SeeTest offers a visual representation of your test processes which makes it easy to understand how each test is processed.
When you open the dashboard view, you can see all the tests listed here. When you click on a test, you can see the details of the test.
It provides the browser name, version, and platform and also shows how each step is performed in the test. In the other window, it shows the recording of the test. You can play it and see how the test ran. In another window, you can see the test data such as session ID, session time, test framework, duration, time, etc.
Protractor is a dedicated open-source test automation framework to perform end-to-end testing on AngularJS and Angular applications. The biggest advantage of Protractor is that it was designed after Selenium had matured. As such, it was able to take advantage of all the features of Selenium. The installation procedure is pretty simple. It is easy to use for novice users as well. Compared to Selenium Web Driver, Protractor syntax is compact and easy to understand. It performs tests faster than most tools. With a built-in Jasmine framework, it allows you to easily write your tests. It comes with useful features such as auto-synchronization and automatic waits while enabling you to easily find web elements. With parallel testing, you can simultaneously test web applications on multiple browsers.
SeeTest is a comprehensive cloud-based test automation platform that enables you to seamlessly run web and mobile test projects. It allows you to run your tests on a wide range of browsers and devices to test your applications in real-time.
Boost your web app testing by combining the robust SeeTest cloud platform with the quick and easy to use Protractor framework right now!