Generating lighthouse html report using cypress

Viewed 1265

I am trying to generate the lighthouse report in html format. But, I am unable to do. I am getting below error:-

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

I used below link to do configuration for 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

Can anyone help me out here?

Below is the code snippet 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(),
  });
};
3 Answers

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

At a quick glance, it looks like you missed the step to install lighthouse

From npm - Lighthouse

Installation:

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

So the above are global install commands - but you have used local install.

Not sure if global is necessary, or why, but it's the instruction given.

The correct path is this, it worked for me:

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