Generating light house report to json

[vrknetha]

Is it possible to save the lighthouse results in a JSON format? The raw report does not solve the case as there is too much information to look into.

[sarathk-blink]

Im Looking for help here too ... Can someone help us out

[vrknetha]

https://github.com/vrknetha/cypress-lighthouse

Use the implementation in plugins/index.js

[sarathk-blink]

@vrknetha - Thank you so much :) Also need some help with something else.. Im trying to convert this JSON into google lighthouse format HTML report, Any idea on how to do that,

Here's my current scenario:

1. Im able to run Cypress lighthouse performance testing using the Cypress-audit plugin.
2. I can run the perf testing and also able to create a json file. ( Since this plugin doesn't bother about report generation, it only runs tests).
3. Now that I'm able to store the results into the Json file, Im looking to convert into a viewable report.

Appreciate if you can throw in some light.

[mfrachet]

Have you tried https://github.com/mfrachet/cypress-audit#accessing-the-raw-reports ?

[vrknetha]

@vrknetha - Thank you so much :) Also need some help with something else.. Im trying to convert this JSON into google lighthouse format HTML report, Any idea on how to do that,

Here's my current scenario:

1. Im able to run Cypress lighthouse performance testing using the Cypress-audit plugin.

2. I can run the perf testing and also able to create a json file. ( Since this plugin doesn't bother about report generation, it only runs tests).

3. Now that I'm able to store the results into the Json file, Im looking to convert into a viewable report.

Appreciate if you can throw in some light.

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

const html = ReportGenerator.generateReport(report.lhr, 'html')

[sarathk-blink]

@vrknetha :) I Just found that report-generator github repository as I was looking online.... and was able to integrate into my code.

Your example really helped what exactly to look for in the code. Thank you very very much .

[sarathk-blink]

@mfrachet - thank you very much for pitching in to help. Yes I did try that earlier and it did help me validate the HTML report, so big thanks again.

[juanduarte1927]

I can generate de JSON file, but that JSON just has the last page launched... I launch differents urls in the test cases... But the file just has the last page launched... Someone can help me? To finish, I can´t generate the HTML file. I'm trying to follow the steps in the docs, but is not working. index.js

_`**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) => { fs.writeFile("lighthouse.json", lighthouseReport.report, (error) => { error ? console.log(error) : console.log("Report created successfully"); }); }),`**_

spec file `**_scenarios.spec.jsimport urls from '../../fixtures/urls.json';

let count = 0;

describe('Lighthouse Accesibility Score ', () => {

urls.forEach(url => { it('Mobile Lighthouse report: ' + urls[count], function () {

const thresholds = { accessibility: 95, }; const lighthouseOptions = { formFactor: 'mobile', }; cy.visit(url); cy.lighthouse(thresholds, lighthouseOptions); });

it('Desktop Lighthouse report: ' + urls[count], function () { const desktopConfig = { formFactor: 'desktop', "screenEmulation": { "disabled": true } };

cy.visit(url); cy.lighthouse(customThresholds, desktopConfig); }); count++;`_**

[bhavm24]

@vrknetha - I am trying to generate a html light house report and came across this thread. I am unable to find report generator repo as mentioned, could you please share the link?

[bhavm24]

@mfrachet -

https://github.com/mfrachet/cypress-audit#accessing-the-raw-reports

I am unable to access this link? Is this removed from code-base?

[mfrachet]

Deadlink, it has moved to https://mfrachet.github.io/cypress-audit/guides/lighthouse/reports.html#accessing-the-raw-reports

[bhavm24]

@mfrachet - Thank you, Your example really helped :)