如何为cypress-audit生成的Lighthouse报告自定义命名

我需要为多个测试场景生成多份Lighthouse报告，目前通过cypress-audit包实现了报告生成，但每次测试都会覆盖固定命名的lightHouseReport.html文件。现在希望调用lighthouseAudit方法时传入的scenarioId参数作为报告文件名，比如传入"storydashboard"时生成"storydashboard.html"。现有代码如下：

export function lighthouseAudit(scenarioId, baseValueData) {
    const lighthouseMetrics = {
        performance: baseValueData.performance,
        accessibility: baseValueData.accessibility,
        seo: baseValueData.seo,
        pwa: baseValueData.pwa
    };

    cy.log("lighthousemetrics", lighthouseMetrics);

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

    cy.lighthouse(lighthouseMetrics, desktopConfig);
}

cypress.config.js中的报告生成逻辑：

//cypress.config.js file
module.exports = defineConfig({
  reporter: 'mochawesome',
  defaultCommandTimeout: 6000,
  taskTimeout: 20000,
  execTimeout: 6000,
  viewportWidth: 1920,
  viewportHeight: 1080,
  e2e: {
    experimentalSessionAndOrigin:true,
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
      on('file:preprocessor', cucumber())
      on("before:browser:launch", (browser = {}, launchOptions) => {
        prepareAudit(launchOptions);
      });
      on('task', {
        lighthouse: lighthouse((lighthouseReport) => {
          const folderPathForLH = "cypress/lightHouse"
          if (!fs.existsSync(folderPathForLH)) {
            fs.mkdirSync(folderPathForLH);
          }
          fs.writeFileSync(`${folderPathForLH}/lightHouseReport.html`, ReportGenerator.generateReport(lighthouseReport.lhr, 'html'));
          return lighthouseReport;
        }),
      });
    },
    specPattern: "**/*.{feature,features}"
  },
});

使用的包版本：

"@cypress-audit/lighthouse": "^1.3.1",
  "cypress": "^10.9.0",
  "cypress-audit": "^1.1.0",
  "cypress-cucumber-preprocessor": "^4.3.1",

要实现按场景ID生成独立报告，需在调用cy.lighthouse时传递场景ID，并在任务中接收该参数用于命名文件，具体修改如下：

1. 修改lighthouseAudit方法，传递场景ID #

通过配置的extraHeaders携带场景ID，后续在任务中提取：

export function lighthouseAudit(scenarioId, baseValueData) {
    const lighthouseMetrics = {
        performance: baseValueData.performance,
        accessibility: baseValueData.accessibility,
        seo: baseValueData.seo,
        pwa: baseValueData.pwa
    };

    cy.log("lighthousemetrics", lighthouseMetrics);

    const desktopConfig = {
        formFactor: 'desktop',
        screenEmulation: { disabled: true },
        // 用自定义请求头传递场景ID
        extraHeaders: {
            'x-scenario-id': scenarioId
        }
    };

    cy.lighthouse(lighthouseMetrics, desktopConfig);
}

2. 修改cypress.config.js中的Lighthouse任务，动态生成文件名 #

从Lighthouse报告的配置中提取场景ID，替换固定文件名：

//cypress.config.js file
const fs = require('fs');
const { defineConfig } = require('cypress');
const { lighthouse, prepareAudit } = require('@cypress-audit/lighthouse');
const { ReportGenerator } = require('lighthouse');
const cucumber = require('cypress-cucumber-preprocessor').default;
const getCompareSnapshotsPlugin = require('your-plugin-path'); // 替换为实际插件路径

module.exports = defineConfig({
  reporter: 'mochawesome',
  defaultCommandTimeout: 6000,
  taskTimeout: 20000,
  execTimeout: 6000,
  viewportWidth: 1920,
  viewportHeight: 1080,
  e2e: {
    experimentalSessionAndOrigin:true,
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
      on('file:preprocessor', cucumber())
      on("before:browser:launch", (browser = {}, launchOptions) => {
        prepareAudit(launchOptions);
      });
      on('task', {
        lighthouse: lighthouse((lighthouseReport) => {
          const folderPathForLH = "cypress/lightHouse";
          if (!fs.existsSync(folderPathForLH)) {
            fs.mkdirSync(folderPathForLH);
          }
          // 从请求头中提取场景ID，无有效ID时用默认值
          const scenarioId = lighthouseReport.lhr.configSettings.extraHeaders['x-scenario-id'] || 'default-report';
          // 生成对应文件名
          const reportFileName = `${scenarioId}.html`;
          fs.writeFileSync(`${folderPathForLH}/${reportFileName}`, ReportGenerator.generateReport(lighthouseReport.lhr, 'html'));
          return lighthouseReport;
        }),
      });
    },
    specPattern: "**/*.{feature,features}"
  },
});

注意事项 #

• scenarioId参数不能包含/ \ : * ? " < > |等文件系统禁止的特殊字符
• 若未传入有效scenarioId，代码会自动使用default-report.html作为默认文件名，避免报错
• 若无法通过extraHeaders获取场景ID，可尝试在测试页面URL后拼接?scenarioId=xxx，再在任务中解析URL提取参数

内容的提问来源于stack exchange，提问作者yasith rangana