testaro 1.0.0

package/tests/styleDiff.js

@@ -0,0 +1,146 @@
+/*
+  styleDiff
+  This test reports style differences among links, buttons, and headings. It assumes
+  that an accessible page employs few or only one style for inline links, and likewise
+  for non-inline links, buttons, and headings at each level. The test considers only
+  particular style properties, listed in the 'mainStyles' and 'headingStyles' arrays.
+*/
+exports.reporter = async (page, withItems) => {
+  // Get an object with arrays of block and inline links as properties.
+  const linkTypes = await require('../procs/test/linksByType').linksByType(page);
+  return await page.$eval('body', (body, args) => {
+    const withItems = args[0];
+    const linkTypes = args[1];
+    // Initialize the data to be returned.
+    const data = {totals: {}};
+    if (withItems) {
+      data.items = {};
+    }
+    // Identify the settable style properties to be compared for all tag names.
+    const mainStyles = [
+      'borderStyle',
+      'borderWidth',
+      'fontStyle',
+      'fontWeight',
+      'lineHeight',
+      'maxHeight',
+      'maxWidth',
+      'minHeight',
+      'minWidth',
+      'opacity',
+      'outlineOffset',
+      'outlineStyle',
+      'outlineWidth',
+      'textDecorationLine',
+      'textDecorationStyle',
+      'textDecorationThickness'
+    ];
+    // Identify those for headings.
+    const headingStyles = [
+      'fontSize'
+    ];
+    // Identify the heading tag names to be analyzed.
+    const headingNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    // Identify the other nonlink tag names to be analyzed.
+    const otherNames = ['button'];
+    // Initialize an object of elements to be analyzed.
+    const elementClasses = {
+      headings: {},
+      other: {
+        aInline: linkTypes.inline,
+        aBlock: linkTypes.block
+      }
+    };
+    // For each heading tag name:
+    headingNames.forEach(tagName => {
+      // Add its elements to the object.
+      elementClasses.headings[tagName] = Array.from(body.getElementsByTagName(tagName));
+    });
+    // For each other tag name:
+    otherNames.forEach(tagName => {
+      // Add its elements to the object.
+      elementClasses.other[tagName] = Array.from(body.getElementsByTagName(tagName));
+    });
+    // For each element superclass:
+    ['headings', 'other'].forEach(superClass => {
+      // For each class in the superclass:
+      Object.keys(elementClasses[superClass]).forEach(tagName => {
+        const elements = elementClasses[superClass][tagName];
+        const elementCount = elements.length;
+        // If there are any:
+        if (elementCount) {
+          const styleProps = {};
+          const styleTexts = {};
+          if (withItems) {
+            if (! data.items[tagName]) {
+              data.items[tagName] = {};
+            }
+          }
+          // For each of them:
+          elements.forEach(element => {
+            // Get its values on the style properties to be compared.
+            const styleDec = window.getComputedStyle(element);
+            const style = {};
+            // Identify the styles to be compared.
+            const styles = mainStyles;
+            if (superClass === 'headings') {
+              styles.push(...headingStyles);
+            }
+            styles.forEach(styleName => {
+              style[styleName] = styleDec[styleName];
+            });
+            // Get a text representation of the style.
+            const styleText = JSON.stringify(style);
+            // Increment the total of elements with that style declaration.
+            styleTexts[styleText] = ++styleTexts[styleText] || 1;
+            // If details are required:
+            if (withItems) {
+              // For each style property:
+              styles.forEach(styleName => {
+                const styleValue = style[styleName];
+                // Increment the total of elements with the same value on it as the element.
+                if (styleProps[styleName]) {
+                  styleProps[styleName][styleValue] = ++styleProps[styleName][styleValue] || 1;
+                }
+                else {
+                  styleProps[styleName] = {[styleValue]: 1};
+                }
+              });
+            }
+          });
+          // Add the total to the result.
+          data.totals[tagName] = {total: elementCount};
+          const styleCounts = Object.values(styleTexts);
+          // If the elements in the element class differ in style:
+          if (styleCounts.length > 1) {
+            // Add the distribution of its style counts to the result.
+            data.totals[tagName].subtotals = styleCounts.sort((a, b) => b - a);
+          }
+          // If details are required:
+          if (withItems) {
+            // For each style property:
+            Object.keys(styleProps).forEach(styleProp => {
+              // Ignore it if all the elements have the same value.
+              if (Object.keys(styleProps[styleProp]).length === 1) {
+                delete styleProps[styleProp];
+              }
+              // Otherwise:
+              else {
+                if (! data.items[tagName][styleProp]) {
+                  data.items[tagName][styleProp] = {};
+                }
+                // Sort the values in order of decreasing count.
+                const sortedEntries = Object.entries(styleProps[styleProp]).sort((a, b) => b[1] - a[1]);
+                sortedEntries.forEach(entry => {
+                  const propData = data.items[tagName][styleProp];
+                  propData[entry[0]] = (propData[entry[0]] || 0) + entry[1];
+                });
+              }
+            });
+          }
+        }
+      });
+    });
+    return {result: data};
+  }, [withItems, linkTypes]);
+};

package/tests/tabNav.js

@@ -0,0 +1,282 @@
+/*
+  tabNav
+  This test reports nonstandard keyboard navigation among tab elements in tab lists.
+  Standards are based on https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel.
+*/
+exports.reporter = async (page, withItems) => {
+  // Initialize a report.
+  const data = {
+    totals: {
+      navigations: {
+        all: {
+          total: 0,
+          correct: 0,
+          incorrect: 0
+        },
+        specific: {
+          tab: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          left: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          right: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          up: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          down: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          home: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          end: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          }
+        }
+      },
+      tabElements: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
+      },
+      tabLists: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
+      }
+    }
+  };
+  if (withItems) {
+    data.tabElements = {
+      incorrect: [],
+      correct: []
+    };
+  }
+  // Identify an array of the tablists.
+  const tabLists = await page.$$('[role=tablist]');
+  if (tabLists.length) {
+    // FUNCTION DEFINITIONS START
+    // Returns text associated with an element.
+    const {allText} = require('../procs/test/allText');
+    // Returns the index of the focused tab in an array of tabs.
+    const focusedTab = async tabs => await page.evaluate(tabs => {
+      const focus = document.activeElement;
+      return tabs.indexOf(focus);
+    }, tabs)
+    .catch(error => {
+      console.log(`ERROR: could not find focused tab (${error.message})`);
+      return -1;
+    });
+    // Tests a navigation on a tab element.
+    const testKey = async (
+      tabs, tabElement, keyName, keyProp, goodIndex, elementIsCorrect, itemData
+    ) => {
+      let pressed = true;
+      // Click the tab element, to make the focus on it effective.
+      await tabElement.click({timeout: 1500})
+      .catch(error => {
+        console.log(`ERROR: could not click tab element ${itemData.text} (${error.message})`);
+        pressed = false;
+      });
+      if (pressed) {
+        // Refocus the tab element and press the specified key (page.keyboard.press may fail).
+        await tabElement.press(keyName)
+        .catch(error => {
+          console.log(`ERROR: could not press ${keyName} (${error.message})`);
+          pressed = false;
+        });
+        if (pressed) {
+          // Increment the counts of navigations and key navigations.
+          data.totals.navigations.all.total++;
+          data.totals.navigations.specific[keyProp].total++;
+          // Identify which tab element is now focused, if any.
+          const focusIndex = await focusedTab(tabs);
+          // If the focus is correct:
+          if (focusIndex === goodIndex) {
+            // Increment the counts of correct navigations and correct key navigations.
+            data.totals.navigations.all.correct++;
+            data.totals.navigations.specific[keyProp].correct++;
+          }
+          // Otherwise, i.e. if the focus is incorrect:
+          else {
+            // Increment the counts of incorrect navigations and incorrect key navigations.
+            data.totals.navigations.all.incorrect++;
+            data.totals.navigations.specific[keyProp].incorrect++;
+            // Update the element status to incorrect.
+            elementIsCorrect = false;
+            // If itemization is required:
+            if (withItems) {
+              // Update the element report.
+              itemData.navigationErrors.push(keyName);
+            }
+          }
+          return elementIsCorrect;
+        }
+        else {
+          return false;
+        }
+      }
+    };
+    // Returns the index to which an arrow key should move the focus.
+    const arrowTarget = (startIndex, tabCount, orientation, direction) => {
+      if (orientation === 'horizontal') {
+        if (['up', 'down'].includes(direction)) {
+          return startIndex;
+        }
+        else if (direction === 'left') {
+          return startIndex ? startIndex - 1 : tabCount - 1;
+        }
+        else if (direction === 'right') {
+          return startIndex === tabCount - 1 ? 0 : startIndex + 1;
+        }
+      }
+      else if (orientation === 'vertical') {
+        if (['left', 'right'].includes(direction)) {
+          return startIndex;
+        }
+        else if (direction === 'up') {
+          return startIndex ? startIndex - 1 : tabCount - 1;
+        }
+        else if (direction === 'down') {
+          return startIndex === tabCount - 1 ? 0 : startIndex + 1;
+        }
+      }
+    };
+    /*
+      Recursively tests tablist tab elements (per
+      https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
+    */
+    const testTabs = async (tabs, index, listOrientation, listIsCorrect) => {
+      const tabCount = tabs.length;
+      // If any tab elements remain to be tested:
+      if (index < tabCount) {
+        // Increment the reported count of tab elements.
+        data.totals.tabElements.total++;
+        // Identify the tab element to be tested.
+        const currentTab = tabs[index];
+        // Initialize it as correct.
+        let isCorrect = true;
+        const itemData = {};
+        // If itemization is required:
+        if (withItems) {
+          let found = true;
+          // Initialize a report on the element.
+          itemData.tagName = await page.evaluate(element => element.tagName, currentTab)
+          .catch(error => {
+            console.log(`ERROR: could not get tag name (${error.message})`);
+            found = false;
+            return 'ERROR: not found';
+          });
+          if (found) {
+            itemData.text = await allText(page, currentTab);
+            itemData.navigationErrors = [];
+          }
+        }
+        // Test the element with each navigation key.
+        isCorrect = await testKey(tabs, currentTab, 'Tab', 'tab', -1, isCorrect, itemData);
+        isCorrect = await testKey(
+          tabs,
+          currentTab,
+          'ArrowLeft',
+          'left',
+          arrowTarget(index, tabCount, listOrientation, 'left'),
+          isCorrect,
+          itemData
+        );
+        isCorrect = await testKey(
+          tabs,
+          currentTab,
+          'ArrowRight',
+          'right',
+          arrowTarget(index, tabCount, listOrientation, 'right'),
+          isCorrect,
+          itemData
+        );
+        isCorrect = await testKey(
+          tabs,
+          currentTab,
+          'ArrowUp',
+          'up',
+          arrowTarget(index, tabCount, listOrientation, 'up'),
+          isCorrect,
+          itemData
+        );
+        isCorrect = await testKey(
+          tabs,
+          currentTab,
+          'ArrowDown',
+          'down',
+          arrowTarget(index, tabCount, listOrientation, 'down'),
+          isCorrect,
+          itemData
+        );
+        isCorrect = await testKey(tabs, currentTab, 'Home', 'home', 0, isCorrect, itemData);
+        isCorrect = await testKey(
+          tabs, currentTab, 'End', 'end', tabCount - 1, isCorrect, itemData
+        );
+        // Update the tablist status (&&= operator from ES 2021 rejected by node 14).
+        listIsCorrect = listIsCorrect && isCorrect;
+        // Increment the data.
+        data.totals.tabElements[isCorrect ? 'correct' : 'incorrect']++;
+        if (withItems) {
+          data.tabElements[isCorrect ? 'correct' : 'incorrect'].push(itemData);
+        }
+        // Process the next tab element.
+        return await testTabs(tabs, index + 1, listOrientation, listIsCorrect);
+      }
+      // Otherwise, i.e. if all tab elements have been tested:
+      else {
+        // Return whether the tablist is correct.
+        return listIsCorrect;
+      }
+    };
+    // Recursively tests tablists.
+    const testTabLists = async tabLists => {
+      // If any tablists remain to be tested:
+      if (tabLists.length) {
+        const firstTabList = tabLists[0];
+        let orientation = await firstTabList.getAttribute('aria-orientation')
+        .catch(error=> {
+          console.log(`ERROR: could not get tab-list orientation (${error.message})`);
+          return 'ERROR';
+        });
+        if (! orientation) {
+          orientation = 'horizontal';
+        }
+        if (orientation !== 'ERROR') {
+          const tabs = await firstTabList.$$('[role=tab]');
+          // If the tablist contains at least 2 tab elements:
+          if (tabs.length > 1) {
+            // Test them.
+            const isCorrect = await testTabs(tabs, 0, orientation, true);
+            // Increment the data.
+            data.totals.tabLists.total++;
+            data.totals.tabLists[isCorrect ? 'correct' : 'incorrect']++;
+            // Process the remaining tablists.
+            await testTabLists(tabLists.slice(1));
+          }
+        }
+      }
+    };
+    // FUNCTION DEFINITIONS END
+    await testTabLists(tabLists);
+  }
+  return {result: data};
+};

package/tests/wave.js

@@ -0,0 +1,44 @@
+/*
+  wave
+  This test implements the WebAIM WAVE ruleset for accessibility. The 'reportType' argument
+  specifies a WAVE report type: 1, 2, 3, or 4. The larger the number, the more detailed (and
+  expensive) the report.
+*/
+const https = require('https');
+exports.reporter = async (page, reportType) => {
+  const waveKey = process.env.WAVE_KEY;
+  // Get the data from a WAVE test.
+  const data = await new Promise(resolve => {
+    https.get(
+      {
+        host: 'wave.webaim.org',
+        path: `/api/request?key=${waveKey}&url=${page.url()}&reporttype=${reportType}`,
+        protocol: 'https:'
+      },
+      response => {
+        let report = '';
+        response.on('data', chunk => {
+          report += chunk;
+        });
+        // When the data arrive, return them as an object.
+        response.on('end', () => {
+          try {
+            const result = JSON.parse(report);
+            const {categories} = result;
+            delete categories.feature;
+            delete categories.structure;
+            delete categories.aria;
+            return resolve(result);
+          }
+          catch (error) {
+            return resolve({
+              error: 'WAVE did not return JSON.',
+              report
+            });
+          }
+        });
+      }
+    );
+  });
+  return {result: data};
+};

package/tests/zIndex.js

@@ -0,0 +1,49 @@
+/*
+  zIndex
+  This test reports elements with non-auto z indexes. It assumes that pages are most accessible
+  when they do not require users to perceive a third dimension (depth). Layers, popups, and dialogs
+  that cover other content make it difficult for some or all users to interpret the content and
+  know what parts of the content can be acted on. Layering also complicates accessibility control.
+  Tests for visibility of focus, for example, may fail if incapable of detecting that a focused
+  element is covered by another element.
+*/
+exports.reporter = async (page, withItems) => {
+  // Get data on the elements with non-auto z indexes.
+  const data = await page.$$eval('body *', (elements, withItems) => {
+    // Initialize the data.
+    const data = {
+      totals: {
+        total: 0,
+        tagNames: {}
+      }
+    };
+    if (withItems) {
+      data.items = [];
+    }
+    const addElementFacts = element => {
+      const tagName = element.tagName;
+      const tagNames = data.totals.tagNames;
+      if (tagNames[tagName]) {
+        tagNames[tagName]++;
+      }
+      else {
+        tagNames[tagName] = 1;
+      }
+      if (withItems) {
+        data.items.push({
+          tagName,
+          id: element.id || '',
+          text: element.textContent.trim().replace(/\s{2,}/g, ' ').slice(0, 100)
+        });
+      }
+    };
+    elements.forEach(element => {
+      if (window.getComputedStyle(element)['z-index'] !== 'auto') {
+        data.totals.total++;
+        addElementFacts(element);
+      }
+    });
+    return data;
+  }, withItems);
+  return {result: data};
+};

package/validation/batches/sample.json

@@ -0,0 +1,13 @@
+{
+  "what": "Sample batch",
+  "hosts": [
+    {
+      "which": "https://www.w3.org/",
+      "what": "W3C"
+    },
+    {
+      "which": "https://www.wikimedia.org/",
+      "what": "Wikimedia"
+    }
+  ]
+}

package/validation/executors/sample.js

@@ -0,0 +1,11 @@
+// sample.js
+// Sample executor for Testaro.
+
+const options = {
+  reports: `${__dirname}/../reports`,
+  // To use the sample batch, uncomment the following line.
+  batches: `${__dirname}/../batches/sample.json`,
+  script: `${__dirname}/../scripts/app/sample.json`
+};
+const {handleRequest} = require('../../index');
+handleRequest(options);

package/validation/scripts/app/sample.json

@@ -0,0 +1,21 @@
+{
+  "what": "Sample Testaro executor with 1 test",
+  "strict": true,
+  "commands": [
+    {
+      "type": "launch",
+      "which": "chromium",
+      "what": "Chromium browser"
+    },
+    {
+      "type": "url",
+      "which": "https://example.com/",
+      "what": "simple page, replaced if there is a batch"
+    },
+    {
+      "type": "test",
+      "which": "bulk",
+      "what": "bulk"
+    }
+  ]
+}

package/validation/scripts/test/bulk.json

@@ -0,0 +1,39 @@
+{
+  "what": "validation of bulk test",
+  "strict": true,
+  "commands": [
+    {
+      "type": "launch",
+      "which": "chromium",
+      "what": "usual browser"
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/bulk/good.html",
+      "what": "small page"
+    },
+    {
+      "type": "test",
+      "which": "bulk",
+      "what": "visible element count",
+      "expect": [
+        ["visibleElements", ">", 1],
+        ["visibleElements", "<", 5]
+      ]
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/bulk/bad.html",
+      "what": "large page"
+    },
+    {
+      "type": "test",
+      "which": "bulk",
+      "what": "visible element count",
+      "expect": [
+        ["visibleElements", ">", 30],
+        ["visibleElements", "<", 40]
+      ]
+    }
+  ]
+}

package/validation/scripts/test/embAc.json

@@ -0,0 +1,45 @@
+{
+  "what": "validation of embAc test",
+  "strict": true,
+  "commands": [
+    {
+      "type": "launch",
+      "which": "chromium",
+      "what": "usual browser"
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/embAc/good.html",
+      "what": "page without embedding in links or buttons"
+    },
+    {
+      "type": "test",
+      "which": "embAc",
+      "what": "visible element count",
+      "withItems": false,
+      "expect": [
+        ["totals.links", "=", 0],
+        ["totals.buttons", "=", 0],
+        ["totals.inputs", "=", 0],
+        ["totals.selects", "=", 0]
+      ]
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/embAc/bad.html",
+      "what": "page with embeddings in links and buttons"
+    },
+    {
+      "type": "test",
+      "which": "embAc",
+      "what": "visible element count",
+      "withItems": false,
+      "expect": [
+        ["totals.links", "=", 2],
+        ["totals.buttons", "=", 2],
+        ["totals.inputs", "=", 3],
+        ["totals.selects", "=", 1]
+      ]
+    }
+  ]
+}