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.

Node (server-side)

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

import {Continuum} from '@continuum/continuum-javascript-professional';
Continuum.setUp(driver, require('path').resolve(__dirname, "../js/continuum.conf.js"));

Set the first parameter is the instance of Selenium WebDriver to use for testing. Set the second parameter to the absolute path of a valid continuum.conf.js file. Here's what a basic continuum.conf.js file looks like if you need to create one, taken from one of our Continuum sample projects:

window.LevelAccess_AccessContinuumConfiguration = {
  "accessEngineType": "professional", 
  "accessibilityConcerns": {
    "includePotentialConcerns": false,
    "format": "amp"
  },
  "ampInstanceUrl": "https://amp.levelaccess.net",
  "defaultStandardIds": [
    610, /* WCAG 2.0 Level A */
    611, /* WCAG 2.0 Level AA */
    612, /* WCAG 2.0 Level AAA */
    1387, /* WCAG 2.1 Level A */
    1388, /* WCAG 2.1 Level AA */
    1389, /* WCAG 2.1 Level AAA */
    1140, /* Section 508 and 255 (Revised 2017) */
    1471 /* WCAG 2.0 Level A & AA Baseline */
  ],
  "includePotentialAccessibilityConcerns": false,
  "ampApiToken": null,
  "proxy": {
    "host": null,
    "port": null,
    "username": null,
    "password": null
  }
}

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.

Browser (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 following JavaScript files from Continuum to the list of files to be injected into the page:

// karma.conf.js
module.exports = function (config) {
  config.set({
    files: [
      // load Continuum
      '../node_modules/@continuum/continuum-javascript-professional/AccessEngine.professional.js',
      'js/continuum.conf.js',
      '../node_modules/@continuum/continuum-javascript-professional/Continuum.professional.js',
    ]
  });
}

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, null, window);

Make sure the first and second parameters are null; this is where you'd pass in a Selenium WebDriver instance and an absolute path to a valid continuum.conf.js file, but neither are applicable for client-side JavaScript. Just remember to use something to inject your continuum.conf.js file into your browser prior to loading Continuum, e.g. include it in the list of files defined in your Karma configuration file. Here's what a basic continuum.conf.js file looks like, taken from one of our Continuum sample projects:

window.LevelAccess_AccessContinuumConfiguration = {
  "accessEngineType": "professional",
  "ampInstanceUrl": "https://amp.levelaccess.net",
  "defaultStandardIds": [
    610, /* WCAG 2.0 Level A */
    611, /* WCAG 2.0 Level AA */
    612, /* WCAG 2.0 Level AAA */
    1387, /* WCAG 2.1 Level A */
    1388, /* WCAG 2.1 Level AA */
    1389, /* WCAG 2.1 Level AAA */
    1140, /* Section 508 and 255 (Revised 2017) */
    1471 /* WCAG 2.0 Level A & AA Baseline */
  ],
  "includePotentialAccessibilityConcerns": false,
  "ampApiToken": null
}

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((accessibilityConcerns) => {
    // you can use either accessibilityConcerns or invoke continuum.getAccessibilityConcerns() here;
    // both will return the same data: any accessibility concerns that were found on the page during this last test run
});

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 support@levelaccess.com.