使用 cypress 生成 lighthouse html 报告

Question

我正在尝试生成 html 格式的灯塔报告，但无法这样做。

我收到以下错误：

找不到模块“lighthouse/lighthouse-core/report/report-generator”

我使用以下链接来配置我的灯塔测试：-

https://atomfrede.gitlab.io/2021/04/automated-frontend-perfomance-test-with-lighthouse-for-jhipster/

不确定，实际上是什么错误，我一次又一次尝试安装灯塔。尽管如此，还是没有运气。

npm install --save-dev lighthouse

这是我尝试过的代码：-

const { lighthouse, pa11y, prepareAudit } = require('cypress-audit');
const fs = require('fs');
const ReportGenerator = require('lighthouse/lighthouse-core/report/report-generator');

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {

    prepareAudit(launchOptions);
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.args.push('--disable-gpu');
      return launchOptions;
    }
  });

  on('task', {
    lighthouse: lighthouse((lighthouseReport) => {
      fs.writeFileSync('build/cypress/lhreport.html', 
         ReportGenerator.generateReport(lighthouseReport.lhr, 'html'));
    }),
    pa11y: pa11y(),
  });
};

Answer 1

乍一看，你好像错过了安装灯塔的步骤

来自npm - 灯塔

安装：

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

所以上面是全局安装命令 - 但您使用了本地安装。

不确定 global 是否必要，或者为什么，但这是给出的说明。