CODEWITHSUNDEEP
htmlcypresslighthouse
avidCoder
avidCoder

Reputation: 490

Generating lighthouse html report using cypress

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

Upvotes: 4

Views: 3475

Answers (4)

albciff
albciff

Reputation: 18507

Path for ReportGenerator seems to change over time, from 'lighthouse/lighthouse-core/report/report-generator' to 'lighthouse/report/report-generator'.

However at least in the current last @cypress-audit/ligthouse version 1.4.2 which depends on lightouse ^10.0.2, seems that importing this way doesn't work (event changing the path). Anyway to generate the report in html is not even necessary to user ReportGenerator it's possible to do it configuring lighthouse output options as in documentation explains:

In cypress/plugins/index.js, using fs save the automatically generated report:

const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
const fs = require("fs");

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, launchOptions) => {
    prepareAudit(launchOptions);
  });

  on("task", {
    lighthouse: lighthouse((lighthouseReport) => {
      console.log("---- Writing lighthouse report to disk ----");

      fs.writeFile("lighthouse.html", lighthouseReport.report, (error: any) => {
        error ? console.log(error) : console.log("Report created successfully");
      });
    }),
  });
};

And configure the html as output when cy.lighthouse is called. This is a random configuration, the important part is the settings: { output : "html" } part:

const thresholds = {
  "performance": 50,
  "accessibility": 50,
  "best-practices": 50,
  "seo": 50
}

const lighthouseOptions = {
  formFactor: 'desktop',
  screenEmulation: { disabled: true },
}

  const lighthouseConfig = {
  settings: { output: "html" },
  extends: "lighthouse:default",
}

cy.lighthouse(thresholds, lighthouseOptions, lighthouseConfig);

Additionally add the dependencies in package.json:

{
  "scripts": {
    "cy:run": "cypress run --browser chrome"
  },
  "devDependencies": {
    "cypress": "13.5.1",
    "@cypress-audit/lighthouse": "1.4.2",
  }
}

And add cypress/plugins/index.js in cypress.config.js:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  chromeWebSecurity: false,
  video: false,
  e2e: {
    setupNodeEvents(on, config) {
        return require('./cypress/plugins/index.js')(on, config)
    },
  }
});

Upvotes: 0

Lerry Alexander Ortiz Salazar
Lerry Alexander Ortiz Salazar

Reputation: 1

The correct path is this, it worked for me:

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

Upvotes: 0

user16979068
user16979068

Reputation: 21

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

Upvotes: 2

Leta Waldergrave
Leta Waldergrave

Reputation: 679

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.

Upvotes: 9

Related Questions