Show number of actual AXE issues on pageSummary (#4019)

lib/plugins/axe/axePostScript.cjs

@@ -35,8 +35,7 @@ module.exports = async function (context) {
       'RUNNING_AXE'
     );
     // Use the extras field in Browsertime and pass on the result
-    context.result[context.result.length - 1].extras.axe = result;
-
+    context.result.at(-1).extras.axe = result;
   } catch (error) {
     context.log.error(
       'Could not run the AXE script, no AXE information collected',

lib/plugins/axe/pug/index.pug

@@ -42,13 +42,13 @@ else
         tbody
             tr
                 td Critical 
-                td #{axe.violations.critical.median}
+                td #{axe.violations.critical.median} (#{axe.violationIssues.critical.median} issues)
             tr
                 td Serious
-                td #{axe.violations.serious.median}
+                td #{axe.violations.serious.median} (#{axe.violationIssues.serious.median} issues)
             tr
                 td Moderate
-                td #{axe.violations.moderate.median}
+                td #{axe.violations.moderate.median} (#{axe.violationIssues.moderate.median} issues)
             tr
                 td Minor
-                td #{axe.violations.minor.median}
+                td #{axe.violations.minor.median} (#{axe.violationIssues.minor.median} issues)

lib/plugins/browsertime/axeAggregator.js

@@ -9,6 +9,12 @@ export class AxeAggregator {
       minor: new Stats(),
       moderate: new Stats()
     };
+    this.axeViolationIssues = {
+      critical: new Stats(),
+      serious: new Stats(),
+      minor: new Stats(),
+      moderate: new Stats()
+    };
   }
 
   addStats(axeData) {
@@ -18,15 +24,24 @@ export class AxeAggregator {
       minor: 0,
       moderate: 0
     };
+
+    const violationIssues = {
+      critical: 0,
+      serious: 0,
+      minor: 0,
+      moderate: 0
+    };
     for (let violation of axeData.violations) {
       violations[violation.impact] += 1;
+      violationIssues[violation.impact] += violation.nodes.length;
     }
 
     for (let type of Object.keys(violations)) {
       this.axeViolations[type].push(violations[type]);
+      this.axeViolationIssues[type].push(violationIssues[type]);
     }
 
-    return violations;
+    return { violations, violationIssues };
   }
 
   summarizeStats() {
@@ -36,6 +51,12 @@ export class AxeAggregator {
         serious: _summarizeStats(this.axeViolations.serious),
         minor: _summarizeStats(this.axeViolations.minor),
         moderate: _summarizeStats(this.axeViolations.moderate)
+      },
+      violationIssues: {
+        critical: _summarizeStats(this.axeViolationIssues.critical),
+        serious: _summarizeStats(this.axeViolationIssues.serious),
+        minor: _summarizeStats(this.axeViolationIssues.minor),
+        moderate: _summarizeStats(this.axeViolationIssues.moderate)
       }
     };
   }

lib/plugins/browsertime/default/metricsPageSummary.js

@@ -31,6 +31,7 @@ export const metricsPageSummary = [
   'statistics.errors',
   'statistics.memory',
   'statistics.axe.violations.*',
+  'statistics.axe.violationIssues.*',
   'statistics.pageinfo.cumulativeLayoutShift',
   'statistics.pageinfo.domElements',
   'statistics.extras.*',