Generating lighthouse html report using cypress

Question

I am trying to generate the lighthouse report in html format, but am unable to do so.

I am getting the following error:

Cannot find module 'lighthouse/lighthouse-core/report/report-generator'

I used the following link to configure my lighthouse test:-

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

Not sure, what is the error actually, I tried installing lighthouse again and again. Still, no luck.

npm install --save-dev lighthouse

This is the code I have tried:-

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

I had the same issue. I followed the path to the report-generator and noticed that "lighthouse-core" was not in the path. This worked for me:

const ReportGenerator = require('lighthouse/report/generator/report-generator');