Cypress custom commands + Mochawesome reports: Log more details

1.6k Views Asked by At

Goal: Add more details from Cypress custom commands to generated Mochawesome report

I am new with Cypress.io and especially with Mochawesome report generation.

In creating cleaner code and avoid duplicity, I have added custom Cypress.Commands, for example

/// <reference types="Cypress" />

Cypress.Commands.add('sandboxForceFailure', () => {
    cy.visit(Cypress.env('ds_admin_base_url'));
    cy.url({ timeout: 1000 }).should('include', '/admin-dashboard');
});

The inconvenience I am currently experiencing with in using Cypress.Commands is that its granular Cypress calls made within a custom command are not included within the Mochawesome generated report.

This is an example of Cypress context with two tests, both performing the same test. First using direct Cypress calls and the second using the aforementioned custom Cypress.Commands:

context('Sandbox', () => {
   it('Force failure', () => {
      cy.visit(Cypress.env('ds_admin_base_url'));
      cy.url({ timeout: 1000 }).should('include', '/admin-dashboard');
   })

   it('Force failure Custom Command', () => {
      // @ts-ignore
      cy.sandboxForceFailure();
   })
})

Mochawesome report for Test 'Force failure' shows that all Cypress calls performed in test:

'Force failure'
cy.visit(Cypress.env('ds_admin_base_url'));
cy.url({ timeout: 1000 }).should('include', '/admin-dashboard');

Mochawesome report for Test 'Force failure Custom Command' shows that cy.sandboxForceFailure() was called, but nothing more...

'Force failure Custom Command'
// @ts-ignore
cy.sandboxForceFailure();

I would prefer if Test 'Force failure Custom Command' shows Cypress calls performed within custom Cypress command, for example...

'Force failure Custom Command'
// @ts-ignore
cy.sandboxForceFailure();
-----
    cy.visit(Cypress.env('ds_admin_base_url'));
    cy.url({ timeout: 1000 }).should('include', '/admin-dashboard');
-----

Here are some additional details on Cypress.io configuration and NPM scripting in for generating Mochawesome report:

File cypress.json

    "reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/report/json",
            "overwrite": false,
            "html": false,
            "json": true,
            "timestamp": "mmddyyyy_HHMMss"
        }
    },

File package.json scripts:

    "cy:report:merge": "mochawesome-merge cypress/report/json/*.json > cypress/report/report_bundle.json",
    "cy:report:generate": "marge cypress/report/report_bundle.json --reportFilename report --charts true --reportDir cypress/report",
    "cy:report": "npm run cy:report:merge && npm run cy:report:generate",

Much appreciate any assistance. Is this level of report detail possible?

0

There are 0 best solutions below