testaro 4.13.0 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/tests/hover.js

@@ -1,48 +1,43 @@
 /*
   hover
-  This test reports unexpected effects of hovering. The effects include elements that are made
-  visible, elements whose opacities are changed, elements with ancestors whose opacities are
-  changed, and elements that cannot be hovered over. Only Playwright-visible elements in the
-  DOM that have 'A', 'BUTTON', and 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes
-  are considered as hovering targets. The elements considered when the effects of hovering are
-  examined are the descendants of the grandparent of the element hovered over if that element
-  has the tag name 'A' or 'BUTTON' or otherwise the descendants of the element. The only
-  elements counted as being made visible by hovering are those with tag names 'A', 'BUTTON',
-  'INPUT', and 'SPAN', and those with 'role="menuitem"' attributes. The test waits 700 ms after
-  each hover in case of delayed effects. Despite this delay, the test can make the execution
-  time practical by randomly sampling targets instead of hovering over all of them. When
-  sampling is performed, the results may vary from one execution to another. An element is
-  reported as unhoverable when it fails the Playwright actionability checks for hovering, i.e.
-  when it fails to be attached to the DOM, visible, stable (not or no longer animating), and
-  able to receive events. All target candidates satisfy the first two conditions, so only the
-  last two might fail. Playwright defines the ability to receive events as being the target of
-  an action on the location where the center of the element is, rather than some other element
-  with a higher zIndex value in the same location being the target.
+  This test reports unexpected impacts of hovering. The effects include additions and removals
+  of visible elements, opacity changes, and unhoverable elements. The elements that are
+  subjected to hovering (called “triggers”) are the Playwright-visible elements that have 'A',
+  'BUTTON', or 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes. When such an
+  element is hovered over, the test examines the impacts on descendants of the great grandparents
+  of the elements with tag names 'A' and 'BUTTON', grandparents of elements with tag name 'LI',
+  and otherwise the descendants of the elements themselves. Four impacts are counted: (1) an
+  element is added or becomes visible, (2) an element is removed or becomes invisible, (3) the
+  opacity of an element changes, and (4) the element is a descendant of an element whose opacity
+  changes. The test checks up to 4 times for hovering impacts at intervals of 0.3 second.
+
+  Despite this delay, the test can make the execution time practical by randomly sampling targets
+  instead of hovering over all of them. When sampling is performed, the results may vary from one
+  execution to another.
+
+  An element is reported as unhoverable when it fails the Playwright actionability checks for
+  hovering, i.e. fails to be attached to the DOM, visible, stable (not or no longer animating), and
+  able to receive events. All triggers satisfy the first two conditions, so only the last two might
+  fail. Playwright defines the ability to receive events as being the target of an action on the
+  location where the center of the element is, rather than some other element with a higher zIndex
+  value in the same location being the target.
 */
 
 // CONSTANTS
 
-// Selectors of active elements likely to be disclosed by a hover.
-const targetSelectors = ['a', 'button', 'input', '[role=menuitem]', 'span']
-.map(selector => `${selector}:visible`)
-.join(', ');
 // Initialize the result.
 const data = {
   populationSize: 0,
   totals: {
-    triggers: 0,
-    madeVisible: 0,
-    opacityChanged: 0,
-    opacityAffected: 0,
+    impactTriggers: 0,
+    additions: 0,
+    removals: 0,
+    opacityChanges: 0,
+    opacityEffects: 0,
     unhoverables: 0
   }
 };
 
-// VARIABLES
-
-// Counter.
-let elementsChecked = 0;
-
 // FUNCTIONS
 
 // Samples a population and returns the sample.
@@ -66,9 +61,9 @@ const textOf = async (element, limit) => {
   text = text.trim() || await element.innerHTML();
   return text.trim().replace(/\s*/sg, '').slice(0, limit);
 };
-// Recursively finds and reports triggers and targets.
+// Recursively reports impacts of hovering over triggers.
 const find = async (withItems, page, triggers) => {
-  // If any potential disclosure triggers remain:
+  // If any potential triggers remain:
   if (triggers.length) {
     // Identify the first of them.
     const firstTrigger = triggers[0];
@@ -79,59 +74,86 @@ const find = async (withItems, page, triggers) => {
     });
     if (tagNameJSHandle) {
       const tagName = await tagNameJSHandle.jsonValue();
-      // Identify the root of a subtree likely to contain disclosed elements.
+      // Identify the root of a subtree likely to contain impacted elements.
       let root = firstTrigger;
-      if (['A', 'BUTTON'].includes(tagName)) {
+      if (['A', 'BUTTON', 'LI'].includes(tagName)) {
         const rootJSHandle = await page.evaluateHandle(
           firstTrigger => {
             const parent = firstTrigger.parentElement || firstTrigger;
             const grandparent = parent.parentElement || parent;
-            return grandparent;
+            const greatGrandparent = grandparent.parentElement || parent;
+            return firstTrigger.tagName === 'LI' ? grandparent : greatGrandparent;
           },
           firstTrigger
         );
         root = rootJSHandle.asElement();
       }
-      // Identify the visible active descendants of the root before the hover.
-      const preVisibles = await root.$$(targetSelectors);
       // Identify all the descendants of the root.
-      const descendants = await root.$$('*');
-      // Identify their opacities before the hover.
-      const preOpacities = await page.evaluate(
-        elements => elements.map(el => window.getComputedStyle(el).opacity), descendants
-      );
+      const preDescendants = await root.$$('*');
+      // Identify their opacities.
+      const preOpacities = await page.evaluate(elements => elements.map(
+        element => window.getComputedStyle(element).opacity
+      ), preDescendants);
       try {
-        // Hover over the potential trigger.
-        await firstTrigger.hover({timeout: 700});
-        // Identify whether it is coded as controlling other elements.
-        const isController = await page.evaluate(
-          element => element.ariaHasPopup || element.hasAttribute('aria-controls'), firstTrigger
-        );
-        // Wait for any delayed and/or slowed hover reaction, longer if coded as a controller.
-        await page.waitForTimeout(isController ? 1200 : 600);
-        await root.waitForElementState('stable');
-        // Identify the visible active descendants of the root during the hover.
-        const postVisibles = await root.$$(targetSelectors);
-        // Identify the opacities of the descendants of the root during the hover.
-        const postOpacities = await page.evaluate(
-          elements => elements.map(el => window.getComputedStyle(el).opacity), descendants
-        );
-        // Identify the elements with opacity changes.
-        const opacityTargets = descendants
-        .filter((descendant, index) => postOpacities[index] !== preOpacities[index]);
-        // Count them and their descendants.
-        const opacityAffected = opacityTargets.length
-          ? await page.evaluate(elements => elements.reduce(
-            (total, current) => total + 1 + current.querySelectorAll('*').length, 0
-          ), opacityTargets)
-          : 0;
-        // If hovering disclosed any element or changed any opacity:
-        if (postVisibles.length > preVisibles.length || opacityAffected) {
-          // Preserve the lengthened reaction wait, if any, for the next 5 tries.
-          if (elementsChecked < 11) {
-            elementsChecked = 5;
+        // Hover over the trigger.
+        await firstTrigger.hover({
+          timeout: 500,
+          noWaitAfter: true
+        });
+        // Repeatedly seeks impacts.
+        const getImpacts = async (interval, triesLeft) => {
+          if (triesLeft--) {
+            const postDescendants = await root.$$('*');
+            const remainerIndexes = await page.evaluate(args => {
+              const preDescendants = args[0];
+              const postDescendants = args[1];
+              const remainerIndexes = preDescendants
+              .map((element, index) => postDescendants.includes(element) ? index : -1)
+              .filter(index => index > -1);
+              return remainerIndexes;
+            }, [preDescendants, postDescendants]);
+            const additionCount = postDescendants.length - remainerIndexes.length;
+            const removalCount = preDescendants.length - remainerIndexes.length;
+            const remainers = [];
+            for (const index of remainerIndexes) {
+              remainers.push({
+                element: preDescendants[index],
+                preOpacity: preOpacities[index],
+                postOpacity: await page.evaluate(
+                  element => window.getComputedStyle(element).opacity, preDescendants[index]
+                )
+              });
+            }
+            const opacityChangers = remainers
+            .filter(remainer => remainer.postOpacity !== remainer.preOpacity);
+            const opacityImpact = await page.evaluate(changers => changers.reduce(
+              (total, current) => total + current.element.querySelectorAll('*').length, 0
+            ), opacityChangers);
+            if (additionCount || removalCount || opacityChangers.length) {
+              return {
+                additionCount,
+                removalCount,
+                opacityChangers,
+                opacityImpact
+              };
+            }
+            else {
+              return await new Promise(resolve => {
+                setTimeout(() => {
+                  resolve(getImpacts(interval, triesLeft));
+                }, interval);
+              });
+            }
+          }
+          else {
+            return null;
           }
-          // Hover over the upper-left corner of the page, to undo any hover reactions.
+        };
+        // Repeatedly seek impacts of the hover at intervals.
+        const impacts = await getImpacts(300, 4);
+        // If there were any:
+        if (impacts) {
+          // Hover over the upper-left corner of the page, to undo any impacts.
           await page.hover('body', {
             position: {
               x: 0,
@@ -141,54 +163,35 @@ const find = async (withItems, page, triggers) => {
           // Wait for any delayed and/or slowed hover reaction.
           await page.waitForTimeout(200);
           await root.waitForElementState('stable');
-          // Increment the counts of triggers and targets.
-          data.totals.triggers++;
-          const madeVisible = Math.max(0, postVisibles.length - preVisibles.length);
-          data.totals.madeVisible += madeVisible;
-          data.totals.opacityChanged += opacityTargets.length;
-          data.totals.opacityAffected += opacityAffected;
+          // Increment the counts of triggers and impacts.
+          const {additionCount, removalCount, opacityChangers, opacityImpact} = impacts;
+          data.totals.impactTriggers++;
+          data.totals.additions += additionCount;
+          data.totals.removals += removalCount;
+          data.totals.opacityChanges += opacityChangers.length;
+          data.totals.opacityImpact += opacityImpact;
           // If details are to be reported:
           if (withItems) {
             // Report them.
-            const triggerDataJSHandle = await page.evaluateHandle(args => {
-              // Returns the text of an element.
-              const textOf = (element, limit) => {
-                const text = element.textContent.trim() || element.outerHTML.trim();
-                return text.replace(/\s{2,}/sg, ' ').slice(0, limit);
-              };
-              const trigger = args[0];
-              const preVisibles = args[1];
-              const postVisibles = args[2];
-              const madeVisible = postVisibles
-              .filter(el => ! preVisibles.includes(el))
-              .map(el => ({
-                tagName: el.tagName,
-                text: textOf(el, 50)
-              }));
-              const opacityChanged = args[3].map(el => ({
-                tagName: el.tagName,
-                text: textOf(el, 50)
-              }));
-              return {
-                tagName: trigger.tagName,
-                id: trigger.id || '',
-                text: textOf(trigger, 50),
-                madeVisible,
-                opacityChanged
-              };
-            }, [firstTrigger, preVisibles, postVisibles, opacityTargets]);
-            const triggerData = await triggerDataJSHandle.jsonValue();
-            data.items.triggers.push(triggerData);
+            data.items.impactTriggers.push({
+              tagName,
+              text: await textOf(firstTrigger, 50),
+              additions: additionCount,
+              removals: removalCount,
+              opacityChanges: opacityChangers.length,
+              opacityImpact
+            });
           }
         }
       }
       catch (error) {
-        console.log('ERROR hovering');
+        console.log(`ERROR hovering (${error.message})`);
         data.totals.unhoverables++;
         if (withItems) {
+          const id = await firstTrigger.getAttribute('id');
           data.items.unhoverables.push({
-            tagName: tagName,
-            id: firstTrigger.id || '',
+            tagName,
+            id: id || '',
             text: await textOf(firstTrigger, 50)
           });
         }
@@ -204,18 +207,13 @@ exports.reporter = async (page, sampleSize = Infinity, withItems) => {
   if (withItems) {
     // Add properties for details to the initialized result.
     data.items = {
-      triggers: [],
+      impactTriggers: [],
       unhoverables: []
     };
   }
   // Identify the triggers.
-  const selectors = [
-    'body a:visible',
-    'body button:visible',
-    'body li:visible, body [onmouseenter]:visible',
-    'body [onmouseover]:visible'
-  ];
-  const triggers = await page.$$(selectors.join(', '))
+  const selectors = ['a', 'button', 'li', '[onmouseenter]', '[onmouseover]'];
+  const triggers = await page.$$(selectors.map(selector => `body ${selector}:visible`).join(', '))
   .catch(error => {
     console.log(`ERROR getting hover triggers (${error.message})`);
     data.prevented = true;
@@ -225,7 +223,7 @@ exports.reporter = async (page, sampleSize = Infinity, withItems) => {
   const triggerCount = triggers.length;
   data.populationSize = triggerCount;
   const triggerSample = triggerCount > sampleSize ? getSample(triggers, sampleSize) : triggers;
-  // Find and document the hover-triggered disclosures.
+  // Find and document the hover-triggered impacts.
   await find(withItems, page, triggerSample);
   // If the triggers were sampled:
   if (triggerCount > sampleSize) {