Selenium JS SDK

The Evinced Selenium JS SDK integrates with new or existing Selenium WebDriver tests to automatically detect accessibility issues. By adding a few lines of code to your Selenium WebDriver project, you can begin analyzing all the web pages and DOM changes to provide a dynamic view of how your site can become more accessible. As a result of the test, a rich and comprehensive report is generated to easily track issues to resolution.

Interested in seeing this in action? Contact us to get started!

Prerequisites

• Selenium version 4 or higher
• Mocha tests only supported

Get Started

Installation

The Selenium JS SDK is not publicly available. Contact us to get started!

With a local copy of the Selenium JS SDK gzipped tar package (.tgz extension), install it in your project directory using NPM or Node package manager of your choice:

1# Using NPM
2npm install -D {path to Selenium JS SDK package}

Authentication

To launch Selenium JS SDK you need to have a Service ID and an API Key.

We encourage setting credentials in environment variables and setting them in code by reference.

1# Online mode
2export EVINCED_SERVICE_ID=<serviceId>
3export EVINCED_API_KEY=<apiKey>
4
5# Offline mode
6# If provided a JWT by Evinced
7export EVINCED_SERVICE_ID=<serviceId>
8export AUTH_TOKEN=<token>

Example

1// Online credentials
2const { setCredentials } = require('@evinced/js-selenium-sdk');
3
4await setCredentials({
5    serviceId: process.env.EVINCED_SERVICE_ID,
6    secret: process.env.EVINCED_API_KEY
7});
8
9// OR
10
11// If provided a JWT by Evinced
12// Offline credentials
13const { setOfflineCredentials } = require('@evinced/js-selenium-sdk');
14
15setOfflineCredentials({
16    serviceId: process.env.AUTH_SERVICE_ID,
17    token: process.env.AUTH_TOKEN,
18});

Your First Test

SDK Initialization

To use Selenium JS SDK you need to authenticate. Please refer to Authentication section for details.

Add Evinced accessibility checks (Single Run Mode)

This is a simple example of how to add an Evinced accessibility scan to a test. Please note the inline comments that give detail on each test step.

1const { Builder } = require('selenium-webdriver');
2const { EvincedSDK } = require('@evinced/js-selenium-sdk');
3
4describe('Demo page', async () => {
5    let driver;
6
7    it('Demo page. evAnalyze', async () => {
8        const driver = await new Builder()
9            .forBrowser('chrome')
10            .build();
11        const evincedService = new EvincedSDK(driver);
12        await driver.get('https://demo.evinced.com/');
13        const issues = await evincedService.evAnalyze();
14        assert.equal(issues.length, 6);
15        await driver.quit();
16    });
17});

Add Evinced accessibility checks (Continuous Mode)

This is an example of how to add a continuous Evinced accessibility scan to a test. Using the evStart() and evStop() methods, the Evinced engine will continually scan in the background capturing all DOM changes and page navigations as the test is executed. This will capture all accessibility issues as clicking on drop-downs or similar interactions reveals more of the page. The advantage of continuous mode is that no interaction with the actual test code is needed.

1const { Builder } = require('selenium-webdriver');
2const { EvincedSDK } = require('@evinced/js-selenium-sdk');
3
4describe('Demo page', async () => {
5    let driver;
6
7    it('Demo page. evStart/evStop', async () => {
8        const driver = await new Builder()
9            .forBrowser('chrome')
10            .build();
11        const evincedService = new EvincedSDK(driver);
12        await evincedService.evStart();
13        await driver.get('https://demo.evinced.com/');
14        const issues = await evincedService.evStop();
15        assert.equal(issues.length, 6);
16        await driver.quit();
17    });
18});

API

global initialization

Initializes the Evinced object within the project.

Example

The specific SDK initialization is not needed. You need just import EvincedSDK in your test files.

1const { EvincedSDK } = require('@evinced/js-selenium-sdk');

Please refer to configuration to see examples of using init with options.

evAnalyze(options)

Scans the current page and returns a list of accessibility issues.

Note: This method is not supported if evStart() is already running.

Please refer to configuration to see examples of using init with options.

Example

1const evincedService = new EvincedSDK(driver);
2await driver.get('https://demo.evinced.com/');
3const issues = await evincedService.evAnalyze();

Return value Promise<Issue[]>

A Report object is returned containing accessibility issues. This is the recommended method for static page analysis. For more information regarding reports as well as the Report object itself, please refer to our detailed Web Reports page.

evStart(options)

Continually watches for DOM mutations and page navigation and records all accessibility issues until the evStop() method is called. This method is recommended for dynamic page flows.

Example

1const evincedService = new EvincedSDK(driver);
2await evincedService.evStart();
3await driver.get('https://demo.evinced.com/');
4const issues = await evincedService.evStop();

Return value Promise<void>

evStop(options)

Stops the process of issue gathering started by evStart() command.

Example

1const evincedService = new EvincedSDK(driver);
2await evincedService.evStart();
3await driver.get('https://demo.evinced.com/');
4const issues = await evincedService.evStop();

Return value Promise<Issue[]>

Returns an object containing recorded accessibility issues from the point in time at which the evStart() method was instantiated. For more information regarding reports as well as the returned object itself, please refer to detailed Web Reports page.

evSaveFile(destination, issues, format)

Saves list of the issues in a file, with the specified format and location. For example, format could be ‘json', 'html, 'sarif' or 'csv'. Please find detailed information on Web Reports page.

Example

1const evincedService = new EvincedSDK(driver);
2await driver.get('https://demo.evinced.com/');
3const issues = await evincedService.evAnalyze();
4evincedService.evSaveFile(issues, 'html', 'test-results/evinced-report.html');
5evincedService.evSaveFile(issues, 'csv', 'test-results/evinced-report.csv');
6evincedService.evSaveFile(issues, 'json', 'test-results/evinced-report.json');
7evincedService.evSaveFile(issues, 'sarif', 'test-results/evinced-report.sarif.json');

Return value Promise<void>

Aggregated Report

The aggregated report feature allows you to have a general aggregated report for the whole run (not only for one test or suite). This report will contain all the issues found by the tests where evStart() and evStop() commands were called. It is still possible to use the evSaveFile() command in any place of your code along with this Aggregated Report feature.

Example

Configuration

The same configuration object can be used in global initialization, evStart() and evAnalyze() methods but with a bit different consequences. By providing some options in global initialization method you define a global configuration for all calls of evStart() or evAnalyze() methods. Please note that global configuration is not intended to be altered from tests due to it will affect all the rest tests as well as tests running in parallel threads. To alter configuration in specific tests you can provide config on the method's level, for instance with evStart() it defines local configuration for this particular session until evStop() is called. If provided in both levels, the command's level config will override the global one.

Engines configuration

Evinced uses two separate engines when scanning for accessibility issues, one is the aXe engine and the other is the Evinced engine. By default, Evinced disables the aXe Needs Review and Best Practices issues based on customer request and due to the fact they are mostly false positives. Please note this setting when comparing issue counts directly. See an example of how to enable Needs Review and Best practices issues in our toggles section.

Configuration object type

To define global configuration for Selenium JS SDK please use file `evConfig.json in a root directory of your project.

1export type EvInitOptions = {
2  rootSelector?: string;
3  enableScreenshots?: boolean;
4  axeConfig?: axe.RunOptions;
5  skipValidations?: SkipValidation[];
6  logging?: {
7    LOGGING_LEVEL: string;
8    ADD_LOGGING_CONTEXT?: boolean;
9  };
10  toggles?: { [key: string]: boolean };
11};

Root Selector

Sets a CSS selector to limit the Evinced Engine to scan only the selected element and its children. Must be a valid CSS selector. If not set, the Evinced Engine will scan the entire document.

null by default.

Example

1const evincedService = new EvincedSDK(driver);
2await evincedService.evStart({
3    initOptions: {
4        rootSelector: '.some-selector'
5    }
6});
7await driver.get('https://demo.evinced.com/');
8const issues = await evincedService.evStop();

AXE Configuration

Evinced leverages Axe open-source accessibility toolkit as part of its own accessibility detection engine. The Evinced engine is able to pinpoint far more issues than Axe alone.

For the full Axe config options, see Axe Core API.

Example

1const evincedService = new EvincedSDK(driver);
2await driver.get('https://demo.evinced.com/');
3const axeConfig = {
4    rules: {
5        "link-name": { enabled: false },
6    },
7};
8const issues = await evincedService.evAnalyze({
9    initOptions: {
10        axeConfig
11    }
12});

Errors Strict Mode

When set to true it switches SDK in mode when Evinced SDK errors are thrown as runtime errors and stops current test execution. Otherwise errors are printed into console except critical ones.

false by default.

Example

Engine Logging

Switches logging on for engine. Log messages from the engine will be printed to console.

Levels are: debug, info, warn, error

null by default.

error is a default level on engine side.

1const evincedService = new EvincedSDK(driver);
2await driver.get('https://demo.evinced.com/');
3const issues = await evincedService.evAnalyze({
4    initOptions: {
5        logging: {
6            LOGGING_LEVEL: 'debug',
7            ADD_LOGGING_CONTEXT: true,
8        },
9    }
10});

Reports Screenshots

The Screenshots feature allows to include screenshots to the Evinced reports. When the feature is enabled, Evinced will take screenshots of the page, highlight an element with a specific accessibility issue, and include them to the report.

false by default.

Note: The Screenshots feature may affect the test run performance.

Enabling the Screenshots feature

1const issues = await evincedService.evAnalyze({
2    initOptions: {
3        enableScreenshots: true,
4    }
5});

Toggles

Toggles are feature flags which controls SDK and Engine behavior. With toggles we introduce experimental features or manage the way how accessibility issues are gathered. The list of toggles is not specified so we suggest not to rely on specific toggle name or value and use them in investigation purposes only.

Example enabling aXe Best Practices and Needs Review Issues

1const issues = await evincedService.evAnalyze({
2    initOptions: {
3        toggles: {
4            USE_AXE_NEEDS_REVIEW: true,
5            USE_AXE_BEST_PRACTICES: true
6        }
7    }
8});

Skip Validations

Skips specific validations for the given URL pattern and the selector.

SkipValidation[] by default.

Example

1const skipSelector = {
2  selector: 'testValue.slds-checkbox',
3  urlRegex: '.*',
4  validationTypes: ["WRONG_SEMANTIC_ROLE", "NOT_FOCUSABLE", "NO_DESCRIPTIVE_TEXT"],
5};
6await evincedService.evStart({ initOptions: { skipValidations: [skipSelector] }});

How to identify ID for the specific issue type is described in web reports section.

Knowledge Base Link overrides

This custom parameter helps to customize knowledge base links in the reports. Those links are displayed in the reports as follows:

The knowledge base link can be overridden for every issue type ID.

Example

Shadow DOM support

Example

1// Via evAnalyze method
2const issues = await evincedService.evAnalyze({
3    initOptions: {
4        toggles: {
5            SUPPORT_SHADOW_DOM: true
6        }
7    }
8});
9
10// Via evStart method
11await evincedService.evStart({
12    initOptions: {
13        toggles: {
14            SUPPORT_SHADOW_DOM: true
15        }
16    }
17});
18
19// As a part of Global Configuration via evConfig.json
20{
21  "toggles": {
22    "SUPPORT_SHADOW_DOM": true
23  }
24}

IFrames support

When set to true, the accessibility tests run analysis on iframes that exist inside the page. Default is false.

Proxy

If your organization is using proxy server for outbound communication, you should set up these proxy server settings to the SDK so it can work properly. Setting the proxy details is done as in the following example:

Example

Global Switch

Global Switch allows to disable or enable Evinced functionality. It could be needed, for example, while working on functional tests in your local environment or for running some CI jobs that are not intended to gather information regarding accessibility issues.

When switched off

• evStart() and evSaveFile() will be bypassed.
• evStop() and evAnalyze() will return an empty report.
• evValid() will never fail.

true by default.

Important! Global Switch environment variable overrides the global configuration option.

Switch on/off Evinced functionality in config

1export EV_SWITCH_ON=false

Uploading reports to Evinced Platform

Introduction

Evinced Platform allows you to seamlessly collect, organize, visualize and monitor Evinced accessibility reports in one place. In this section, we will guide you through the key functionalities of the upload methods of the accessibility reports from the Evinced SDK to the Evinced Platform, which was introduced in version to be determined. This upload method is fully compatible with the previous versions of the Evinced SDK API, and is disabled by default.

Enabling upload to Platform

To enable the uploading functionality of accessibility reports to the Evinced Platform you will need to set the enableUploadToPlatform method to "true":

Automatic Upload of Reports

Once the enableUploadToPlatform method is set to "true", then by default all generated reports will be uploaded to the Platform upon calling the evStop() command. If you want to change this behavior, set the setUploadToPlatformDefault feature flag to "false":

If the setUploadToPlatformDefault is disabled, you can still upload selected reports to the platform. For that, use the following parameter in the evStop() command:

Test names

To facilitate report management and be able to distinguish between different reports on the Platform, use the setTestInfo method to inform the test name and test class. It's recommended to do that in the "beforeEach" hook.

Labels and Custom Fields

You can attach labels and custom fields to your report to enhance readability in the platform. The labels will be added to the uploaded reports. See the following code example of how to set that up:

Use of beforeEach and afterEach Hooks

We recommend using the beforeEach and afterEach hooks to control analysis sessions and upload reports to the platform. This way, each test will be uploaded separately with its own report.

In beforeEach hook use evStart() to start Evinced analysis and set any labels you want for the report to contain when uploading to the platform. In the afterEach hook call evStop() to stop analysis and upload reports to the platform. See this code example:

Putting all of this together

Here is a complete code snippet of how to perform uploads to the platform on a per-test basis.

Tutorials

You can find fully functional example projects on our GitHub

Tutorial 1

Generating a comprehensive accessibility report for your application

In this tutorial, we will enhance our existing Selenium JS UI test with the Evinced JS Selenium SDK in order to check our application for accessibility issues. In order to get started you will need the following:

1. All of the prerequisites for the Evinced JS Selenium SDK should be met
2. Evinced JS Selenium SDK should be added to your project

Preface - existing UI test overview

Let’s consider the following basic UI test as our starting point.

1const { Builder } = require('selenium-webdriver');
2
3describe('Evinced Demo site tests', async () => {
4    let driver;
5    before (async () => {
6        let options;
7        driver = await new Builder()
8            .forBrowser('chrome')
9            .setChromeOptions(options)
10            .build();
11
12        await driver.manage().setTimeouts({ implicit: 1000 });
13    });
14
15    after(async () => {
16        await driver.quit();
17    });
18
19    it('Demo page. Single page analyze', async () => {
20        await driver.get('https://demo.evinced.com/');
21    });
22});

We wrote this test for a demo travel site called TRVL that has a few known accessibility issues.

The purpose of this test is to check the functionality of the main application screen and ensure a user can successfully select their desired trip. For now, this test is only concerned with the functional testing of the app. However, with the help of the Evinced JS Selenium SDK, we can also check it for accessibility issues along the way. Let’s go through this process with the following step-by-step instructions.

Step #1 - Importing the Evinced JS Selenium SDK

In your test file add the following lines to add the Evinced engine to your project.

1const { EvincedSDK } = require('@evinced/js-selenium-sdk');

Step #2 - Start the Evinced engine

Now that we have everything we need to scan for accessibility issues, let’s start the Evinced engine and set credentials. Let's use the offline setting for this example. Since we are going to use it scan throughout our test, the best place for its initialization will be our before method.

1const { Builder } = require('selenium-webdriver');
2const { EvincedSDK } = require('@evinced/js-selenium-sdk');
3
4describe('Evinced Demo site tests', async () => {
5    let driver;
6    let evincedService;
7    before (async () => {
8        setOfflineCredentials({
9            serviceId: process.env.AUTH_SERVICE_ID,
10            token: process.env.AUTH_TOKEN
11        });
12        let options;
13        driver = await new Builder()
14            .forBrowser('chrome')
15            .setChromeOptions(options)
16            .build();
17
18        await driver.manage().setTimeouts({ implicit: 1000 });
19        evincedService = new EvincedSDK(driver);
20        await evincedService.evStart();
21    });
22
23    after(async () => {
24        await driver.quit();
25    });
26
27    it('Demo page. Single page analyze', async () => {
28        await driver.get('https://demo.evinced.com/');
29    });
30});

Step #3 - Stop the Evinced engine and create reports

As our test was executed we collected a lot of accessibility information. We can now perform accessibility assertions at the end of our test suite. Referring back again to our UI test the best place for this assertion will be the method that gets invoked last - after. To stop the Evinced engine and generate the actual object representation of your accessibility report simply call the evStop() method.

1const { Builder } = require('selenium-webdriver');
2const { EvincedSDK } = require('@evinced/js-selenium-sdk');
3
4describe('Evinced Demo site tests', async () => {
5    let driver;
6    let evincedService;
7    before (async () => {
8        setOfflineCredentials({
9            serviceId: process.env.AUTH_SERVICE_ID,
10            token: process.env.AUTH_TOKEN
11        });
12        let options;
13        driver = await new Builder()
14            .forBrowser('chrome')
15            .setChromeOptions(options)
16            .build();
17
18        await driver.manage().setTimeouts({ implicit: 1000 });
19        evincedService = new EvincedSDK(driver);
20        await evincedService.evStart();
21    });
22
23    after(async () => {
24        const issues = await evincedService.evStop();
25        await driver.quit();
26    });
27
28    it('Demo page. Single page analyze', async () => {
29        await driver.get('https://demo.evinced.com/');
30    });
31});

For the sake of simplicity of this tutorial let’s simply assume that our application is accessible as long as it has no accessibility issues found. Thus, if we have at least one accessibility issue detected - we want our tests to be failed. Let’s add the corresponding assertion to our after method. For more information regarding reports as well as the Report object itself, please see our detailed Web Reports page.

1after(async () => {
2    const issues = await evincedService.evStop();
3    assert.equal(issues.length, 0);
4    await driver.quit();
5});

You are now set to run the test and ensure the accessibility of your application! So, go ahead and run it via your IDE or any other tooling you use for JavaScript development.

Fail the test if critical issues are found

Here you can see a way of failing your test if critical accessibility issues are found using the Selenium JS SDK.

Using evAnalyze:

1const issues = await evincedService.evAnalyze();
2
3const criticalIssues = issues.filter((issue) => issue.severity.name === 'Critical');
4await assert(criticalIssues.length === 0, 'found critical issues');

Using evStart/evStop:

1await evincedService.evStart();
2const issues = await evincedService.evStop();
3
4const criticalIssues = issues.filter((issue) => issue.severity.name === 'Critical');
5await assert(criticalIssues.length === 0, 'found critical issues');

The criticalIssues array will contain all the critical issues found during the scan. If the array is not empty, the test will fail on the assertion.

Support

Please feel free to reach out to support@evinced.com with any questions.

FAQ

1. Can I configure which validations to run?

Yes, see the configuration section for details on how to configure Axe validations to your needs.

2. Can I run tests with Evinced using cloud-based services like Sauce Labs, Perfecto, or BrowserStack?

Yes, we have tested the Evinced SDK on many of these types of cloud-based services and expect no issues.