Create output report (html and json) doesn't work

[armancodv]

What does not work? When you run cy.lighthouse() everything works but no HTML or JSON report generates. But as soon as I add config config: { output: 'html' } (as third arguments or in cypress config) The test fails and throws:

CypressError: `cy.task('lighthouse')` failed with the following error:
> No browser artifacts are either provided or requested.
    at <unknown> (http://localhost:8080/__cypress/runner/cypress_runner.js:150983:78)
From previous event:
    at Context.task (http://localhost:8080/__cypress/runner/cypress_runner.js:150968:15)
    at wrapped (http://localhost:8080/__cypress/runner/cypress_runner.js:160602:43)
From Your Spec Code:
    at Context.eval (webpack://upp/../../node_modules/@cypress-audit/lighthouse/src/command-handler.js:46:0)

Hints:

• I tested in browser and headless
• I even tested in the current example of this library (cra-authenticated) and the result was the same
• I did everything as explained in https://mfrachet.github.io/cypress-audit/guides/lighthouse/reports.html#accessing-the-raw-reports

How to reproduce?

1. open cra-authenticated example of this repository

2. cypress.config.js -> update on('task')

     on("task", {
       lighthouse: lighthouse((lighthouseReport) => {
         console.log("---- Writing lighthouse report to disk ----");
   
         writeFile("lighthouse.html", lighthouseReport.report, (error) => {
           error ? console.log(error) : console.log("Report created successfully");
         });
       }),
       pa11y: pa11y(console.log.bind(console)),
     });

3. cypress.config.js -> add config to lighthouse object

   config: {
     output: 'html'
   }

   OR home.cy.js -> update cy.lighthouse

   cy.lighthouse({
     performance: 50,
     accessibility: 90,
     "best-practices": 50,
     seo: 50,
     pwa: 50,
   }, {}, {output: 'html'});

4. run e2e:audit:headless or e2e:audit
5. It fails with the following error

   CypressError: `cy.task('lighthouse')` failed with the following error:
   > No browser artifacts are either provided or requested.

Environment:

• OS: Mac OS M2
• Chrome version: 113.0.5672.126
• Cypress version: 12.12.0 and 10.3.0

[hernikplays]

I had this same problem, I had

 config: {
  output: 'html'
}

in my cypress.config.js and when I changed config key to options, it started to work.

options: {
   output: 'html'
}

[asmahler]

I'm also having this same issue as well. I tried even passing the args for lighthouse for the output and no luck.

[armancodv]

RESOLVED

This PR, #221 , has made updates to the documentation for report generation. To implement the changes, please use the code snippet provided below:

const thresholds = {
  /* ... */
};

const lighthouseOptions = {
  /* ... your lighthouse options */
};

const lighthouseConfig = {
  settings: { output: "html" },
  extends: "lighthouse:default",
  /* ... Alternatively, you could set your own lighthouse config */
};

cy.lighthouse(thresholds, lighthouseOptions, lighthouseConfig);

Link to updated Doc: https://github.com/mfrachet/cypress-audit/blob/master/packages/documentation/docs/guides/lighthouse/reports.md

I suggest updating this page as well: https://mfrachet.github.io/cypress-audit/guides/lighthouse/reports.html#generating-html-reports

PS: I can confirm @hernikplays 's solution also works.

[mark0203]

If I would only check the issues section sooner. Just wasted a couple of days trying to figure out what I'm doing wrong. This fixed it for me

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

I also like to add that I also had to replace (error : any) with (error) in fs.writeFile("lighthouse.html", lighthouseReport.report, (error) => {