feat: support stringifying flows for Firefox (#845)

__snapshots__/LighthouseStringifyExtension.test.ts.js

@@ -1,6 +1,6 @@
 exports['LighthouseStringifyExtension handles ending timespan 1'] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -58,7 +58,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 
 exports['LighthouseStringifyExtension handles ending navigation 1'] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -130,7 +130,7 @@ exports[
   'LighthouseStringifyExtension handles multiple sequential navigations 1'
 ] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();

__snapshots__/PuppeteerStringifyExtension.test.ts.js

@@ -88,3 +88,15 @@ exports[
 }
 
 `;
+
+exports['PuppeteerStringifyExtension Firefox should stringify 1'] = `
+const puppeteer = require('puppeteer'); // v23.0.0 or later
+
+(async () => {
+  const browser = await puppeteer.launch({browser: 'firefox'});
+  const page = await browser.newPage();
+  const timeout = 5000;
+  page.setDefaultTimeout(timeout);
+
+
+`;

__snapshots__/lighthouse.test.ts.js

@@ -2,7 +2,7 @@ exports[
   'Lighthouse user flow run via stringify produces a valid desktop flow report 1'
 ] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();

__snapshots__/stringify.test.ts.js

@@ -1,5 +1,5 @@
 exports['stringify should print the correct script for a navigate step 1'] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -25,7 +25,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 exports[
   'stringify should print the correct script for a emulateNetworkCondition step 1'
 ] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -56,7 +56,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 exports[
   'stringify should print the correct script if the target is not the main page 1'
 ] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -91,7 +91,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 `;
 
 exports['stringify should use step and flow timeouts 1'] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -129,7 +129,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 exports[
   'stringify should print the correct script if the step is within an iframe 1'
 ] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -165,7 +165,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 `;
 
 exports['stringify should print the correct script for a keydown step 1'] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -189,7 +189,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 `;
 
 exports['stringify should print the correct script for a keyup step 1'] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -213,7 +213,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 `;
 
 exports['stringify should print the correct script for scroll events 1'] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -247,7 +247,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 exports[
   'stringify should print the correct script for waitForElement steps 1'
 ] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -405,7 +405,7 @@ const puppeteer = require('puppeteer'); // v22.0.0 or later
 exports[
   'stringify should print the correct script for waitForExpression steps 1'
 ] = `
-const puppeteer = require('puppeteer'); // v22.0.0 or later
+const puppeteer = require('puppeteer'); // v23.0.0 or later
 
 (async () => {
   const browser = await puppeteer.launch();

src/PuppeteerStringifyExtension.ts

@@ -44,16 +44,30 @@ import {
 } from './SchemaUtils.js';
 import { formatJSONAsJS } from './JSONUtils.js';
 
+type TargetBrowser = 'chrome' | 'firefox';
+
 export class PuppeteerStringifyExtension extends StringifyExtension {
   #shouldAppendWaitForElementHelper = false;
+  #targetBrowser: TargetBrowser;
+
+  constructor(targetBrowser: TargetBrowser = 'chrome') {
+    super();
+    this.#targetBrowser = targetBrowser;
+  }
 
   override async beforeAllSteps(out: LineWriter, flow: UserFlow) {
     out.appendLine(
-      "const puppeteer = require('puppeteer'); // v22.0.0 or later"
+      "const puppeteer = require('puppeteer'); // v23.0.0 or later"
     );
     out.appendLine('');
     out.appendLine('(async () => {').startBlock();
-    out.appendLine('const browser = await puppeteer.launch();');
+    if (this.#targetBrowser === 'firefox') {
+      out.appendLine(
+        `const browser = await puppeteer.launch({browser: 'firefox'});`
+      );
+    } else {
+      out.appendLine('const browser = await puppeteer.launch();');
+    }
     out.appendLine('const page = await browser.newPage();');
     out.appendLine(`const timeout = ${flow.timeout || defaultTimeout};`);
     out.appendLine('page.setDefaultTimeout(timeout);');

test/PuppeteerStringifyExtension.test.ts

@@ -95,4 +95,23 @@ describe('PuppeteerStringifyExtension', () => {
     await ext.stringifyStep(writer, step, flow);
     snapshot(writer.toString());
   });
+
+  describe('Firefox', () => {
+    const ext = new PuppeteerStringifyExtension('firefox');
+
+    it('should stringify', async () => {
+      const step = {
+        type: StepType.Click as const,
+        target: 'main',
+        selectors: ['aria/Test'],
+        offsetX: 1,
+        offsetY: 1,
+      };
+      const flow = { title: 'test', steps: [step] };
+
+      const writer = new InMemoryLineWriter('  ');
+      await ext.beforeAllSteps(writer, flow);
+      snapshot(writer.toString());
+    });
+  });
 });