feat: add Lighthouse runner extension

__snapshots__/lighthouse-e2e.test.ts.js

@@ -1,5 +1,5 @@
 exports[
-  'Lighthouse stringify Puppeteer script generates a valid desktop flow report 1'
+  'Lighthouse user flow via stringify generates a valid desktop flow report 1'
 ] = `
 const fs = require('fs');
 const puppeteer = require('puppeteer'); // v13.0.0 or later

package.json

@@ -72,11 +72,15 @@
     "typescript": "4.6.4"
   },
   "peerDependencies": {
-    "puppeteer": ">=16.2.0"
+    "puppeteer": ">=16.2.0",
+    "lighthouse": ">=10.0.0"
   },
   "peerDependenciesMeta": {
     "puppeteer": {
       "optional": true
+    },
+    "lighthouse": {
+      "optional": true
     }
   },
   "dependencies": {

src/lighthouse/LighthouseRunnerExtension.ts

@@ -0,0 +1,80 @@
+/**
+    Copyright 2022 Google LLC
+
+    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
+
+        https://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.
+ */
+
+import { PuppeteerRunnerExtension } from '../PuppeteerRunnerExtension.js';
+import type { Step, UserFlow } from '../Schema.js';
+import { isMobileFlow, isNavigationStep } from './helpers.js';
+
+// @ts-expect-error Lighthouse doesn't expose types.
+import desktopConfig from 'lighthouse/core/config/desktop-config.js';
+// @ts-expect-error Lighthouse doesn't expose types.
+import { startFlow } from 'lighthouse/core/fraggle-rock/api.js';
+import FlowResult from 'lighthouse/types/lhr/flow';
+
+export class LighthouseRunnerExtension extends PuppeteerRunnerExtension {
+  #isTimespanRunning = false;
+  #isNavigationRunning = false;
+  #lhFlow?: any;
+
+  async createFlowResult(): Promise<FlowResult> {
+    if (!this.#lhFlow) {
+      throw new Error('Cannot get flow result before running the flow');
+    }
+    return this.#lhFlow.createFlowResult();
+  }
+
+  override async beforeAllSteps(flow: UserFlow) {
+    await super.beforeAllSteps?.(flow);
+
+    this.#lhFlow = await startFlow(this.page, {
+      config: isMobileFlow(flow) ? undefined : desktopConfig,
+      flags: { screenEmulation: { disabled: true } },
+      name: flow.title,
+    });
+  }
+
+  override async beforeEachStep(step: Step, flow: UserFlow) {
+    await super.beforeEachStep?.(step, flow);
+    if (step.type === 'setViewport') return;
+
+    if (isNavigationStep(step)) {
+      if (this.#isTimespanRunning) {
+        await this.#lhFlow.endTimespan();
+        this.#isTimespanRunning = false;
+      }
+      await this.#lhFlow.startNavigation();
+      this.#isNavigationRunning = true;
+    } else if (!this.#isTimespanRunning) {
+      await this.#lhFlow.startTimespan();
+      this.#isTimespanRunning = true;
+    }
+  }
+
+  override async afterEachStep(step: Step, flow: UserFlow) {
+    if (this.#isNavigationRunning) {
+      await this.#lhFlow.endNavigation();
+      this.#isNavigationRunning = false;
+    }
+    await super.afterEachStep?.(step, flow);
+  }
+
+  override async afterAllSteps(flow: UserFlow) {
+    if (this.#isTimespanRunning) {
+      await this.#lhFlow.endTimespan();
+    }
+    await super.afterAllSteps?.(flow);
+  }
+}

src/lighthouse/LighthouseStringifyExtension.ts

@@ -19,25 +19,14 @@ import { PuppeteerStringifyExtension } from '../PuppeteerStringifyExtension.js';
 import type { LineWriter } from '../LineWriter.js';
 import type { Step, UserFlow } from '../Schema.js';
 
-function isNavigationStep(step: Step): boolean {
-  return Boolean(
-    step.type === 'navigate' ||
-      step.assertedEvents?.some((event) => event.type === 'navigation')
-  );
-}
+import { isNavigationStep, isMobileFlow } from './helpers.js';
 
 export class LighthouseStringifyExtension extends PuppeteerStringifyExtension {
   #isProcessingTimespan = false;
 
   override async beforeAllSteps(out: LineWriter, flow: UserFlow) {
     out.appendLine(`const fs = require('fs');`);
 
-    let isMobile = true;
-    for (const step of flow.steps) {
-      if (step.type !== 'setViewport') continue;
-      isMobile = step.isMobile;
-    }
-
     await super.beforeAllSteps(out, flow);
 
     const flags = {
@@ -46,7 +35,7 @@ export class LighthouseStringifyExtension extends PuppeteerStringifyExtension {
       },
     };
     out.appendLine(`const flags = ${JSON.stringify(flags)}`);
-    if (isMobile) {
+    if (isMobileFlow(flow)) {
       out.appendLine(`const config = undefined;`);
     } else {
       // eslint-disable-next-line max-len

src/lighthouse/helpers.ts

@@ -0,0 +1,33 @@
+/**
+    Copyright 2022 Google LLC
+
+    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
+
+        https://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.
+ */
+
+import type { Step, UserFlow } from '../Schema.js';
+
+export function isNavigationStep(step: Step): boolean {
+  return Boolean(
+    step.type === 'navigate' ||
+      step.assertedEvents?.some((event) => event.type === 'navigation')
+  );
+}
+
+export function isMobileFlow(flow: UserFlow): boolean {
+  for (const step of flow.steps) {
+    if (step.type === 'setViewport') {
+      return step.isMobile;
+    }
+  }
+  return false;
+}

src/main.ts

@@ -29,3 +29,4 @@ export { PuppeteerRunnerExtension } from './PuppeteerRunnerExtension.js';
 export { PuppeteerRunnerOwningBrowserExtension } from './PuppeteerRunnerExtension.js';
 export { PuppeteerStringifyExtension } from './PuppeteerStringifyExtension.js';
 export { LighthouseStringifyExtension } from './lighthouse/LighthouseStringifyExtension.js';
+export { LighthouseRunnerExtension } from './lighthouse/LighthouseRunnerExtension.js';