lighthouse 9.5.0-dev.20221018 → 9.5.0-dev.20221019

package/core/api.js

@@ -13,36 +13,40 @@ import {Runner} from './runner.js';
 
 /**
  * @param {LH.Puppeteer.Page} page
- * @param {ConstructorParameters<LH.UserFlow>[1]} [options]
+ * @param {LH.UserFlow.Options} [options]
  */
 async function startFlow(page, options) {
   return new UserFlow(page, options);
 }
 
 /**
- * @param  {Parameters<navigationGather>} params
+ * @param {LH.Puppeteer.Page|undefined} page
+ * @param {LH.NavigationRequestor|undefined} requestor
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<LH.RunnerResult|undefined>}
  */
-async function navigation(...params) {
-  const gatherResult = await navigationGather(...params);
+async function navigation(page, requestor, options) {
+  const gatherResult = await navigationGather(page, requestor, options);
   return Runner.audit(gatherResult.artifacts, gatherResult.runnerOptions);
 }
 
 /**
- * @param  {Parameters<snapshotGather>} params
+ * @param {LH.Puppeteer.Page} page
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<LH.RunnerResult|undefined>}
  */
-async function snapshot(...params) {
-  const gatherResult = await snapshotGather(...params);
+async function snapshot(page, options) {
+  const gatherResult = await snapshotGather(page, options);
   return Runner.audit(gatherResult.artifacts, gatherResult.runnerOptions);
 }
 
 /**
- * @param  {Parameters<startTimespanGather>} params
+ * @param {LH.Puppeteer.Page} page
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<{endTimespan: () => Promise<LH.RunnerResult|undefined>}>}
  */
-async function startTimespan(...params) {
-  const {endTimespanGather} = await startTimespanGather(...params);
+async function startTimespan(page, options) {
+  const {endTimespanGather} = await startTimespanGather(page, options);
   const endTimespan = async () => {
     const gatherResult = await endTimespanGather();
     return Runner.audit(gatherResult.artifacts, gatherResult.runnerOptions);

package/core/audits/accessibility/bypass.js

@@ -36,6 +36,7 @@ class Bypass extends AxeAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
       requiredArtifacts: ['Accessibility'],
     };
   }

package/core/audits/accessibility/th-has-data-cells.js

@@ -38,6 +38,7 @@ class THHasDataCells extends AxeAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
       requiredArtifacts: ['Accessibility'],
     };
   }

package/core/audits/accessibility/video-caption.js

@@ -36,6 +36,7 @@ class VideoCaption extends AxeAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
       requiredArtifacts: ['Accessibility'],
     };
   }

package/core/gather/navigation-runner.js

@@ -300,11 +300,12 @@ async function _cleanup({requestedUrl, driver, config}) {
 }
 
 /**
+ * @param {LH.Puppeteer.Page|undefined} page
  * @param {LH.NavigationRequestor|undefined} requestor
- * @param {{page?: LH.Puppeteer.Page, config?: LH.Config.Json, flags?: LH.Flags}} options
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<LH.Gatherer.FRGatherResult>}
  */
-async function navigationGather(requestor, options) {
+async function navigationGather(page, requestor, options = {}) {
   const {flags = {}} = options;
   log.setLevel(flags.logLevel || 'error');
 
@@ -316,7 +317,6 @@ async function navigationGather(requestor, options) {
   const runnerOptions = {config, computedCache};
   const artifacts = await Runner.gather(
     async () => {
-      let {page} = options;
       const normalizedRequestor = isCallback ? requestor : UrlUtils.normalizeUrl(requestor);
 
       // For navigation mode, we shouldn't connect to a browser in audit mode,

package/core/gather/snapshot-runner.js

@@ -13,11 +13,12 @@ import {initializeConfig} from '../config/config.js';
 import {getBaseArtifacts, finalizeArtifacts} from './base-artifacts.js';
 
 /**
- * @param {{page: LH.Puppeteer.Page, config?: LH.Config.Json, flags?: LH.Flags}} options
+ * @param {LH.Puppeteer.Page} page
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<LH.Gatherer.FRGatherResult>}
  */
-async function snapshotGather(options) {
-  const {page, flags = {}} = options;
+async function snapshotGather(page, options = {}) {
+  const {flags = {}} = options;
   log.setLevel(flags.logLevel || 'error');
 
   const {config} = await initializeConfig('snapshot', options.config, flags);

package/core/gather/timespan-runner.js

@@ -14,11 +14,12 @@ import {initializeConfig} from '../config/config.js';
 import {getBaseArtifacts, finalizeArtifacts} from './base-artifacts.js';
 
 /**
- * @param {{page: LH.Puppeteer.Page, config?: LH.Config.Json, flags?: LH.Flags}} options
+ * @param {LH.Puppeteer.Page} page
+ * @param {{config?: LH.Config.Json, flags?: LH.Flags}} [options]
  * @return {Promise<{endTimespanGather(): Promise<LH.Gatherer.FRGatherResult>}>}
  */
-async function startTimespanGather(options) {
-  const {page, flags = {}} = options;
+async function startTimespanGather(page, options = {}) {
+  const {flags = {}} = options;
   log.setLevel(flags.logLevel || 'error');
 
   const {config} = await initializeConfig('timespan', options.config, flags);

package/core/index.js

@@ -40,7 +40,7 @@ import {initializeConfig} from './config/config.js';
  * @return {Promise<LH.RunnerResult|undefined>}
  */
 async function lighthouse(url, flags = {}, configJSON, page) {
-  return fraggleRock.navigation(url, {page, config: configJSON, flags});
+  return fraggleRock.navigation(page, url, {config: configJSON, flags});
 }
 
 /**

package/core/legacy/config/config.js

@@ -128,29 +128,6 @@ function assertValidGatherer(gathererInstance, gathererName) {
   }
 }
 
-
-/**
- * Validate the LH.Flags
- * @param {LH.Flags} flags
- */
-function assertValidFlags(flags) {
-  // COMPAT: compatibility layer for devtools as it uses the old way and we need tests to pass
-  // TODO(paulirish): remove this from LH once emulation refactor has rolled into DevTools
-  // @ts-expect-error Deprecated flag
-  if (flags.channel === 'devtools' && flags.internalDisableDeviceScreenEmulation) {
-    // @ts-expect-error Deprecated flag
-    flags.formFactor = flags.emulatedFormFactor;
-    // @ts-expect-error Deprecated flag
-    flags.emulatedFormFactor = flags.internalDisableDeviceScreenEmulation = undefined;
-  }
-
-
-  // @ts-expect-error Checking for removed flags
-  if (flags.emulatedFormFactor || flags.internalDisableDeviceScreenEmulation) {
-    throw new Error('Invalid emulation flag. Emulation configuration changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/main/docs/emulation.md');
-  }
-}
-
 /**
  * @implements {LH.Config.Config}
  */
@@ -193,9 +170,6 @@ class Config {
     // Validate and merge in plugins (if any).
     configJSON = await mergePlugins(configJSON, configDir, flags);
 
-    if (flags) {
-      assertValidFlags(flags);
-    }
     const settings = resolveSettings(configJSON.settings || {}, flags);
 
     // Augment passes with necessary defaults and require gatherers.

package/core/user-flow.js

@@ -11,21 +11,18 @@ import {navigationGather} from './gather/navigation-runner.js';
 import {Runner} from './runner.js';
 import {initializeConfig} from './config/config.js';
 
-/** @typedef {Parameters<snapshotGather>[0]} FrOptions */
-/** @typedef {Omit<FrOptions, 'page'> & {name?: string}} UserFlowOptions */
-/** @typedef {Omit<FrOptions, 'page'> & {stepName?: string}} StepOptions */
 /** @typedef {WeakMap<LH.UserFlow.GatherStep, LH.Gatherer.FRGatherResult['runnerOptions']>} GatherStepRunnerOptions */
 
 class UserFlow {
   /**
-   * @param {FrOptions['page']} page
-   * @param {UserFlowOptions=} options
+   * @param {LH.Puppeteer.Page} page
+   * @param {LH.UserFlow.Options} [options]
    */
   constructor(page, options) {
-    /** @type {FrOptions} */
-    this.options = {page, ...options};
-    /** @type {string|undefined} */
-    this.name = options?.name;
+    /** @type {LH.Puppeteer.Page} */
+    this._page = page;
+    /** @type {LH.UserFlow.Options|undefined} */
+    this._options = options;
     /** @type {LH.UserFlow.GatherStep[]} */
     this._gatherSteps = [];
     /** @type {GatherStepRunnerOptions} */
@@ -33,67 +30,37 @@ class UserFlow {
   }
 
   /**
-   * @param {string} longUrl
-   * @returns {string}
+   * @param {LH.UserFlow.StepFlags} [flags]
+   * @return {LH.UserFlow.StepFlags}
    */
-  _shortenUrl(longUrl) {
-    const url = new URL(longUrl);
-    return `${url.hostname}${url.pathname}`;
-  }
+  _getNextNavigationFlags(flags) {
+    const newStepFlags = {...flags};
 
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {string}
-   */
-  _getDefaultStepName(artifacts) {
-    const shortUrl = this._shortenUrl(artifacts.URL.finalDisplayedUrl);
-    switch (artifacts.GatherContext.gatherMode) {
-      case 'navigation':
-        return `Navigation report (${shortUrl})`;
-      case 'timespan':
-        return `Timespan report (${shortUrl})`;
-      case 'snapshot':
-        return `Snapshot report (${shortUrl})`;
-    }
-  }
-
-  /**
-   * @param {StepOptions=} stepOptions
-   */
-  _getNextNavigationOptions(stepOptions) {
-    const options = {...this.options, ...stepOptions};
-    const flags = {...options.flags};
-
-    if (flags.skipAboutBlank === undefined) {
-      flags.skipAboutBlank = true;
+    if (newStepFlags.skipAboutBlank === undefined) {
+      newStepFlags.skipAboutBlank = true;
     }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
     const isSubsequentNavigation = this._gatherSteps
       .some(step => step.artifacts.GatherContext.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
-      if (flags.disableStorageReset === undefined) {
-        flags.disableStorageReset = true;
+      if (newStepFlags.disableStorageReset === undefined) {
+        newStepFlags.disableStorageReset = true;
       }
     }
 
-    options.flags = flags;
-
-    return options;
+    return newStepFlags;
   }
 
   /**
    *
    * @param {LH.Gatherer.FRGatherResult} gatherResult
-   * @param {StepOptions} options
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  _addGatherStep(gatherResult, options) {
-    const providedName = options?.stepName;
+  _addGatherStep(gatherResult, flags) {
     const gatherStep = {
       artifacts: gatherResult.artifacts,
-      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
-      config: options.config,
-      flags: options.flags,
+      flags,
     };
     this._gatherSteps.push(gatherStep);
     this._gatherStepRunnerOptions.set(gatherStep, gatherResult.runnerOptions);
@@ -101,23 +68,26 @@ class UserFlow {
 
   /**
    * @param {LH.NavigationRequestor} requestor
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async navigate(requestor, stepOptions) {
+  async navigate(requestor, flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = this._getNextNavigationOptions(stepOptions);
-    const gatherResult = await navigationGather(requestor, options);
+    const newStepFlags = this._getNextNavigationFlags(flags);
+    const gatherResult = await navigationGather(this._page, requestor, {
+      config: this._options?.config,
+      flags: newStepFlags,
+    });
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, newStepFlags);
   }
 
   /**
    * This is an alternative to `navigate()` that can be used to analyze a navigation triggered by user interaction.
    * For more on user triggered navigations, see https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md#triggering-a-navigation-via-user-interactions.
    *
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [stepOptions]
    */
   async startNavigation(stepOptions) {
     /** @type {(value: () => void) => void} */
@@ -166,39 +136,43 @@ class UserFlow {
   }
 
   /**
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async startTimespan(stepOptions) {
+  async startTimespan(flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = {...this.options, ...stepOptions};
-    const timespan = await startTimespanGather(options);
-    this.currentTimespan = {timespan, options};
+    const timespan = await startTimespanGather(this._page, {
+      config: this._options?.config,
+      flags: flags,
+    });
+    this.currentTimespan = {timespan, flags};
   }
 
   async endTimespan() {
     if (!this.currentTimespan) throw new Error('No timespan in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const {timespan, options} = this.currentTimespan;
+    const {timespan, flags} = this.currentTimespan;
     const gatherResult = await timespan.endTimespanGather();
     this.currentTimespan = undefined;
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, flags);
   }
 
   /**
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async snapshot(stepOptions) {
+  async snapshot(flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = {...this.options, ...stepOptions};
-    const gatherResult = await snapshotGather(options);
+    const gatherResult = await snapshotGather(this._page, {
+      config: this._options?.config,
+      flags: flags,
+    });
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, flags);
   }
 
   /**
@@ -206,8 +180,8 @@ class UserFlow {
    */
   async createFlowResult() {
     return auditGatherSteps(this._gatherSteps, {
-      name: this.name,
-      config: this.options.config,
+      name: this._options?.name,
+      config: this._options?.config,
       gatherStepRunnerOptions: this._gatherStepRunnerOptions,
     });
   }
@@ -226,11 +200,38 @@ class UserFlow {
   createArtifactsJson() {
     return {
       gatherSteps: this._gatherSteps,
-      name: this.name,
+      name: this._options?.name,
     };
   }
 }
 
+/**
+ * @param {string} longUrl
+ * @returns {string}
+ */
+function shortenUrl(longUrl) {
+  const url = new URL(longUrl);
+  return `${url.hostname}${url.pathname}`;
+}
+
+/**
+ * @param {LH.Artifacts} artifacts
+ * @return {string}
+ */
+function getDefaultStepName(artifacts) {
+  const shortUrl = shortenUrl(artifacts.URL.finalDisplayedUrl);
+  switch (artifacts.GatherContext.gatherMode) {
+    case 'navigation':
+      return `Navigation report (${shortUrl})`;
+    case 'timespan':
+      return `Timespan report (${shortUrl})`;
+    case 'snapshot':
+      return `Snapshot report (${shortUrl})`;
+    default:
+      throw new Error('Unsupported gather mode');
+  }
+}
+
 /**
  * @param {Array<LH.UserFlow.GatherStep>} gatherSteps
  * @param {{name?: string, config?: LH.Config.Json, gatherStepRunnerOptions?: GatherStepRunnerOptions}} options
@@ -243,14 +244,15 @@ async function auditGatherSteps(gatherSteps, options) {
   /** @type {LH.FlowResult['steps']} */
   const steps = [];
   for (const gatherStep of gatherSteps) {
-    const {artifacts, name, flags} = gatherStep;
+    const {artifacts, flags} = gatherStep;
+    const name = flags?.name || getDefaultStepName(artifacts);
 
     let runnerOptions = options.gatherStepRunnerOptions?.get(gatherStep);
 
     // If the gather step is not active, we must recreate the runner options.
     if (!runnerOptions) {
       // Step specific configs take precedence over a config for the entire flow.
-      const configJson = gatherStep.config || options.config;
+      const configJson = options.config;
       const {gatherMode} = artifacts.GatherContext;
       const {config} = await initializeConfig(gatherMode, configJson, flags);
       runnerOptions = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20221018",
+  "version": "9.5.0-dev.20221019",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/report/test/generator/report-generator-test.js

@@ -95,7 +95,7 @@ describe('ReportGenerator', () => {
 
 category,score
 \\"performance\\",\\"0.26\\"
-\\"accessibility\\",\\"0.78\\"
+\\"accessibility\\",\\"0.77\\"
 \\"best-practices\\",\\"0.27\\"
 \\"seo\\",\\"0.67\\"
 \\"pwa\\",\\"0.33\\"

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

@@ -296,7 +296,7 @@ describe('CategoryRenderer', () => {
       );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
-      assert.equal(gauge.textContent.trim(), '13/18', 'fraction is included');
+      assert.equal(gauge.textContent.trim(), '12/17', 'fraction is included');
 
       const score = categoryDOM.querySelector('.lh-category-header');
       const title = score.querySelector('.lh-fraction__label');

package/types/user-flow.d.ts

@@ -6,11 +6,18 @@ declare module UserFlow {
     name?: string;
   }
 
+  export interface Options {
+    config: LH.Config.Json;
+    name?: string;
+  }
+
+  export interface StepFlags extends LH.Flags {
+    name?: string;
+  }
+
   export interface GatherStep {
     artifacts: LH.Artifacts;
-    name: string;
-    config?: LH.Config.Json;
-    flags?: LH.Flags;
+    flags?: StepFlags;
   }
 }