Webdriver.io Overview

Introduction

Check out the Getting Started with Webdriver.io guide for a quick introduction on how to run your test 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 Webdriver.io scenarios on Testable.

Creating a Scenario

There are two ways to create a Webdriver.io scenario:

  1. Create a new Test Case (New Test Case 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.

Source

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

  1. Upload Files + Credit/Edit: Credit/edit the test spec and configuration file in the browser that are required to run your Webdriver.io test. All other files can be uploaded in the Files section. Note that if you upload a zip file it will be unzipped on the test runner before execution.
  2. Upload All Files: Upload all files required to run your Webdriver.io test without editing any of them in the browser. Note that if you upload a zip file it will be unzipped on the test runner before execution.
  3. 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 wdio-testable-example.

Webdriver.io Test Runner Configuration

See the wdio-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

All these APIs will work when run locally as well

See the testable-utils README for more details.

Screenshots

Webdriver.io has support for capturing browser screenshots. The first way is to use the following Testable custom command:

browser.testableScreenshot('HomePage');

This command takes a screenshot and puts it in the output directory to be collected as part of the test results. It also includes a prefix to make it easier to identify: [region]-[chunk]-[user]-[iteration]-[name].png. Tests are broken up into chunks, and within each chunk users and iterations are numbered starting at 0. So for example us-east-1-123-0-0-HomePage.png would be chunk id 123, first user, first iteration, image name HomePage.

The other option is to use the built in function and make sure to write to the output directory:

browser.saveScreenshot((process.env.OUTPUT_DIR || '.') + '/snapshot-' + Date.now() + '.png');

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

Only a sampling of screenshots gets reported back into the Testable results by default (similar to network traces). To capture all screenshots, check the Advanced Options -> 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;
    }
  }
};