How to separate Jenkins report of Cypress tests from "(root)" to browser's name?

Question

In the last couple of weeks I've replaced my test framework from the deprecated Protractor into Cypress.

Back when we used Protractor, the reports on Jenkins separated the tests to browsers, like this (I know it looks kind of silly in this printscreen, where there's only firefox, but you get the idea...):

But when I replaced it with Cypress, it all of a sudden looked like this:

We use the JUnit plug-in, I tried to follow the instructions from https://docs.cypress.io/app/tooling/reporters, and also asked Gemini for help:

While I copied the first part, I wasn't really sure how to insert the second part to my code (maybe that's what missing?).

Anyhow, this is my current code:

cypress.conf.js

module.exports = defineConfig({
    reporter: 'cypress-multi-reporters',
    "reporterOptions": {
      configFile: 'reporter-config.json',
      "toConsole": true
    },
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
    setupNodeEvents(on, config) {
      if (config.browserName === 'chrome') {
        Cypress.env('browserName', 'Chrome');
      } else if (config.browserName === 'firefox') {
        Cypress.env('browserName', 'Firefox');
      } else if (config.browserName === 'edge') {
        Cypress.env('browserName', 'Edge');
      }
    },
  },
});

reporter-config.json

{
    "reporterEnabled": "spec, mocha-junit-reporter",
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }
}

What am I missing? thanks :)

Answer 1

By the help of a co-worker I've figured-out how to solve it:

cypress.config.js should be:

    reporter: 'junit',
    reporterOptions: {
      mochaFile: 'cypress/results/results-[hash].xml', 
      jenkinsMode: true,
      outputs: true,
      testsuitesTitle: 'Cypress Tests' 
    },

and the top of each test file should be:

describe(Cypress.browser.name + '.' + 'some specific headline', () => {

and that's it, and now my jenkins looks like this: