In this week’s post join me as I battle with some visual regression plugins for Cypress component testing to find the one which actually works. Spo...
For further actions, you may consider blocking this person and/or reporting abuse
Cool read, quite informative, was wondering if there could have been basic content for Visual Regression Testing. Overall a great read!
Also sharing this basic tutorial on Visual Regression Testing
Cheers 🍻
Hello @mbarzeev
I am using cypress with cucumber hence I use
multiple-cucumber-html-reporter, When there is difference between actual and expected image, it just shows the error likeImage difference greater than threshold: 0.2but doesn't attach the screenshot with the report.I don't want to use inbuilt report
Cypress Image Diff Reportas having 2 different reports doesn't make sense.Is there anyway we can attach the failing screenshot with
multiple-cucumber-html-reporter?Hi @tausif29,
Unfortunatly I don't have experience in integrating Cypress with Cucumber. I suggest addressing this issue to the Cypress team. If you find a solution, please share it :)
Hello sir, do you have one that uses Javascript? I tried github.com/meinaart/cypress-plugin... but is not running when I add import 'cypress-plugin-snapshots/commands'; in e2e.js.
Here is my issue in SO
(Edit)
Hello sir. I tried this plugin as well but I keep on getting this error although I have the folder on my directory. I'm currently stuck.
I added a ticket on their repository github.com/uktrade/cypress-image-d...
I will have a look on the issue you've opened and see if I can help somehow. Cheers.
Thank you sir!
I'm assuming that the .png file cannot be found under the comparison directory, the question is why...
Note that my cypress configuration adds the plugin for "component" testing and not for "e2e". I don't know if that difference makes the change, but keep in mind, perhaps there is a different configuration for "e2e"...
For the lack of a better solution ATM, I would try to run a "component" testing to see if that generates the required images and diff, and continue from there.
Typical regression testing would require us to run comparison or visual testing on several pages or components.
How do you create multiple base images, one per Page or element under test?
In think it really depends on what you wish to test. You can have a page which holds amny components and test it as a bulk, or you can have a page for each component and be more detailed about it.
Tools like Chrimatic which have a nice Storybook integration allow you to have a visual regression test for each story and its oermutations.
@faithberroya If you are using cypress with cucumber, update this in your cypress.config.js
await addCucumberPreprocessorPlugin(on, config, {omitAfterScreenshotHandler: true,
});