November 4, 2020 Jonny Steiner

Boost Your Web App Testing with Protractor and SeeTest

Share this knowledge!

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.

The History

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.

Protractor Architecture

Here are the core components of Protractor’s Architecture:

  1. Protractor: E2E framework wrapped over WebDriver JS for Angular apps.
  2. Jasmine: BDD framework for JS test automation projects
  3. Selenium: Browser automation tool
  4. 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.

Installation

The installation procedure is pretty simple and easy. To use Protractor, you nee the following tools:

  1. Java
  2. Node.js
  3. npm

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:

https://www.oracle.com/in/java/technologies/javase-downloads.html

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:

https://nodejs.org/en/download/

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

Protractor

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

Protractor

NPM package manager has installed the tool. To check if it properly installed, type the following command in the command prompt:

  • protractor –version

Protractor

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.

Protractor

To start the webdriver server, type the following command:

  • webdriver-manager start

Protractor

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:

  1. Configuration file (conf.js): This is the configuration file that contains details of the tests folder, framework, Selenium server address, etc.
  2. Specification file (spec.js): It contains your test specs.

Now, open the notepad and type the following code and save it as a spec.js file.

// spec.js
describe('Experitest Protractor Demo', function() {
  it('should have a title', function() {
    browser.driver.get('https://experitest.com/');
    expect(browser.driver.getTitle()).toEqual('Experitest: Mobile App & Cross-Browser Testing End-to-End');
  });
});

Now open another notepad and type the following code and save it as conf.js file.

// conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}

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.

protractor

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.

Protractor

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.

Running Protractor tests on SeeTest is simple and easy. You just have to change the Selenium server address in the configuration file.

 

// conf.js
exports.config = {
seleniumAddress: 'https://USERNAME:PASSWORD@cloud.seetest.io/wd/hub',
  framework: 'jasmine',
 capabilities: {
    'browserName': 'chrome',   
      },
    specs: ['spec.js']
}

Note: Enter your SeeTest username and password in the Selenium Address URL field.

The spec.js will remain the same.

 

// spec.js
describe('SeeTest Protractor Demo', function() {
  it('should have a title', function() {
    browser.driver.get('https://experitest.com/');
    expect(browser.driver.getTitle()).toEqual('Experitest: Mobile App & Cross-Browser Testing End-to-End');
  });
});

Now, run the conf.js file from the command prompt:

  • Protractor conf.js

Protractor

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

To run the same test on multiple browsers, simply edit the conf.js by adding more browsers. In this example, the Firefox browser is added to the test.

 

// conf.js
exports.config = {
seleniumAddress: 'https://USERNAME:PASSWORD@cloud.seetest.io/wd/hub',
  framework: 'jasmine',
 multiCapabilities: [{
    'browserName': 'chrome', },
{
  'browserName': 'firefox', 
      }],
    specs: ['spec.js']
}

Now, run the conf.js file from the command prompt:

Protractor

The test has successfully run on the Chrome browser and Firefox browser. You can see that it is running 2 instances of WebDriver.

Protractor

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.

SeeTest

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.

Summary

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.

However, the user base and community support are less when compared with Selenium and other frameworks. The tool supports only JavaScript which means you need to have a basic knowledge of JS. Overall, Protractor is a handy tool to run E2E test automation for Angular and AngularJS web applications.

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!

Guy ArieliCTO

Share this knowledge!