testaro 64.5.0 → 64.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "64.5.0",
+  "version": "64.6.0",
   "description": "Run 1000 web accessibility tests from 11 tools and get a standardized report",
   "main": "index.js",
   "scripts": {

package/procs/nu.js

@@ -14,6 +14,8 @@
 
 // ########## IMPORTS
 
+// Module to add Testaro IDs to elements.
+const {addTestaroIDs, getLocationData} = require('./testaro');
 // Module to get the document source.
 const {getSource} = require('./getSource');
 
@@ -43,13 +45,8 @@ exports.getContent = async (page, withSource) => {
   }
   // Otherwise, i.e. if the specified content type was the Playwright page content:
   else {
-    // Annotate all elements in the page with unique identifiers.
-    await page.evaluate(() => {
-      let serialID = 0;
-      for (const element of Array.from(document.querySelectorAll('*'))) {
-        element.setAttribute('data-testaro-id', `${serialID++}#`);
-      }
-    });
+    // Annotate all elements on the page with unique identifiers.
+    await addTestaroIDs(page);
     // Add the annotated page content to the data.
     data.testTarget = await page.content();
   }
@@ -94,43 +91,8 @@ exports.curate = async (page, data, nuData, rules) => {
     // For each message:
     for (const message of result.messages) {
       const {extract} = message;
-      const testaroIDArray = extract.match(/data-testaro-id="(\d+)#"/);
-      // If its extract contains a Testaro identifier:
-      if (testaroIDArray) {
-        const testaroID = message.testaroID = testaroIDArray[1];
-        // Add location data for the element to the message.
-        message.elementLocation = await page.evaluate(testaroID => {
-          const element = document.querySelector(`[data-testaro-id="${testaroID}#"]`);
-          // If any element has that identifier:
-          if (element) {
-            // Get a box specification and an XPath for the element.
-            const box = {};
-            const boundingBox = element.getBoundingClientRect() || {};
-            if (boundingBox.x) {
-              ['x', 'y', 'width', 'height'].forEach(coordinate => {
-                box[coordinate] = Math.round(boundingBox[coordinate]);
-              });
-            }
-            const xPath = window.getXPath(element) || '';
-            // Treat them as the element location.
-            return {
-              box,
-              xPath
-            };
-          }
-          // Otherwise, i.e. if no element has it, make the location data empty.
-          return {};
-        }, testaroID);
-      }
-      // Otherwise, i.e. if its extract contains no Testaro identifier:
-      else {
-        // Add a non-DOM location to the message.
-        message.elementLocation = {
-          notInDOM: true,
-          box: {},
-          xPath: ''
-        };
-      }
+      // Add location data for the element to the message.
+      message.elementLocation = await getLocationData(page, extract);
     }
   }
   // Return the result.

package/procs/standardize.js

@@ -189,7 +189,7 @@ const doHTMLCS = (result, standardResult, severity) => {
       const ruleData = result[severity][ruleID];
       Object.keys(ruleData).forEach(what => {
         ruleData[what].forEach(item => {
-          const {tagName, id, code} = item;
+          const {tagName, id, excerpt, notInDOM, boxID, pathID} = item;
           const instance = {
             ruleID,
             what,
@@ -197,11 +197,13 @@ const doHTMLCS = (result, standardResult, severity) => {
             tagName: tagName.toUpperCase(),
             id: isBadID(id.slice(1)) ? '' : id.slice(1),
             location: {
-              doc: 'dom',
+              doc: notInDOM ? 'notInDOM' : 'dom',
               type: '',
               spec: ''
             },
-            excerpt: cap(code)
+            excerpt: cap(excerpt),
+            boxID,
+            pathID
           };
           standardResult.instances.push(instance);
         });
@@ -253,8 +255,8 @@ const doNu = (withSource, result, standardResult) => {
           spec
         },
         excerpt: cap(extract),
-        boxID: elementLocation?.box || {},
-        pathID: elementLocation?.xPath || ''
+        boxID: elementLocation?.boxID || '',
+        pathID: elementLocation?.pathID || ''
       };
       if (type === 'info' && subType === 'warning') {
         instance.ordinalSeverity = 0;

package/procs/testaro.js

@@ -225,3 +225,56 @@ exports.getVisibleCountChange = async (
     elapsedTime
   };
 };
+// Annotates every element on a page with a unique identifier.
+exports.addTestaroIDs = async page => {
+  await page.evaluate(() => {
+    let serialID = 0;
+    for (const element of Array.from(document.querySelectorAll('*'))) {
+      element.setAttribute('data-testaro-id', `${serialID++}#`);
+    }
+  });
+};
+// Returns location data from the extract of a standard instance.
+exports.getLocationData = async (page, extract) => {
+  const testaroIDArray = extract.match(/data-testaro-id="(\d+)#"/);
+  // If the extract contains a Testaro identifier:
+  if (testaroIDArray) {
+    const testaroID = testaroIDArray[1];
+    // Return location data for the element.
+    return await page.evaluate(testaroID => {
+      const element = document.querySelector(`[data-testaro-id="${testaroID}#"]`);
+      // If any element has that identifier:
+      if (element) {
+        // Get box and path IDs for the element.
+        const box = {};
+        let boxID = '';
+        const boundingBox = element.getBoundingClientRect() || {};
+        if (boundingBox.x) {
+          ['x', 'y', 'width', 'height'].forEach(coordinate => {
+            box[coordinate] = Math.round(boundingBox[coordinate]);
+          });
+        }
+        if (typeof box.x === 'number') {
+          boxID = Object.values(box).join(':');
+        }
+        const pathID = window.getXPath(element) || '';
+        // Return them.
+        return {
+          boxID,
+          pathID
+        };
+      }
+      // Otherwise, i.e. if no element has it, return empty location data.
+      return {};
+    }, testaroID);
+  }
+  // Otherwise, i.e. if the extract contains no Testaro identifier:
+  else {
+    // Return a non-DOM location.
+    return {
+      notInDOM: true,
+      boxID: '',
+      pathID: ''
+    };
+  }
+};

package/run.js

@@ -414,9 +414,10 @@ const launch = exports.launch = async (
         });
       });
       const isTestaroTest = act.type === 'test' && act.which === 'testaro';
+      const isHTMLCSTest = act.type === 'test' && act.which === 'htmlcs';
       const isNuTest = act.type === 'test' && (['nuVal', 'nuVnu'].some(id => act.which === id));
-      // If the launch is for a testaro or Nu test act:
-      if (isTestaroTest || isNuTest) {
+      // If the launch is for a testaro,3 htmlcs, or Nu test act:
+      if (isTestaroTest || isHTMLCSTest || isNuTest) {
         // Add a script to the page to add a window method to get the XPath of an element.
         await page.addInitScript(() => {
           window.getXPath = element => {
@@ -1674,6 +1675,40 @@ const doActs = async (report, opts = {}) => {
     // Close the last browser launched for standardization.
     await browserClose();
     console.log('Standardization completed');
+    // XXX
+    const {acts} = report;
+    const idData = {};
+    for (const act of acts) {
+      if (act.type === 'test') {
+        const {which} = act;
+        idData[which] ??= {
+          instanceCount: 0,
+          boxIDCount: 0,
+          pathIDCount: 0,
+          boxIDPercent: null,
+          pathIDPercent: null
+        };
+        const actIDData = idData[which];
+        const {standardResult} = act;
+        const {instances} = standardResult;
+        for (const instance of instances) {
+          const {boxID, pathID} = instance;
+          actIDData.instanceCount++;
+          if (boxID) {
+            actIDData.boxIDCount++;
+          }
+          if (pathID) {
+            actIDData.pathIDCount++;
+          }
+        }
+        const {instanceCount, boxIDCount, pathIDCount} = actIDData;
+        if (instanceCount) {
+          actIDData.boxIDPercent = Math.round(100 * boxIDCount / instanceCount);
+          actIDData.pathIDPercent = Math.round(100 * pathIDCount / instanceCount);
+        }
+      }
+    }
+    report.jobData.idData = idData;
   }
   // Delete the temporary report file.
   await fs.rm(reportPath, {force: true});

package/tests/htmlcs.js

@@ -14,6 +14,8 @@
 
 // IMPORTS
 
+// Module to add Testaro IDs to elements.
+const {addTestaroIDs, getLocationData} = require('../procs/testaro');
 // Module to handle files.
 const fs = require('fs/promises');
 
@@ -28,10 +30,12 @@ exports.reporter = async (page, report, actIndex) => {
   // Get the HTMLCS script.
   const scriptText = await fs.readFile(`${__dirname}/../htmlcs/HTMLCS.js`, 'utf8');
   const scriptNonce = report.jobData && report.jobData.lastScriptNonce;
-  // Define the rules to be employed as those of WCAG 2 level AAA.
+  // Annotate all elements on the page with unique identifiers.
+  await addTestaroIDs(page);
   let messageStrings = [];
+  // Define the rules to be employed as those of WCAG 2 level AAA.
   for (const actStandard of ['WCAG2AAA']) {
-    const nextIssues = await page.evaluate(args => {
+    const nextViolations = await page.evaluate(args => {
       // Add the HTMLCS script to the page.
       const scriptText = args[2];
       const scriptNonce = args[3];
@@ -49,18 +53,18 @@ exports.reporter = async (page, report, actIndex) => {
         }
         window.HTMLCS_WCAG2AAA.sniffs = rules;
       }
+      let violations = null;
       // Run the tests.
-      let issues = null;
       try {
-        issues = window.HTMLCS_RUNNER.run(actStandard);
+        violations = window.HTMLCS_RUNNER.run(actStandard);
       }
       catch(error) {
         console.log(`ERROR executing HTMLCS_RUNNER on ${document.URL} (${error.message})`);
       }
-      return issues;
+      return violations;
     }, [actStandard, rules, scriptText, scriptNonce]);
-    if (nextIssues && nextIssues.every(issue => typeof issue === 'string')) {
-      messageStrings.push(... nextIssues);
+    if (nextViolations && nextViolations.every(violation => typeof violation === 'string')) {
+      messageStrings.push(... nextViolations);
     }
     else {
       data.prevented = true;
@@ -69,39 +73,41 @@ exports.reporter = async (page, report, actIndex) => {
     }
   }
   if (! data.prevented) {
-    // Sort the issues by class and standard.
+    // Sort the violations by class and standard.
     messageStrings.sort();
-    // Remove any duplicate issues.
+    // Remove any duplicate violations.
     messageStrings = [... new Set(messageStrings)];
     // Initialize the result.
     result.Error = {};
     result.Warning = {};
-    // For each issue:
-    messageStrings.forEach(string => {
+    // For each violation:
+    messageStrings.forEach(async string => {
+      // Split its message into severity class, rule ID, tagname, ID, rule description, and excerpt.
       const parts = string.split(/\|/, 6);
       const partCount = parts.length;
       if (partCount < 6) {
-        console.log(`ERROR: Issue string ${string} has too few parts`);
+        console.log(`ERROR: Violation string ${string} has too few parts`);
       }
       // If it is an error or a warning (not a notice):
       else if (['Error', 'Warning'].includes(parts[0])) {
         /*
-          Add the issue to an issueClass.issueCode.description array in the result.
-          This saves space, because, although some descriptions are issue-specific, such as
+          Add the violation to an violationClass.violationCode.description array in the result.
+          This saves space, because, although some descriptions are violation-specific, such as
           descriptions that state the contrast ratio of an element, most descriptions are
           generic, so typically many violations share a description.
         */
-        const issueCode = parts[1].replace(/^WCAG2|\.Principle\d\.Guideline[\d_]+/g, '');
-        if (! result[parts[0]][issueCode]) {
-          result[parts[0]][issueCode] = {};
-        }
-        if (! result[parts[0]][issueCode][parts[4]]) {
-          result[parts[0]][issueCode][parts[4]] = [];
-        }
-        result[parts[0]][issueCode][parts[4]].push({
+        const ruleID = parts[1].replace(/^WCAG2|\.Principle\d\.Guideline[\d_]+/g, '');
+        result[parts[0]][ruleID] ??= {};
+        result[parts[0]][ruleID][parts[4]] ??= [];
+        const elementLocation = await getLocationData(page, parts[5]);
+        const {boxID, notInDOM, pathID} = elementLocation;
+        result[parts[0]][ruleID][parts[4]].push({
           tagName: parts[2],
           id: parts[3],
-          code: parts[5]
+          notInDOM,
+          excerpt: parts[5],
+          boxID,
+          pathID
         });
       }
     });