Home

Continuum for JavaScript

Getting Started

Setup

There are two ways of using Continuum for JavaScript based on your testing framework. If you're using server-side JavaScript via something like Node, you'll need to initialize Continuum differently than you would for client-side JavaScript via something like Karma, where the latter necessitates that Continuum be injected directly into the pages to be tested in a web browser. Choose the method that is most appropriate for your testing framework based on the instructions for each below.

Server-side

First, you'll want to import Continuum and invoke its setUp method:

const continuum = require('../js/Continuum.js').Continuum;
continuum.setUp(driver, "../js/AccessEngine.pro.js");

Set the first parameter is the instance of Selenium WebDriver to use for testing. Set the second parameter to the relative path from the current JavaScript file to the Access Engine JavaScript file that's included with Continuum for JavaScript. For more information, refer to our documentation for the setUp method.

The same instance of Continuum is meant to be reused across multiple tests. If for some reason you need to switch out drivers, remember to invoke Continuum's setUp method again, passing in the new driver.

Client-side

First, make sure your testing framework is configured to inject Continuum into the page to be tested. Exactly what this means differs from technology to technology. For example, for Karma, this involves editing a Karma-specific configuration file and adding the Continuum.js JavaScript file to the list of files to be injected into the page. This is an important first step as with client-side JavaScript, Continuum needs to be injected into the page to be tested before it can be used. Once this is done, a new global variable continuum will be exposed to the page. This is the instance of Continuum referenced below.

Next, you'll want to invoke the setUp method of Continuum. For example:

continuum.setUp(null, "../js/AccessEngine.pro.js", window);

Make sure the first parameter is null; this is where you'd pass in a Selenium WebDriver instance, but that's not applicable for client-side JavaScript. Set the second parameter to the relative path from the current JavaScript file to the Access Engine JavaScript file that's included with Continuum for JavaScript. Set the third parameter to the Window object containing the Document object of the page to be tested. For more information, refer to our documentation for the setUp method.

The same instance of Continuum is meant to be reused across multiple tests. If you need to switch window contexts, remember to invoke Continuum's setUp method again, passing in the new Window object. You can also use Continuum's setWindowUnderTest method to explicitly set Continuum's testing context to a particular nested Window object to leverage Continuum if it's already been injected into a parent window context, e.g. when testing iframes.

Usage

At this point, Continuum is initialized and good to go. Invoke the appropriate Continuum method (all of which execute asynchronously using Promises). For example, to run all available accessibility tests against the entirety of the current page:

continuum.runAllTests().then(() => {
    const accessibilityConcerns = continuum.getAccessibilityConcerns();
});

You can then do whatever you like with any accessibility concerns returned, like print them out to the console, filter them for only the ones you're interested in, etc. Check out our documentation for the AccessibilityConcern class for a complete list of what's returned for each accessibility concern.

Other Continuum methods are available that allow you to only run particular tests or test against specific best practices. Continuum also allows you to only test a particular part of a page rather than the entire page. All of these methods are detailed in our documentation for the Continuum class. You have the power!

Support

Questions can be emailed to Level Access support at ampsupport@levelaccess.com, or get support from the community and the Level Access development team by posting questions on Stack Overflow with the following tags: #accessibility, #webaccessibility and #wai-aria.