Mochawesome Report Integration with Cypress

What is Mochawesome

Mochawesome is a customized Javascript testing reporter for mocha. It’s a simple, sleek, modern style, lovely charts, test and suite nesting support, shows before to or after the hook, checks test code online. It stacks track for failed tests and supports context information added for tests. It filters that only display the tests you want. https://www.npmjs.com/package/mochawesome

So let's install that using our command prompt.

npm i --save mochawesome

I have created a test orangehrm-mochawesome-login.spec.js

import {Login} from "../pages/Login";
const login = new Login();

describe('Login Page',()=>{
    beforeEach('navigate to login page',()=>{
        login.navigate();
    })
    it('should not be able to login to using invalid credentials',()=>{
        login.validateTheLoginPage();
        login.login('Admin','admin');
        login.validateInvalidCredentials('Invalid credentials');
    })
    it('should be able to login to using valid credentials',()=>{
        login.login('Admin','admin123')
        cy.get('#welcome').should('have.text','Welcome Paul');
    })
})

Then run the command by the following command:

cypress run --spec "cypress/integration/orangehrm-mochawesome-login.spec.js" --reporter mochawesome

Once it’s executed then you see the HTML and the JSON reports in the following path: mochawesome-report/mochawesome.html

When we open the HTML report you can see the image as follow:

Let me a test fail and open the HTML file:

The report is really awesome right ☺☺☺☺

Now it’s time to make the report well detailed with failure screenshots. Add the following code snippet to the describe block.

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        const screenshot = `screenshots/${Cypress.spec.name
        }/${runnable.parent.title} -- ${test.title} (failed).png`;
        addContext({ test }, "/cypress-tests/cypress/"+screenshot);
    }
});

Cypress checks for failure after every test case execution, if it’s there it takes the screenshot from the given path and adds it to the report.

Full detailed code:

import {Login} from "../pages/Login";
const login = new Login();
const addContext = require('mochawesome/addContext');

describe('Login Page',()=>{
    beforeEach('navigate to login page',()=>{
        login.navigate();
    })
    Cypress.on('test:after:run', (test, runnable) => {
        if (test.state === 'failed') {
            const screenshot = `screenshots/${Cypress.spec.name
            }/${runnable.parent.title} -- ${test.title} (failed).png`;
            addContext({ test }, "/cypress-tests/cypress/"+screenshot);
        }
    });

    it('should not be able to login to using invalid credentials',()=>{
        login.validateTheLoginPage();
        login.login('Admin','admin');
        login.validateInvalidCredentials('Invalid credentials');
    })
    it('should be able to login to using valid credentials',()=>{
        login.login('Admin','admin1234')
        cy.get('#welcome').should('have.text','Welcome Paul');
    })
})

Then run the test again and open the HTML report: