Detailed Reporting Cypress/Mochawesome

问题:

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();

回答1:

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.

回答2:

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 }));
}