Reporting

[SaulGoode77]

Anyway of generating a report at the end of a test run showing failed test differences?

[FRSgit]

Hi @SaulGoode77!

What kind of report are you thinking about? Currently you get the output on the console (which can be redirected to file) and all of the screenshots are saved on the hard drive:

• diffs have .diff.png prefix,
• new screenshots has .actual.png prefix,
• old screenshot (the one we're testing agains) has no prefix.

Below the screenshot of the state of console and file structure when yarn test:ct:ci command from our example fails:

[SaulGoode77]

An html report that when a test fails, will display, baseline, diff, actual. I have a project right now, we're converting over 700 pages and need to validate all of them. Outputting to a console or a file will not be easy to read when issues need to be investigated. It's also not something we can hand over to the client. You know everyone wants those fancy html reports that are easy to read.

[FRSgit]

Hm, while writing this plugin I had mainly Cypress UI usage in mind as this is something I've used in past few companies and projects. I honestly have small experience in writing and/or using generated HTML reports. I would expect that there are already some kind of image reporting cypress plugins - have you tried those?
Also if you have any more thoughts about the topic - feel free to write them down here. I need to be pointed in the right direction. I'm not even sure what's the standard here - should the report functionality be published as a separate plugin?
And of course - feel free to open a PR if you see how the reporting could be integrated in the plugin.

[SaulGoode77]

Hi @FRSgit, most of the reporting won't show you "Baseline" vs "Actual" with "Differences" in the report. I have used a different library called "cypress-image-diff-js". They actually generate a pretty simple report that demonstrates all that. Well thanks for the info.

[FRSgit]

Okay, so the reporter should be implemented here - I'll try to have a look at this topic, thanks for sending me an example!

By the way - if I might - what was the reason for you to try out this library instead of cypress-image-diff-js?