Protractor Overview

• Introduction
• Create a Scenario
• Source
• Protractor Configuration
• Testable APIs: CSVs, metrics, logging, execution info, live events
• Screenshots
• Custom Resource Names

Introduction

Protractor + Testable makes it possible to load test your Angularjs website with real browsers. Check out the Getting Started with Protractor guide for a quick introduction on how to run your Protractor script. Also check out our Selenium overview guide to better understand how Selenium tests run on Testable in general.

This document goes into further detail on the various options provided for running Protractor.

Creating a Scenario

There are two ways to create a Protractor scenario:

1. Create a new Test Case (Create Test button on the dashboard or Test Cases -> New… on the left nav), select Selenium during step 2.
2. Go to an existing test case and click on the Scenario tab. Click the New Scenario button and select Selenium as the scenario type.

Either way select Bindings=Protractor on the scenario page.

Source

There are two ways to load your Protractor scenario into the Testable platform.

1. Upload: Upload the files/folders required to run your Protractor test. Note that if you upload a zip file it can either be unzipped into your scenario or on the test runner before execution.
2. Version Control: Download the test files from a version control repository. See our version control guide for more details. An example repository can be found at protractor-testable-example.

Protractor Configuration

See the protractor-testable-example README file for more details on how to setup your configuration file to be Testable compatible.

Testable APIs: CSVs, metrics, logging, execution info

The testable-utils library provides several Testable APIs for:

1. Capturing custom metrics
2. Logging
3. Execution Info
4. Reading from a CSV file
5. Timing code blocks
6. Live manual events

All these APIs will work when run locally as well

See the testable-utils README for more details.

Screenshots

Protractor has support for capturing browser screenshots. This can be done using the screenshot function and then writing the screenshot to a file in the output directory that Testable monitors and reports back.

browser.takeScreenshot().then(function(base64Data) {
  fs.writeFileSync((process.env.OUTPUT_DIR || '') + '/HomePage.png', base64Data, 'base64');
});

The above takes a screenshot and puts it in the output directory when executed on a Testable test runner, otherwise in the current directory.

All screenshots get reported back to the results by default. To only capture a sampling of screenshots toggle the Advanced Options -> Advanced Settings -> Capture All Output box in your configuration.

Custom Resource Names

Test executions have a section that breaks down the results by “resource”. By default the “resource” used for grouping results is the HTTP method (if any) plus the base url plus the first 2 parts of the path.

For example, if the browser downloads an image from URL http://www.mycompany.com/static/images/abc.png, the resource name would be GET http://www.mycompany.com/static/images/....

This is done to avoid too many result groupings that are not useful. Note that Testable limits test results to 600 unique resources after which overall and regional results are still calculated but no new resource groupings are created.

To override the default behavior add a custom toResourceName(url, method) function to your wdio.conf.js configuration file.

wdio.local.js

exports.config = {
  specs: [
    "test.js"
  ],
  ...
  testableOpts: {
    // returns [METHOD] [BASE URL]
    toResourceName: function(url, method) {
      const obj = urlModule.parse(url);
      return (method ? method + ' ' : '') + obj.protocol + '//' + obj.host;
    }
  }
};