testaro 64.4.1 → 64.6.0

package/package.json

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

package/procs/identify.js

@@ -209,7 +209,7 @@ exports.identify = async (instance, page) => {
         };
       }
     }
-    // Return the result (not yet getting IDs from Nu Html Checker lines and columns).
+    // Return the result.
     return elementID;
   }
 };

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,14 +45,16 @@ exports.getContent = async (page, withSource) => {
   }
   // Otherwise, i.e. if the specified content type was the Playwright page content:
   else {
-    // Add it to the data.
+    // 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();
   }
   // Return the data.
   return data;
 };
 // Postprocesses a result from nuVal or nuVnu tests.
-exports.curate = (data, nuData, rules) => {
+exports.curate = async (page, data, nuData, rules) => {
   // Delete most of the test target from the data.
   data.testTarget = `${data.testTarget.slice(0, 200)}…`;
   let result;
@@ -76,11 +80,20 @@ exports.curate = (data, nuData, rules) => {
         return false;
       }
     }));
+  }
+  // If there is a result:
+  if (result) {
     // Remove messages reporting duplicate blank IDs.
     const badMessages = new Set(['Duplicate ID .', 'The first occurrence of ID  was here.']);
     result.messages = result.messages.filter(
       message => ! badMessages.has(message.message)
     );
+    // For each message:
+    for (const message of result.messages) {
+      const {extract} = message;
+      // Add location data for the element to the message.
+      message.elementLocation = await getLocationData(page, extract);
+    }
   }
   // Return the result.
   return result;

package/procs/standardize.js

@@ -18,8 +18,8 @@
 // Limits the length of and unilinearizes a string.
 const cap = rawString => {
   const string = (rawString || '').replace(/[\s\u2028\u2029]+/g, ' ');
-  if (string && string.length > 600) {
-    return `${string.slice(0, 300)} … ${string.slice(-300)}`;
+  if (string && string.length > 1000) {
+    return `${string.slice(0, 500)} … ${string.slice(-500)}`;
   }
   else if (string) {
     return string;
@@ -35,12 +35,12 @@ const getIdentifiers = code => {
   // Normalize the code.
   code = code.replace(/\s+/g, ' ').replace(/\\"/g, '"');
   // Get the first start tag of an element, if any.
-  const startTagData = code.match(/^.*?< ?([^>]*)/);
+  const startTagData = code.match(/^.*?<([a-zA-][^>]*)/);
   // If there is any:
   if (startTagData) {
     // Get the tag name.
-    const tagNameData = startTagData[1].match(/^[A-Za-z0-9]+/);
-    const tagName = tagNameData ? tagNameData[0].toUpperCase() : '';
+    const tagNameArray = startTagData[1].match(/^[A-Za-z0-9]+/);
+    const tagName = tagNameArray ? tagNameArray[0].toUpperCase() : '';
     // Get the value of the id attribute, if any.
     const idData = startTagData[1].match(/ id="([^"]+)"/);
     const id = idData ? idData[1] : '';
@@ -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);
         });
@@ -209,12 +211,23 @@ const doHTMLCS = (result, standardResult, severity) => {
     });
   }
 };
-// Converts issue instances from a nuVal or nuVnu result..
+// Converts issue instances from a nuVal or nuVnu result.
 const doNu = (withSource, result, standardResult) => {
   const items = result && result.messages;
+  // If there are any messages:
   if (items && items.length) {
+    // For each one:
     items.forEach(item => {
-      const {extract, firstColumn, lastColumn, lastLine, message, subType, type} = item;
+      const {
+        extract,
+        firstColumn,
+        lastColumn,
+        lastLine,
+        message,
+        subType,
+        type,
+        elementLocation
+      } = item;
       const identifiers = getIdentifiers(extract);
       if (! identifiers[0] && message) {
         const tagNameLCArray = message.match(
@@ -229,6 +242,7 @@ const doNu = (withSource, result, standardResult) => {
       if (locationSegments.every(segment => typeof segment === 'number')) {
         spec = locationSegments.join(':');
       }
+      const {notInDOM} = elementLocation;
       const instance = {
         ruleID: message,
         what: message,
@@ -236,11 +250,13 @@ const doNu = (withSource, result, standardResult) => {
         tagName: identifiers[0],
         id: identifiers[1],
         location: {
-          doc: withSource ? 'source' : 'dom',
+          doc: withSource ? 'source' : (notInDOM ? 'notInDOM' : 'dom'),
           type: 'code',
           spec
         },
-        excerpt: cap(extract)
+        excerpt: cap(extract),
+        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

@@ -377,23 +377,8 @@ const launch = exports.launch = async (
           let indentedMsg = '';
           // If debugging is on:
           if (debug) {
-            // Log a summary of the message on the console.
-            const parts = [msgText.slice(0, 75)];
-            if (msgText.length > 75) {
-              parts.push(msgText.slice(75, 150));
-              if (msgText.length > 150) {
-                const tail = msgText.slice(150).slice(-150);
-                if (msgText.length > 300) {
-                  parts.push('...');
-                }
-                parts.push(tail.slice(0, 75));
-                if (tail.length > 75) {
-                  parts.push(tail.slice(75));
-                }
-              }
-            }
-            indentedMsg = parts.map(part => `    | ${part}`).join('\n');
-            console.log(`\n${indentedMsg}`);
+            // Log the start of the message on the console.
+            console.log(`\n${msgText.slice(0, 300)}`);
           }
           // Add statistics on the message to the report.
           const msgTextLC = msgText.toLowerCase();
@@ -429,8 +414,10 @@ const launch = exports.launch = async (
         });
       });
       const isTestaroTest = act.type === 'test' && act.which === 'testaro';
-      // If the launch is for a testaro test act:
-      if (isTestaroTest) {
+      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,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 => {
@@ -477,6 +464,9 @@ const launch = exports.launch = async (
             return `/${segments.join('/')}`;
           };
         });
+      }
+      // If the launch is for a testaro test act:
+      if (isTestaroTest) {
         // Add a script to the page to compute the accessible name of an element.
         await page.addInitScript({path: require.resolve('./dist/nameComputation.js')});
         // Add a script to the page to:
@@ -1685,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/alfa.js

@@ -17,7 +17,6 @@
 
 let alfaRules = require('@siteimprove/alfa-rules').default;
 const {Audit} = require('@siteimprove/alfa-act');
-const path = require('path');
 const {Playwright} = require('@siteimprove/alfa-playwright');
 
 // FUNCTIONS
@@ -88,7 +87,9 @@ exports.reporter = async (page, report, actIndex) => {
               type: targetJ.type,
               tagName: targetJ.name || '',
               path: target.path(),
-              codeLines: codeLines.map(line => line.length > 300 ? `${line.slice(0, 300)}...` : line)
+              codeLines: codeLines.map(
+                line => line.length > 300 ? `${line.slice(0, 300)}...` : line
+              )
             }
           };
           // If the rule summary is missing:

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
         });
       }
     });

package/tests/nuVal.js

@@ -65,7 +65,7 @@ exports.reporter = async (page, report, actIndex) => {
       data.error = message;
     };
     // Postprocess the response data.
-    result = curate(data, nuData, rules);
+    result = await curate(page, data, nuData, rules);
   }
   // Otherwise, i.e. if the page content was not obtained:
   else {

package/tests/nuVnu.js

@@ -69,7 +69,7 @@ exports.reporter = async (page, report, actIndex) => {
       // Delete the temporary file.
       await fs.unlink(pagePath);
       // Postprocess the result.
-      result = curate(data, nuData, rules);
+      result = await curate(page, data, nuData, rules);
     }
     // Otherwise, i.e. if the content was not obtained:
     else {