lighthouse 8.5.1-dev.20210928 → 8.5.1-dev.20211002

package/flow-report/test/summary/category-test.tsx

@@ -4,22 +4,26 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
+import {FunctionComponent} from 'preact';
 import {render} from '@testing-library/preact';
 
 import {SummaryTooltip} from '../../src/summary/category';
 import {Util} from '../../../report/renderer/util';
+import {flowResult} from '../sample-flow';
+import {I18nProvider} from '../../src/i18n/i18n';
+import {FlowResultContext} from '../../src/util';
+
+let wrapper: FunctionComponent;
 
-const flowResult: LH.FlowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+beforeEach(() => {
+  wrapper = ({children}) => (
+    <FlowResultContext.Provider value={flowResult}>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
+    </FlowResultContext.Provider>
+  );
+});
 
 describe('SummaryTooltip', () => {
   it('renders tooltip with rating', async () => {
@@ -28,7 +32,8 @@ describe('SummaryTooltip', () => {
     const category = reportResult.categories['seo'];
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>
+      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>,
+      {wrapper}
     );
 
     const rating = root.getByTestId('SummaryTooltip__rating');
@@ -43,7 +48,8 @@ describe('SummaryTooltip', () => {
     const category = reportResult.categories['performance'];
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>
+      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>,
+      {wrapper}
     );
 
     expect(() => root.getByTestId('SummaryTooltip__rating')).toThrow();
@@ -56,7 +62,9 @@ describe('SummaryTooltip', () => {
     const category = reportResult.categories['performance'];
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>
+      <SummaryTooltip category={category} gatherMode={reportResult.gatherMode}/>,
+      {wrapper}
+
     );
 
     const rating = root.getByTestId('SummaryTooltip__rating');

package/flow-report/test/summary/summary-test.tsx

@@ -4,24 +4,14 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
+import {I18nProvider} from '../../src/i18n/i18n';
 import {SummaryHeader, SummaryFlowStep} from '../../src/summary/summary';
 import {FlowResultContext} from '../../src/util';
 import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
-
-const flowResult: LH.FlowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+import {flowResult} from '../sample-flow';
 
 let wrapper: FunctionComponent;
 
@@ -29,7 +19,9 @@ beforeEach(() => {
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        {children}
+        <I18nProvider>
+          {children}
+        </I18nProvider>
       </ReportRendererProvider>
     </FlowResultContext.Provider>
   );

package/flow-report/test/util-test.tsx

@@ -4,24 +4,13 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
 import {jest} from '@jest/globals';
 import {renderHook} from '@testing-library/preact-hooks';
 import {FunctionComponent} from 'preact';
 import {act} from 'preact/test-utils';
 
 import {FlowResultContext, useCurrentLhr} from '../src/util';
-
-const flowResult: LH.FlowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+import {flowResult} from './sample-flow';
 
 let wrapper: FunctionComponent;
 

package/flow-report/tsconfig.json

@@ -16,6 +16,7 @@
     {"path": "../report"},
   ],
   "include": [
+    "**/*.js",
     "**/*.ts",
     "**/*.tsx",
     "./types",

package/jest.config.js

@@ -6,18 +6,6 @@
 'use strict';
 
 module.exports = {
-  collectCoverage: false,
-  coverageReporters: ['none'],
-  collectCoverageFrom: [
-    '**/lighthouse-core/**/*.js',
-    '**/lighthouse-cli/**/*.js',
-    '**/report/**/*.js',
-    '**/lighthouse-viewer/**/*.js',
-  ],
-  coveragePathIgnorePatterns: [
-    '/test/',
-    '/scripts/',
-  ],
   setupFilesAfterEnv: ['./lighthouse-core/test/test-utils.js'],
   testEnvironment: 'node',
   testMatch: [
@@ -26,12 +14,9 @@ module.exports = {
     '**/report/**/*-test.js',
     '**/lighthouse-core/test/fraggle-rock/**/*-test-pptr.js',
     '**/lighthouse-treemap/**/*-test.js',
-    '**/lighthouse-treemap/**/*-test-pptr.js',
     '**/lighthouse-viewer/**/*-test.js',
-    '**/lighthouse-viewer/**/*-test-pptr.js',
     '**/third-party/**/*-test.js',
     '**/clients/test/**/*-test.js',
-    '**/docs/**/*.test.js',
   ],
   transform: {},
   prettierPath: null,

package/lighthouse-core/fraggle-rock/api.js

@@ -8,9 +8,19 @@
 const {snapshot} = require('./gather/snapshot-runner.js');
 const {startTimespan} = require('./gather/timespan-runner.js');
 const {navigation} = require('./gather/navigation-runner.js');
+const UserFlow = require('./user-flow.js');
+
+/**
+ * @param {import('puppeteer').Page} page
+ * @param {UserFlow.UserFlowOptions} [options]
+ */
+async function startFlow(page, options) {
+  return new UserFlow(page, options);
+}
 
 module.exports = {
   snapshot,
   startTimespan,
   navigation,
+  startFlow,
 };

package/lighthouse-core/fraggle-rock/user-flow.js

@@ -6,7 +6,9 @@
 'use strict';
 
 const {generateFlowReportHtml} = require('../../report/generator/report-generator.js');
-const {navigation, startTimespan, snapshot} = require('./api.js');
+const {snapshot} = require('./gather/snapshot-runner.js');
+const {startTimespan} = require('./gather/timespan-runner.js');
+const {navigation} = require('./gather/navigation-runner.js');
 
 /** @typedef {Parameters<snapshot>[0]} FrOptions */
 /** @typedef {Omit<FrOptions, 'page'>} UserFlowOptions */
@@ -49,6 +51,29 @@ class UserFlow {
     }
   }
 
+  /**
+   * @param {string} url
+   * @param {StepOptions=} stepOptions
+   */
+  _getNextNavigationOptions(url, stepOptions) {
+    const options = {url, ...this.options, ...stepOptions};
+
+    // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
+    const isSubsequentNavigation = this.steps.some(step => step.lhr.gatherMode === 'navigation');
+    if (isSubsequentNavigation) {
+      const configContext = {...options.configContext};
+      const settingsOverrides = {...configContext.settingsOverrides};
+      if (settingsOverrides.disableStorageReset === undefined) {
+        settingsOverrides.disableStorageReset = true;
+      }
+
+      configContext.settingsOverrides = settingsOverrides;
+      options.configContext = configContext;
+    }
+
+    return options;
+  }
+
   /**
    * @param {string} url
    * @param {StepOptions=} stepOptions
@@ -56,8 +81,7 @@ class UserFlow {
   async navigate(url, stepOptions) {
     if (this.currentTimespan) throw Error('Timespan already in progress');
 
-    const options = {url, ...this.options, ...stepOptions};
-    const result = await navigation(options);
+    const result = await navigation(this._getNextNavigationOptions(url, stepOptions));
     if (!result) throw Error('Navigation returned undefined');
 
     const providedName = stepOptions && stepOptions.stepName;

package/lighthouse-core/lib/i18n/i18n.js

@@ -350,7 +350,7 @@ function getRendererFormattedStrings(locale) {
   /** @type {Record<string, string>} */
   const strings = {};
   for (const icuMessageId of icuMessageIds) {
-    const [filename, key] = icuMessageId.split(' | ');
+    const {filename, key} = getIcuMessageIdParts(icuMessageId);
     if (!filename.endsWith('util.js')) throw new Error(`Unexpected message: ${icuMessageId}`);
 
     strings[key] = localeMessages[icuMessageId].message;
@@ -524,6 +524,17 @@ function isStringOrIcuMessage(value) {
   return typeof value === 'string' || isIcuMessage(value);
 }
 
+/**
+ * @param {string} i18nMessageId
+ */
+function getIcuMessageIdParts(i18nMessageId) {
+  if (!MESSAGE_I18N_ID_REGEX.test(i18nMessageId)) {
+    throw Error(`"${i18nMessageId}" does not appear to be a valid ICU message id`);
+  }
+  const [filename, key] = i18nMessageId.split(' | ');
+  return {filename, key};
+}
+
 module.exports = {
   _formatPathAsString,
   UIStrings,
@@ -538,4 +549,5 @@ module.exports = {
   isStringOrIcuMessage,
   // TODO: exported for backwards compatibility. Consider removing on future breaking change.
   createMessageInstanceIdFn: createIcuMessageFn,
+  getIcuMessageIdParts,
 };

package/lighthouse-core/lib/i18n/locales/en-US.json

@@ -1,4 +1,49 @@
 {
+  "flow-report/src/i18n/ui-strings.js | allReports": {
+    "message": "All Reports"
+  },
+  "flow-report/src/i18n/ui-strings.js | desktop": {
+    "message": "Desktop"
+  },
+  "flow-report/src/i18n/ui-strings.js | mobile": {
+    "message": "Mobile"
+  },
+  "flow-report/src/i18n/ui-strings.js | navigationDescription": {
+    "message": "Page load"
+  },
+  "flow-report/src/i18n/ui-strings.js | navigationReport": {
+    "message": "Navigation report"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingAverage": {
+    "message": "Average"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingError": {
+    "message": "Error"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingFail": {
+    "message": "Poor"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingPass": {
+    "message": "Good"
+  },
+  "flow-report/src/i18n/ui-strings.js | snapshotDescription": {
+    "message": "Captured state of page"
+  },
+  "flow-report/src/i18n/ui-strings.js | snapshotReport": {
+    "message": "Snapshot report"
+  },
+  "flow-report/src/i18n/ui-strings.js | summary": {
+    "message": "Summary"
+  },
+  "flow-report/src/i18n/ui-strings.js | timespanDescription": {
+    "message": "User interactions"
+  },
+  "flow-report/src/i18n/ui-strings.js | timespanReport": {
+    "message": "Timespan report"
+  },
+  "flow-report/src/i18n/ui-strings.js | title": {
+    "message": "Lighthouse User Flow Report"
+  },
   "lighthouse-core/audits/accessibility/accesskeys.js | description": {
     "message": "Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. [Learn more](https://web.dev/accesskeys/)."
   },

package/lighthouse-core/lib/i18n/locales/en-XL.json

@@ -1,4 +1,49 @@
 {
+  "flow-report/src/i18n/ui-strings.js | allReports": {
+    "message": "Âĺl̂ Ŕêṕôŕt̂ś"
+  },
+  "flow-report/src/i18n/ui-strings.js | desktop": {
+    "message": "D̂éŝḱt̂óp̂"
+  },
+  "flow-report/src/i18n/ui-strings.js | mobile": {
+    "message": "M̂ób̂íl̂é"
+  },
+  "flow-report/src/i18n/ui-strings.js | navigationDescription": {
+    "message": "P̂áĝé l̂óâd́"
+  },
+  "flow-report/src/i18n/ui-strings.js | navigationReport": {
+    "message": "N̂áv̂íĝát̂íôń r̂ép̂ór̂t́"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingAverage": {
+    "message": "Âv́êŕâǵê"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingError": {
+    "message": "Êŕr̂ór̂"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingFail": {
+    "message": "P̂óôŕ"
+  },
+  "flow-report/src/i18n/ui-strings.js | ratingPass": {
+    "message": "Ĝóôd́"
+  },
+  "flow-report/src/i18n/ui-strings.js | snapshotDescription": {
+    "message": "Ĉáp̂t́ûŕêd́ ŝt́ât́ê óf̂ ṕâǵê"
+  },
+  "flow-report/src/i18n/ui-strings.js | snapshotReport": {
+    "message": "Ŝńâṕŝh́ôt́ r̂ép̂ór̂t́"
+  },
+  "flow-report/src/i18n/ui-strings.js | summary": {
+    "message": "Ŝúm̂ḿâŕŷ"
+  },
+  "flow-report/src/i18n/ui-strings.js | timespanDescription": {
+    "message": "Ûśêŕ îńt̂ér̂áĉt́îón̂ś"
+  },
+  "flow-report/src/i18n/ui-strings.js | timespanReport": {
+    "message": "T̂ím̂éŝṕâń r̂ép̂ór̂t́"
+  },
+  "flow-report/src/i18n/ui-strings.js | title": {
+    "message": "L̂íĝh́t̂h́ôúŝé Ûśêŕ F̂ĺôẃ R̂ép̂ór̂t́"
+  },
   "lighthouse-core/audits/accessibility/accesskeys.js | description": {
     "message": "Âćĉéŝś k̂éŷś l̂ét̂ úŝér̂ś q̂úîćk̂ĺŷ f́ôćûś â ṕâŕt̂ óf̂ t́ĥé p̂áĝé. F̂ór̂ ṕr̂óp̂ér̂ ńâv́îǵât́îón̂, éâćĥ áĉćêśŝ ḱêý m̂úŝt́ b̂é ûńîq́ûé. [L̂éâŕn̂ ḿôŕê](https://web.dev/accesskeys/)."
   },

package/lighthouse-core/lib/i18n/swap-flow-locale.js

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const swapLocale = require('./swap-locale.js');
+
+/**
+ * @param {LH.FlowResult} flowResult
+ * @param {LH.Locale} locale
+ */
+module.exports = function swapFlowLocale(flowResult, locale) {
+  const localizedFlowResult = JSON.parse(JSON.stringify(flowResult));
+  localizedFlowResult.steps = flowResult.steps.map(step => {
+    return {...step, lhr: swapLocale(step.lhr, locale).lhr};
+  });
+  return localizedFlowResult;
+};

package/lighthouse-core/lib/stack-packs.js

@@ -9,18 +9,6 @@ const log = require('lighthouse-logger');
 const stackPacks = require('lighthouse-stack-packs');
 const i18n = require('./i18n/i18n.js');
 
-/**
- * Resolve a module on web and node
- * @param {string} module
- */
-function resolve(module) {
-  if (!require.resolve) {
-    return `node_modules/${module}`;
-  }
-
-  return require.resolve(module);
-}
-
 /**
  * Pairs consisting of a stack pack's ID and the set of stacks needed to be
  * detected in a page to display that pack's advice.
@@ -87,7 +75,7 @@ function getStackPacks(pageStacks) {
 
     // Create i18n handler to get translated strings.
     const str_ = i18n.createMessageInstanceIdFn(
-      resolve(`lighthouse-stack-packs/packs/${matchedPack.id}`),
+      `node_modules/lighthouse-stack-packs/packs/${matchedPack.id}.js`,
       matchedPack.UIStrings
     );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.5.1-dev.20210928",
+  "version": "8.5.1-dev.20211002",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -9,7 +9,7 @@
     "smokehouse": "./lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=12.20.0 && 12.* || >=14.13 && 14.* || >=15"
   },
   "scripts": {
     "build-all": "npm-run-posix-or-windows build-all:task",
@@ -37,12 +37,12 @@
     "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
     "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
     "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms",
-    "test-clients": "yarn jest \"$PWD/clients/\"",
-    "test-viewer": "yarn unit-viewer && yarn jest lighthouse-viewer/test/viewer-test-pptr.js",
-    "test-treemap": "yarn unit-treemap && yarn jest lighthouse-treemap/test/treemap-test-pptr.js",
+    "test-clients": "yarn jest \"$PWD/clients/\" && yarn jest --testMatch=\"**/clients/test/**/*-test-pptr.js\"",
+    "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/lighthouse-viewer/**/*-test-pptr.js\"",
+    "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/lighthouse-treemap/**/*-test-pptr.js\"",
     "test-lantern": "bash lighthouse-core/scripts/test-lantern.sh",
     "test-legacy-javascript": "bash lighthouse-core/scripts/test-legacy-javascript.sh",
-    "test-docs": "yarn --cwd docs/recipes/auth && yarn jest docs/recipes/integration-test && yarn --cwd docs/recipes/custom-gatherer-puppeteer test",
+    "test-docs": "yarn --cwd docs/recipes/ test",
     "test-proto": "yarn compile-proto && yarn build-proto-roundtrip",
     "unit-core": "yarn jest \"lighthouse-core\"",
     "unit-cli": "yarn jest \"lighthouse-cli/\"",
@@ -50,8 +50,8 @@
     "unit-treemap": "yarn jest \"lighthouse-treemap/.*-test.js\"",
     "unit-viewer": "yarn jest \"lighthouse-viewer/.*-test.js\"",
     "unit-flow": "yarn jest \"flow-report/.*-test.[tj]s[x]?\"",
-    "unit": "yarn unit-core && yarn unit-cli && yarn unit-report && yarn unit-viewer && yarn unit-treemap && yarn unit-flow",
-    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit-core -- --ci && npm run unit-cli -- --ci && npm run unit-report -- --ci && npm run unit-viewer -- --ci && npm run unit-treemap -- --ci && npm run unit-flow -- --ci",
+    "unit": "yarn jest",
+    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run jest -- --ci",
     "core-unit": "yarn unit-core",
     "cli-unit": "yarn unit-cli",
     "viewer-unit": "yarn unit-viewer",
@@ -74,6 +74,7 @@
     "update:lantern-baseline": "node lighthouse-core/scripts/lantern/update-baseline-lantern-values.js",
     "update:sample-artifacts": "node lighthouse-core/scripts/update-report-fixtures.js",
     "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --config-path=./lighthouse-core/test/results/sample-config.js --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing",
+    "update:flow-sample-json": "node ./lighthouse-core/scripts/update-flow-fixtures.js",
     "update:test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh --reset-results",
     "test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh",
     "open-devtools": "bash lighthouse-core/scripts/open-devtools.sh",
@@ -88,7 +89,8 @@
     "serve-dist": "cd dist && python -m SimpleHTTPServer",
     "serve-gh-pages": "cd dist/gh-pages && python -m SimpleHTTPServer",
     "serve-treemap": "yarn serve-gh-pages",
-    "serve-viewer": "yarn serve-gh-pages"
+    "serve-viewer": "yarn serve-gh-pages",
+    "flow-report": "yarn build-report --flow && node ./lighthouse-core/scripts/build-test-flow-report.js"
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",

package/readme.md

@@ -52,7 +52,7 @@ The Chrome extension was available prior to Lighthouse being available in Chrome
 
 The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported. Users who want more advanced usage, or want to run Lighthouse in an automated fashion should use the Node CLI.
 
-_Lighthouse requires Node 12 LTS (12.x) or later._
+_Lighthouse requires Node 12 LTS (12.20) or later._
 
 **Installation**:
 

package/report/clients/psi.js

@@ -77,6 +77,7 @@ export function prepareLabData(LHResult, document) {
     reportLHR.categoryGroups,
     {environment: 'PSI', gatherMode: lhResult.gatherMode}
   );
+  perfCategoryEl.append(dom.createComponent('styles'));
 
   const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
   scoreGaugeEl.remove();

package/report/test/clients/psi-test.js

@@ -67,8 +67,6 @@ describe('PSI', () => {
         // Check that the report exists and has some content.
         assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
         assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
-        assert.ok(!result.perfCategoryEl.outerHTML.includes('lh-permalink'),
-            'PSI\'s perfCategory HTML doesn\'t include a lh-permalink element');
         // Assume using default locale.
         const title = result.perfCategoryEl.querySelector('.lh-audit-group--metrics')
           .querySelector('.lh-audit-group__title').textContent;
@@ -83,7 +81,8 @@ describe('PSI', () => {
 
         assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
         assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
-        assert.ok(!result.perfCategoryEl.outerHTML.includes('lh-permalink'),
+        // styles for .lh-permalink are ok, but not the HTML
+        assert.ok(!result.perfCategoryEl.outerHTML.includes('class="lh-permalink'),
             'PSI\'s perfCategory HTML doesn\'t include a lh-permalink element');
 
         assert.equal(typeof result.finalScreenshotDataUri, 'string');

package/report/test/renderer/report-renderer-axe-test.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/* eslint-env jest */
+
+import jsdom from 'jsdom';
+
+import {Util} from '../../renderer/util.js';
+import {DOM} from '../../renderer/dom.js';
+import {DetailsRenderer} from '../../renderer/details-renderer.js';
+import {CategoryRenderer} from '../../renderer/category-renderer.js';
+import {ReportRenderer} from '../../renderer/report-renderer.js';
+import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
+
+describe('ReportRendererAxe', () => {
+  describe('with aXe', () => {
+    let axe;
+    let renderer;
+    let sampleResults;
+
+    beforeAll(async () => {
+      const {window} = new jsdom.JSDOM();
+      const dom = new DOM(window.document);
+      const detailsRenderer = new DetailsRenderer(dom);
+      const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
+      renderer = new ReportRenderer(dom, categoryRenderer);
+      sampleResults = Util.prepareReportResult(sampleResultsOrig);
+
+      // Needed by axe-core
+      // https://github.com/dequelabs/axe-core/blob/581c441c/doc/examples/jsdom/test/a11y.js#L24
+      global.window = global.self = window;
+      global.Node = global.self.Node;
+      global.Element = global.self.Element;
+
+      // axe-core must be imported after the global polyfills
+      axe = (await import('axe-core')).default;
+    });
+
+    afterAll(() => {
+      global.window = undefined;
+      global.Node = undefined;
+      global.Element = undefined;
+    });
+
+    it('renders without axe violations', () => {
+      const container = renderer._dom._document.createElement('main');
+      const output = renderer.renderReport(sampleResults, container);
+
+      renderer._dom._document.body.appendChild(container);
+
+      const config = {
+        rules: {
+          // Reports may have duplicate ids
+          // https://github.com/GoogleChrome/lighthouse/issues/9432
+          'duplicate-id': {enabled: false},
+          'duplicate-id-aria': {enabled: false},
+          'landmark-no-duplicate-contentinfo': {enabled: false},
+          // The following rules are disable for axe-core + jsdom compatibility
+          // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#to-run-the-example
+          'color-contrast': {enabled: false},
+          'link-in-text-block': {enabled: false},
+          // Report has empty links prior to i18n-ing.
+          'link-name': {enabled: false},
+          // May not be a real issue. https://github.com/dequelabs/axe-core/issues/2958
+          'nested-interactive': {enabled: false},
+        },
+      };
+
+      return new Promise(resolve => {
+        axe.run(output, config, (error, {violations}) => {
+          expect(error).toBeNull();
+          expect(violations).toEqual([]);
+          resolve();
+        });
+      });
+      // This test takes 40s on fast hardware, and 50-60s on GHA.
+      // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
+    },
+    /* timeout= */ 100 * 1000
+    );
+  });
+});