_edited.jpg)
On my previous post, we looked at how we can generate Mochawesome report from our Cypress tests. I received some really great feedback and I wanted to explore more of Mochawesome's features since I am still fairly new at it. The great thing about the testing community is that people will share ideas on what can be improved. One of the topics that came up was around attaching Cypress screenshots to the report whenever any of the tests fail. In this blog post, I'll walk you through the steps on how you can achieve this. If you haven't read my previous post, I recommend that you do so you have the basic understanding on how to setup Mochawesome with Cypress.
Cypress Screenshots
As you might know already, Cypress will automatically take a screenshot of your test whenever it fails. By default, this is saved on `cypress/screenshots` folder directly however we can specify where want to save it by modifying the `screenshotsFolder` options in our cypress.json file. Let's modify this so the screenshots will be saved to the folder where our mochawesome HTML report is stored.
Now when you have a failed test, the screenshot should now be saved to the folder that you have specified.
Cypress Event Listener
In order to attach the screenshot after our test is run, we need to listen to a Cypress event called "test:after:run" and add our additional code. We can add this in our Cypress "support/index.js" file because this file is processed automatically before and/or after our test execution.
Mochawesome Context
Now that we know which Cypress event to listen to, we need to tell Mochawesome that we want a screenshot to be included in our report. This can be done by using `addContext`. According to their documentation site:
Mochawesome ships with an addContext helper method that can be used to associate additional information with a test. This information will then be displayed inside the report.
The addContext accepts two parameters. The first parameter is the test object itself and the second parameter is the new information or context that we want to add. In our case, we want to pass in the path to where our screenshot is stored.
Before we do that, I just want to show a code snippet of adding a random string on this context to show where this gets added in mochawesome.
Now when we run our tests, mochawesome will generate a JSON output which should now include a new property called "context" with"test" as its value as seen below.
Putting it all together
Ok, now we know what addContext does, let's modify this to pass the path of our Cypress screenshot instead!
We are only interested to attach the screenshot if our test failed hence the if statement. We then get the value of our screenshot and pass this as a string to our addContext method. The screenshot variable here is a combination of different variables but basically it consists of:
Our screenshots folder name that we defined in our cypress.json which can be returned by calling Cypress.config('screenshotsFolder').
Our spec file name which can be returned by calling Cypress.spec.name
The parent title of our test which can be returned by calling runnable.parent.title
Finally, the test name itself which can be returned by calling test.title
Here is our Mochawesome report with Cypress screenshots attached 🙂
If the screenshot doesn't show on the report, make sure that the file path of your screenshot image is correct :)
Anyway, I hope you found this post useful! If you want to view the full solution, please refer to my github repo here.
Great post! One improvement if I may: If your tests include more than two levels (i.e. context -> describe -> test, etc), this will not work properly. I've added support for multiple levels with this simple code: let parent = runnable.parent;
let parentTitle = parent.title;
while (parent.parent?.title) {
parent = parent.parent;
parentTitle = `${parent.title} -- ${parentTitle}`;
} const screenshot = `${folder}/${name}/${parentTitle} -- ${test.title} (failed).png`;
Hello Marie,
Your style is very clean and neat.
It worked perfectly.
Many thanks for sharing.
If you want to run this inside a Jenkins declarative pipeline and publish using HTML publisher make sure to change '${Cypress.config('screenshotsFolder')}' by 'assets' only. The reason is with the whole path in cypress.config it will read the path in var/lib inside jenkins and not the relative path where the html publisher plug in publishes the HTML. Thank you!
Hello Marie, ty for the post it helped me to get started with the reports.
For me the approach will not be very reliable in a CI/CD context with tons of tests so I did some changes to embed the images into report.
With this approach I'll be able to check the reports from 5 days ago and the images will be correct, since they'll not be based on link that will be overridden every time we run the test and fails(e.g. cypress/result/login/Login.feature/Login -- some_scenario (failed).png).
Also the images will disappear if we go for a clean tests run strategy, where we delete all artifacts/results.
My current dependencies:
"dependencies": { "cypress": "^5.6.0", "cypress-cucumber-preprocessor": "^4.0.0", "mochawesome": "^6.2.1", "mochawesome-merge": "^4.2.0", "mochawesome-report-generator": "^5.1.0" },Thanks Marie!!! This is awesome. You made it so easy to follow.