javascript - 尝试运行 Lighthouse 用户流程时出错

Question

我正在尝试复制灯塔文档中的示例代码( https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md ) 我感兴趣的代码块是完整的用户流程代码。

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();

这给了我以下错误: 节点:内部/进程/esm_loader:108 InternalBinding('错误').triggerUncaughtException( ^

类型错误:containerHandle.executionContext 不是函数

我测试了我的代码，发现问题出在我运行querys.getByLabelText 和queries.getByText 的行上。但是，我不确定如何从这里继续。我正在使用 lighthouse:11.3.0、puppeteer:21.5.1 和 pptr-testing-library:0.7.0。下面列出了我的 package.json 文件，以防相关。

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

我还尝试使用其他方法(例如 getByPlaceholderText)从网页获取指定的文本框，但这些方法给了我同样的错误。

Answer 1

我在使用 puppeteer 和 jest 时遇到了同样的问题。这是因为 pptr-testing-library 不再维护(github 上的最后一次提交可以追溯到 2021 年)，因此它与 puppeteer v21 中引入的重大更改不兼容。这里唯一的解决方案是将 puppeteer 降级到版本 20.8.0 :npm install --save <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27575257574253424255671517091f0917" rel="noreferrer noopener nofollow">[email protected]</a>