@cnumr/lighthouse-eco-index-aggregator v1.1.0

Lighthouse EcoIndex Aggregator

This generator tool can be used if you need to generate a global reports for all pages audited by lighthouse and ecoindex tools. After the generation, we will have access to a global HTML report. As an example, you can use this tool at the end of a Cypress test suite in order to generate the final report of your tests.

At the end of the readme, we will explain how to generate lighthouse and ecoindex reports, used by this aggregator.

Package

• lighthouse-eco-index-aggregator

npm install -D @cnumr/lighthouse-eco-index-aggregator

Options

Example usage

npx @cnumr/lighthouse-eco-index-aggregator --srcLighthouse="./reports/lighthouse" --srcEcoIndex="./reports/ecoindex" --reports="html" --outputPath="report_final"

You can also used this module programmatically

const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");

console.log(
  aggregate({
    srcLighthouse: "./reports/lighthouse",
    srcEcoIndex: "./reports/ecoindex",
    outputPath: "report_final",
  })
);

How to generate Lighthouse and EcoIndex reports

This aggregator tool can also be used directly inside a cypress test. For example, we can generate the global report once the Cypress tests suite has finished.

// cypress.config.js
const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");
const path = require("path");

const lighthouseOutputPathDir = path.join(__dirname, "reports/lighthouse");
const ecoIndexOutputPathDir = path.join(__dirname, "reports/ecoindex");
const globalOutputPathDir = path.join(__dirname, "report_final");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("after:run", async () => {
        await aggregate({
          reports: ["html"],
          verbose: true,
          srcLighthouse: lighthouseOutputPathDir,
          srcEcoIndex: ecoIndexOutputPathDir,
          outputPath: globalOutputPathDir,
        });
      });
    },
  },
});

But in order to generate this global report, we need the lighthouse and ecoindex reports available in the lighthouse and ecoindex subfolders. In order to do so, we will use two extra NPM packages :

• Cypress Audit in order to run Lighthouse
• Eco Index Audit in order to run EcoIndex.

You will find a sample Cypress tests suite in the cypress-demo folder. Please have a look to the demo.cy.js and cypress.config.js.

In order to run the Cypress tests suite, you have to execute the following commands :

cd cypress-demo
npm i
npx cypress run -b chrome

Sonar report

This tool can also generate a external sonar report you can add to the Sonar configuration (via the sonar.externalIssuesReportPaths option).

You need to define the path to one of your file managed by Sonar, in order to make the rule visible in Sonar Cloud and use the sonar reporter.

node ./src/cli.js  --srcLighthouse="./reports/lighthouse" --srcEcoIndex="./reports/ecoindex" --reports="sonar" --sonarFilePath="./package.json"

Generate any type of report

In fact, the output option can receive a javaScript function. Thanks to this possibility, you can send the result anywhere (Elastic, DataDog, ...)

// cypress.config.js
const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");
const path = require("path");

const lighthouseOutputPathDir = path.join(__dirname, "reports/lighthouse");
const ecoIndexOutputPathDir = path.join(__dirname, "reports/ecoindex");
const globalOutputPathDir = path.join(__dirname, "report_final");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("after:run", async () => {
        await aggregate({
          reports: [
            "html",
            (options, results) => {
              const { Client } = require("@elastic/elasticsearch");
              const client = new Client();
              return client.index({
                index: "lighthouse-ecoindex",
                document: {
                  ...results,
                  "@timestamp": new Date(),
                },
              });
            },
          ],
          verbose: true,
          srcLighthouse: lighthouseOutputPathDir,
          srcEcoIndex: ecoIndexOutputPathDir,
          outputPath: globalOutputPathDir,
        });
      });
    },
  },
});