Continuum for JavaScript

On this page:

• Setup
  • Server-side
  • Client-side/browser
• Usage
• Results
• Support

Setup

Continuum for JavaScript setup varies based on your testing framework:

• Server-side: Tests are rendered directly on your web server, like Node.js or Ruby on Rails.
• Client-side/browser: Tests are injected directly into your pages to be tested in the web browser using testing tools like Karma or Cucumber.

Set up Continuum for JavaScript using the method that works best for your testing framework. This document uses Node.js and Karma as example testing frameworks.

Server-side (Node.js)

You can use the same instance of Continuum across multiple tests. If you need to switch out drivers, you'll have to run Continuum's setUp method again to pass in the driver. 

To set up Continuum for JavaScript on the server side:

1. Import continuum and run the setUp method. Learn more about the setUp method.
2. Set the first parameter in the instance of Selenium WebDriver to use for testing.
3. Set the second parameter to the absolute path of valid continuum.conf.js file.

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

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
  },
  "elevin": {
    "baseUrl": null,
    "apiKey": null
  },
}

Client-side/browser (Karma)

Client-side set up varies based on your testing tool. The procedure below details the general setup framework and uses Karma for example script. You'll need modify the setup as needed.

You can use the same instance of Continuum across multiple tests. If you need to switch window contexts, remember to run Continuum's setUp method again to pass in the new Window object.

You can also use Continuum's setWindowUnderTest method to set Continuum's testing context to a particular nested Window object when it's already been injected into a parent window context.

Step 1: Configure your testing framework.

Configure your testing framework to inject continuum into the page you want to test. For example, add the JavaScript files from Continuum to the list of files being injected into the page in the Karma configuration file. 

// 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',
    ]
  });
}

After updating the configuration file, a new global variable continuum will be exposed to the page. This is the instance of Continuum referenced below.

Step 2: Call the setUp method.

Next, call the setUp method for Continuum. For example:

continuum.setUp(null, null, window);

Step 3: Validate the parameters.

Make sure the first and second parameters are null. These parameters aren't applicable to client-side JavaScript.

Set the third parameter to the Window object that contains the Document object of the page you want to test. For more information, learn more about the setUp method.

Here's an example of a basic continuum.conf.js:

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
}

Usage

You can now run the appropriate Continuum method (all of which execute asynchronously using Promises). You can run particular tests or test against specific best practices. Learn more about the Continuum class.

The functions runAllTests(), runTests(), and runAllTestsOnNode() have an optional argument includeiframe.

This argument is a boolean which toggles testing of iframes on or off. iframe testing is recursive, meaning that iframes within iframes are also tested.

Note that if you don't provide a value, the argument defaults to false. Meaning, iframe testing will be disabled.

The iframe methods are: 

runAllTests(includeiframe = false) 

runTests(engineTestIds, includeiframe = false)

runAllTestsOnNode(targetNodeOrCssSelectorForTargetNode, includeiframe = false)

For example, to run all available accessibility tests against the entirety of the current page:

continuum.runAllTests(true).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
});

Results

Once you have your results you can print them out to the console, filter them, and more.

Learn more about the information the tests return. 

Support

If you have any questions about setup or usage, request support.