CSS and HTML errors in reports #441
Description
Environment (please complete the following information)
- multiple-cucumber-html-reporter: 3.9.2
- Node.js version: 22.14.0
- NPM version: 10.9.2
- Platform name and version: MAC OS 24.3.0 AND Linux 24.04
- Cucumber version: badeball/cypress-cucumber-preprocessor 22.0.1
Config of multiple-cucumber-html-reporter
// FILE: cucumber-html-reporter.js
`const { generate } = require("multiple-cucumber-html-reporter");
const dayjs = require("dayjs");
const { readFileSync } = require("fs");
const data = readFileSync("./cypress/results/results.json", { encoding: "utf8", flag: "r",});
const runInfos = JSON.parse(data);
const mapOs = (os) => {
if (os.startsWith("win")) {
return "windows";
} else if (os.startsWith("darwin")) {
return "osx";
} else if (os.startsWith("linux")) {
return "linux";
} else if (os.startsWith("ubuntu")) {
return "ubuntu";
} else if (os.startsWith("android")) {
return "android";
} else if (os.startsWith("ios")) {
return "ios";
}
};
generate({
// saveCollectedJSON: true,
jsonDir: "cypress/results/json/",
reportPath: "cypress/results/html-report/",
pageTitle: "Cypress Runner e2e Test Results",
reportName: "Cypress Runner e2e Test Results",
displayDuration: true,
ignoreBadJsonFile: true,
useCDN: true,
disableLog: true,
metadata: {
browser: {
name: runInfos.browserName === "chromium" ? "chrome" : runInfos.browserName,
version: runInfos.browserVersion,
},
device: "Virtual Machine",
platform: {
name: mapOs(runInfos.osName),
version: runInfos.osVersion,
},
},
customData: {
title: "Cypress Runner e2e ",
data: [
{ label: "Project", value: "My Project" },
{ label: "Environment", value: (runInfos["config"]["env"]["CYPRESS_ENV"] || "").toUpperCase() },
{ label: "URL Application", value: runInfos["config"]["baseUrl"] },
{ label: "Cypress Version", value: runInfos["cypressVersion"] },
{ label: "Node Version", value: runInfos["config"]["resolvedNodeVersion"] },
{
label: "Execution Start Time",
value: dayjs(runInfos["startedTestsAt"]).format(
"YYYY-MM-DD HH:mm:ss.SSS"
),
},
{
label: "Execution End Time",
value: dayjs(runInfos["endedTestsAt"]).format("YYYY-MM-DD HH:mm:ss.SSS"),
},
],
},
});
`
// FILE: cypress.config.js
`const {defineConfig} = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const {addCucumberPreprocessorPlugin, afterRunHandler} = require("@badeball/cypress-cucumber-preprocessor");
const {createEsbuildPlugin,} = require("@badeball/cypress-cucumber-preprocessor/esbuild");
const {writeFileSync} = require("fs");
require("dotenv").config();
async function setupNodeEvents(on, config) {
await addCucumberPreprocessorPlugin(on, config);
// Preprocessor Configuration
on(
"file:preprocessor",
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
on("after:run", async (results) => {
if (results) {
await afterRunHandler(config); // Asume que tienes esta función definida en tu archivo
writeFileSync("./cypress/results/results.json", JSON.stringify(results)); // Escribe el archivo JSON
}
});
return config;
}
module.exports = defineConfig({
e2e: {
specPattern: "cypress/e2e/features/*.feature",
setupNodeEvents,
video: true,
videoCompression: 32,
viewportWidth: 1280,
viewportHeight: 720,
defaultCommandTimeout: 10000,
watchForFileChanges: false,
screenshotOnRunFailure: true,
videosFolder: "cypress/results/videos",
screenshotsFolder: "cypress/results/screenshots",
experimentalModifyObstructiveThirdPartyCode: true,
},
});`
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
[Include code or an example repository that can easily be set up]
Expected behavior
- I'm generating the reports, and the CHART – STATUS – PROGRESS titles in the FEATURES and SCENARIOS blocks aren't aligned. It's displayed on the main page. The DARKMODE button is in the middle of the main page.
- And on the Features Overview page. On the page, the Total Duration: title is displayed out of position.
- And you're experiencing issues with dark mode.
