javascriptpuppeteerlighthouse

Error while trying to run Lighthouse user flows


I am trying to replicate the example code from the lighthouse documentation (https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md) The code block I am interested in is complete user flow code.

import {writeFileSync} from 'fs';
import puppeteer from 'puppeteer';
import * as pptrTestingLibrary from 'pptr-testing-library';
import {startFlow} from 'lighthouse';

const {getDocument, queries} = pptrTestingLibrary;

async function search(page) {
  const $document = await getDocument(page);
  const $searchBox = await queries.getByLabelText($document, /type to search/i);
  await $searchBox.type('Xbox Series X');
  await Promise.all([
    $searchBox.press('Enter'),
    page.waitForNavigation({waitUntil: ['load', 'networkidle2']}),
  ]);
}

// Setup the browser and Lighthouse.
const browser = await puppeteer.launch();
const page = await browser.newPage();
const flow = await startFlow(page);

// Phase 1 - Navigate to the landing page.
await flow.navigate('https://www.bestbuy.com');

// Phase 2 - Interact with the page and submit the search form.
await flow.startTimespan();
await search(page);
await flow.endTimespan();

// Phase 3 - Analyze the new state.
await flow.snapshot();

// Phase 4 - Navigate to a detail page.
await flow.navigate(async () => {
  const $document = await getDocument(page);
  const $link = await queries.getByText($document, /Xbox Series X 1TB Console/);
  $link.click();
});

// Get the comprehensive flow report.
writeFileSync('report.html', await flow.generateReport());
// Save results as JSON.
writeFileSync('flow-result.json', JSON.stringify(await flow.createFlowResult(), null, 2));

// Cleanup.
await browser.close();

This gives me the following error: node:internal/process/esm_loader:108 internalBinding('errors').triggerUncaughtException( ^

TypeError: containerHandle.executionContext is not a function

I have tested my code and found that the issue is on the lines where I run queries.getByLabelText and queries.getByText. However, I am not sure how to proceed from here. I am using lighthouse: 11.3.0, puppeteer: 21.5.1, and pptr-testing-library: 0.7.0. My package.json file is listed below in case it is relevant.

{
  "type": "module",
  "devDependencies": {
    "lighthouse": "^11.3.0",
    "pptr-testing-library": "^0.7.0"
  },
  "dependencies": {
    "puppeteer": "^21.5.1"
  }
}

I have also tried using other methods such as getByPlaceholderText to get the specified textbox from the webpage, but these give me the same error.


Solution

  • I've been having the same problem when using puppeteer with jest. It stems from the fact that pptr-testing-library is not maintained anymore (last commit on github dates back to 2021) so it is not compatible with the breaking changes introduced in puppeteer v21. The only solution here is to downgrade puppeteer to version 20.8.0 : npm install --save puppeteer@20.8.0