testaro 64.4.0 → 64.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "64.4.0",
+  "version": "64.5.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

@@ -43,14 +43,21 @@ 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 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++}#`);
+      }
+    });
+    // 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 +83,55 @@ 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;
+      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: ''
+        };
+      }
+    }
   }
   // 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] : '';
@@ -209,12 +209,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 +240,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 +248,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?.box || {},
+        pathID: elementLocation?.xPath || ''
       };
       if (type === 'info' && subType === 'warning') {
         instance.ordinalSeverity = 0;

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,9 @@ 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 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) {
         // 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 +463,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:

package/testaro/motion.js

@@ -35,76 +35,84 @@ exports.reporter = async page => {
   const data = {};
   const totals = [0, 0, 0, 0];
   const standardInstances = [];
-  // Get the screenshot PNG buffers made by the shoot0 and shoot1 tests.
-  let shoot0PNGBuffer = await fs.readFile(`${tmpDir}/testaro-shoot-0.png`);
-  let shoot1PNGBuffer = await fs.readFile(`${tmpDir}/testaro-shoot-1.png`);
-  // Delete the buffer files.
-  await fs.unlink(`${tmpDir}/testaro-shoot-0.png`);
-  await fs.unlink(`${tmpDir}/testaro-shoot-1.png`);
-  // If both buffers exist:
-  if (shoot0PNGBuffer && shoot1PNGBuffer) {
-    // Parse them into PNG objects.
-    let shoot0PNG = PNG.sync.read(shoot0PNGBuffer);
-    let shoot1PNG = PNG.sync.read(shoot1PNGBuffer);
-    // If their dimensions differ:
-    if (shoot1PNG.width !== shoot0PNG.width || shoot1PNG.height !== shoot0PNG.height) {
-      // Report this.
-      data.prevented = true;
-      data.error = 'Screenshot dimensions differ';
-      data.dimensions = {
-        shoot0: {
-          width: shoot0PNG.width,
-          height: shoot0PNG.height
-        },
-        shoot1: {
-          width: shoot1PNG.width,
-          height: shoot1PNG.height
+  try {
+    // Get the screenshot PNG buffers made by the shoot0 and shoot1 tests.
+    let shoot0PNGBuffer = await fs.readFile(`${tmpDir}/testaro-shoot-0.png`);
+    let shoot1PNGBuffer = await fs.readFile(`${tmpDir}/testaro-shoot-1.png`);
+    // Delete the buffer files.
+    await fs.unlink(`${tmpDir}/testaro-shoot-0.png`);
+    await fs.unlink(`${tmpDir}/testaro-shoot-1.png`);
+    // If both buffers exist:
+    if (shoot0PNGBuffer && shoot1PNGBuffer) {
+      // Parse them into PNG objects.
+      let shoot0PNG = PNG.sync.read(shoot0PNGBuffer);
+      let shoot1PNG = PNG.sync.read(shoot1PNGBuffer);
+      // If their dimensions differ:
+      if (shoot1PNG.width !== shoot0PNG.width || shoot1PNG.height !== shoot0PNG.height) {
+        // Report this.
+        data.prevented = true;
+        data.error = 'Screenshot dimensions differ';
+        data.dimensions = {
+          shoot0: {
+            width: shoot0PNG.width,
+            height: shoot0PNG.height
+          },
+          shoot1: {
+            width: shoot1PNG.width,
+            height: shoot1PNG.height
+          }
+        }
+      }
+      // Otherwise, i.e. if their dimensions are identical:
+      else {
+        const {width, height} = shoot0PNG;
+        // Get the count of differing pixels between the shots.
+        const pixelChanges = pixelmatch(shoot0PNG.data, shoot1PNG.data, null, width, height);
+        // Get the ratio of differing to all pixels as a percentage.
+        const changePercent = Math.round(100 * pixelChanges / (width * height));
+        // Free the memory used by screenshots.
+        shoot0PNG = shoot1PNG = shoot0PNGBuffer = shoot1PNGBuffer = null;
+        // If any pixels were changed:
+        if (pixelChanges) {
+          // Get the ordinal severity from the fractional pixel change.
+          const ordinalSeverity = Math.floor(Math.min(3, 0.4 * Math.sqrt(changePercent)));
+          // Add to the totals.
+          totals[ordinalSeverity] = 1;
+          // Get a summary standard instance.
+          standardInstances.push({
+            ruleID: 'motion',
+            what: `Content moves or changes spontaneously (${changePercent}% of pixels changed)`,
+            count: 1,
+            ordinalSeverity,
+            tagName: 'HTML',
+            id: '',
+            location: {
+              doc: 'dom',
+              type: 'box',
+              spec: {
+                x: 0,
+                y: 0,
+                width,
+                height
+              }
+            },
+            excerpt: '<html>…</html>'
+          });
         }
       }
     }
-    // Otherwise, i.e. if their dimensions are identical:
+    // Otherwise, i.e. if they do not both exist:
     else {
-      const {width, height} = shoot0PNG;
-      // Get the count of differing pixels between the shots.
-      const pixelChanges = pixelmatch(shoot0PNG.data, shoot1PNG.data, null, width, height);
-      // Get the ratio of differing to all pixels as a percentage.
-      const changePercent = Math.round(100 * pixelChanges / (width * height));
-      // Free the memory used by screenshots.
-      shoot0PNG = shoot1PNG = shoot0PNGBuffer = shoot1PNGBuffer = null;
-      // If any pixels were changed:
-      if (pixelChanges) {
-        // Get the ordinal severity from the fractional pixel change.
-        const ordinalSeverity = Math.floor(Math.min(3, 0.4 * Math.sqrt(changePercent)));
-        // Add to the totals.
-        totals[ordinalSeverity] = 1;
-        // Get a summary standard instance.
-        standardInstances.push({
-          ruleID: 'motion',
-          what: `Content moves or changes spontaneously (${changePercent}% of pixels changed)`,
-          count: 1,
-          ordinalSeverity,
-          tagName: 'HTML',
-          id: '',
-          location: {
-            doc: 'dom',
-            type: 'box',
-            spec: {
-              x: 0,
-              y: 0,
-              width,
-              height
-            }
-          },
-          excerpt: '<html>…</html>'
-        });
-      }
+      // Report this.
+      data.prevented = true;
+      data.error = 'At least 1 screenshot missing';
     }
   }
-  // Otherwise, i.e. if they do not both exist:
-  else {
+  // If getting or deleting either buffer file failed:
+  catch(error) {
     // Report this.
     data.prevented = true;
-    data.error = 'At least 1 screenshot missing';
+    data.error = `Screenshot file error (${error.message})`;
   }
   // Return the result.
   return {

package/testaro/shoot0.js

@@ -17,7 +17,7 @@ const {shoot} = require('../procs/shoot');
 exports.reporter = async page => {
   // Make and save the first screenshot.
   const pngPath = await shoot(page, 0);
-  // Return the file path or a failure result.
+  // Return whether the screenshot was prevented.
   return {
     data: {
       prevented: ! pngPath

package/testaro/shoot1.js

@@ -5,22 +5,33 @@
 
 /*
   shoot1
-  This test makes and saves the second of two screenshots.
+  This test makes and saves the second of two screenshots. It aborts if the first screenshot was prevented.
 */
 
 // IMPORTS
 
+const fs = require('fs/promises');
+const os = require('os');
+const path = require('path');
 const {shoot} = require('../procs/shoot');
 
+// CONSTANTS
+
+const tmpDir = os.tmpdir();
+
 // FUNCTIONS
 
 exports.reporter = async page => {
-  // Make and save the second screenshot.
-  const pngPath = await shoot(page, 1);
-  // Return the file path or a failure result.
-  return {
-    data: {
-      prevented: ! pngPath
-    }
-  };
+  const tempFileNames = await fs.readdir(tmpDir);
+  // If there is a shoot0 file:
+  if (tempFileNames.includes('testaro-shoot-0.png')) {
+    // Make and save the second screenshot.
+    const pngPath = await shoot(page, 1);
+    // Return whether the screenshot was prevented.
+    return {
+      data: {
+        prevented: ! pngPath
+      }
+    };
+  }
 };

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/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 {