Manual visual regression testing without Percy

Introduction

This method provides a way to compare the rendering of a component between two codebases, such as React and Web Component.

Mac OS X

In this step-by-step, we will use the locale modal components in React and Web Components.

1. Open a new browser window.
2. Open the given component in the storybook for one codebase, such as React.
3. Open a new tab.
4. Open the given component in the storybook for the other codebase, such as Web Components.
5. Press Command + Shift + 4 + Space to activate the window screen capture mode.
6. Screen capture one codebase rendering.
7. Repeat this last step for the other codebase.
8. Overlay both screenshots in a single Sketch file.
9. Set the blending mode of the top one to Difference.
10. See the parts that show up white-they represent visual differences.