Improve Visual Testing Doc

Original comment here: https://github.com/cypress-io/cypress/issues/3324#issuecomment-542414532

• We need to clearly communicate best practices around performing screenshot comparison.
• We need to communicate why the screenshot size is different from the viewport size.
• We need to communicate how screenshots are different when in cypress open versus cypress run
• We need to communicate how scaling is handled and not handled.
• When do you screenshot - how do you make sure everything is loaded https://github.com/cypress-io/cypress/issues/5275

[olufunbi]

I am experiencing the same issue where screenshots were taken using cypress open and the screenshots taken using cypress run have different sizes. Reading through this thread, I see how that is possible, however, as earlier stated, there needs to be proper documentation about this(Visual testing) in general so they do’s and dont’s are made crystal clear.

My predicament now is, I have to set different baselines when I want to use cypress run and then delete all baseline and set new ones each time I use cypress open. This can be a pain especially when the project is a large one.

[bahmutov]

For now see this presentation:

• https://slides.com/bahmutov/visual-testing and video https://youtu.be/gUFdU5fQs4o and blog post https://glebbahmutov.com/blog/open-source-visual-testing-of-components/