arc-webdriver v0.0.7

arc-webdriver

Provides an ARC api for Selenium's WebDriverJS using Chrome web browser

Getting Started

1. Install NodeJS (if not already installed)
2. Install Chromedriver that matches the version of Chrome installed on your computer or have Chromedriver in the computer's PATH variable

3. Create an .npmrc file in the root of project and add:

   registry=https://pkgs.dev.azure.com/tpgarc/_packaging/arc-edge/npm/registry/
   always-auth=true

4. Install the Selenium and ARC webdrivers to your project;

   npm install selenium-webdriver arc-webdriver`

Usage

This module includes a chainable API used to analyze webpages using ARC Rules with Selenium WebDriverJS.

const WebDriver 	= require('selenium-webdriver');
const ARCScanner	= require('arc-webdriver');

// Build the Web Driver object
const Driver = new WebDriver.Builder()
  .forBrowser('chrome')
  .build();

// Create ARCScanner object
const ARC = new ARCScanner(Driver);

// Open the page
const url = "https://www.example.com";
Driver.get(url);

//Analyze whole page
const results = ARC.Analyze().then(function(res) {
  // Do something with the results
  console.dir(res);
}).finally(() => {
  // Close the browser
  Driver.close();
});

ARCScanner(driver:WebDriver, ARCAccountId:string, ARCApiKey:string)

Constructor for the ARCScanner. You must pass an instance an a Seleunium Webdriver as the first argument.

const ARC = new ARCScanner(driver);

ARCScanner#Analyze(xpath:string)

Performs analysis and passes and errors and/or the results object to the promise function. Analyze takes an optional xpath argument specifying an element to limit analysis to. If no xpath is specified, analysis starts at root element.

ARC(driver)
    .Analyze('/html/body/div[2]')
      .then((results) =>{
        console.log(results);
      .catch(err => {
        // Handle error somehow
      });

Anaysis Report

The results of an Analysis are returned in a JSON object.

{
  "arcAccountCode": "Not Specified",
  "arcAPIKey": "Not Specified",
  "results": {
    "date": "11/7/2019, 2:06:31 PM",
    "elapsedTime": 6.84,
    "target": "https://www.example.com",
    "targetLocation": "/html",
    "assetId": 0,
    "engineKey": "ARC",
    "errors": 1,
    "alerts": 2,
    "contrast": 3,
    "features": 0,
    "structure": 0,
    "html5": 0,
    "other": 0,
    "assertions": [
      {
        "assertion": "SVGFocusable",
        "title": "`<svg>` element focusable",
        "description": "By default, Internet Explorer makes `<svg>` elements focusable, even when they are not interactive. This results in an empty/meaningless tab stop for keyboard users. When the `<svg>` is used in an active element, the element will have two tabs stops.",
        "categoryId": 2,
        "category": "Alerts",
        "source": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 219 48\" role=\"img\"></svg>",
        "xpath": "/HTML[1]/BODY[1]/DIV[1]/HEADER[1]/A[1]//*[local-name()=\"svg\"][1]"
      },
      {
        "assertion": "activeSvgMissingAriaLabel",
        "title": "active `<svg>` without `aria-label`",
        "description": "The `<svg>` is active/actionable (for instance, part of a button or control), but it is missing an `aria-label=\"...\"`. If it acts as the only label/visible icon for a control, ensure there is alternative text present.",
        "categoryId": 1,
        "category": "Errors",
        "source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\" role=\"img\" focusable=\"false\">\n    \n    \n</svg>",
        "xpath": "/HTML[1]/BODY[1]/FOOTER[1]/DIV[1]/DIV[1]/UL[1]/LI[5]/A[1]//*[local-name()=\"svg\"][1]"
      },
      {
        "assertion": "duplicateIdFound",
        "title": "duplicate `id` attributes",
        "description": "The `id` attribute values used on the page must be unique. Having duplicate `id` values can lead to problems when other elements reference that `id` value (e.g. to establish an `aria-labelledby=\"...\"` reference on a form control).",
        "categoryId": 2,
        "category": "Alerts",
        "source": "<main id=\"content\">\n      \n\n<!-- top search area -->\n\n\n\n      \n  </main>",
        "xpath": "/HTML[1]/BODY[1]/MAIN[1]"
      },
    ]
  }
}