Selenium Javascript Overview

Introduction

Check out the Getting Started with Selenium Javascript + Mocha 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 Selenium Javascript scenarios in general.

Creating a Scenario

There are two ways to create a Selenium Javascript 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 three ways to load your Selenium Javascript scenario into the Testable platform.

  1. Upload Files + Credit/Edit: Credit/edit the test spec and package.json files in the browser that are required to run your Selenium Javascript 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 Selenium Javascript 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.

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, mostly writing to the console where appropriate. 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:

const fs = require('fs');
const path = require('path');
const writeFile = util.promisify(fs.writeFile);

async function takeScreenshot(driver, file) {
  let image = await driver.takeScreenshot();
  await writeFile(file, image, 'base64');
}

// ... somewhere in your test
await takeScreenshot(driver, path.join(process.env.OUTPUT_DIR || '.', 'HomePage.png'));

This command takes a screenshot and puts it in the output directory to be collected as part of the test results. When run locally, the screenshot will be written to the current working 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.

Browser Logs

We recommend using the driver.manage().logs().get(type) api to get access to the browser console.

Here is an example where we print the browser logs after each test to the Testable log:

const webdriver = require('selenium-webdriver');
const logging = require('selenium-webdriver').logging;

async function printLogs(driver) {
    const entries = await driver.manage().logs().get(logging.Type.BROWSER);
    entries.forEach(function(entry) {
        console.log('[browser log] ' + entry.level.name + ': ' + entry.message);
    });
}

describe('DefaultTest', function() {
    this.timeout(60000);
    const prefs = new logging.Preferences();
    prefs.setLevel(logging.Type.BROWSER, logging.Level.ALL);
    let driver = new webdriver.Builder()
        .withCapabilities(webdriver.Capabilities.chrome())
        .setLoggingPrefs(prefs)
        .build();

    afterEach(function() {
      printLogs(driver);
    });
});