Detailed Reporting Cypress/Mochawesome

Question

Has anyone had much experience of generating good detailed reports from Cypress tests using Mochawesome as the report engine?

I've followed the info on the Mochawesome GIT page but what I get is rather dull!!

I'd like to be able to include the odd screen-shot and the output from the assertions - here's the current cypress.json file......

{
 "projectId": "haw8v6",
"baseUrl": "https://obmng.dbm.guestline.net/",
"chromeWebSecurity": false,
"reporter" : "mochawesome",
 "reporterOptions" : {
"reportFilename" : "DBM Smoke-Test",
"overwrite": true,
"inline": true

}
}

I've been toying with var addContext = require('mochawesome/addContext'); but with little joy.

Suggestions gratefully received.

Thanks

As per request below - very basic example of addContext

var addContext = require('mochawesome/addContext');

describe('DBM Smoketests', function() {
it('E2E Hotel2 WorldPay System', function() {
    cy.visit('https://obmng.dbm.guestline.net/');


                    cy.url().should('include','/obmng.dbm');
                    addContext(this,'URL is correct');

 //loads hotel 2 
    cy.get('.jss189 > div > .jss69 > .jss230').click();

Answer 1

Yes confirmed work! It's possible to call once in each test like this:

it('Should shine the test report!!!', () => {
  cy.get('li').should('have.length.greaterThan', 0);
  addTestContext('String','giphy');
  addTestContext('Link','https://giphy.com');
  addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
  addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
});

function addTestContext(title, value) {
  cy.once('test:after:run', test => addContext({ test }, { title, value }));
}

Answer 2

After much hacking about, I found a way to use Mochawesome addContext in Cypress.

Note, you can only make one addContext call per test (this is a Mochawesome limitation).

describe('DBM Smoketests', function() {
  it('E2E Hotel2 WorldPay System', function() {
    cy.visit('https://obmng.dbm.guestline.net/');
    cy.url().should('include','/obmng.dbm');

    Cypress.on('test:after:run', (test) => {
      addContext({ test }, { 
        title: 'This is my context title', 
        value: 'This is my context value'
      })
    });
  });
});

The second param is the context to be attached to the test, and it must have non-empty title and a value properties.

What you get in the mochawesome.json output is

...
"suites": [
  {
    ...
    "tests": [
      {
        "title": "E2E Hotel2 WorldPay System",
        ...
        "context": "{\n  \"title\": \"This is my context title\",\n  \"value\": \"This is my context value\"\n}",
        "code": "...",
        ...
      }
    ],

In mochawesome.html, on clicking the test you get

Additional Test Context
This is my context title:
This is my context value

I have not tried it out with value types other than string.

Note for anyone starting out with Mochawesome in Cypress, it looks like you can only get a Mochawesome report with running cypress run, not with cypress open - although there may be a way around this using mocha's multiple reporter functionality.