Open Source TypeScript Visual Regression Testing Tools

A dead simple library to screenshot test React components. Under the hood, we start a local server that renders components server-side. Each component is given its own dedicated page (e.g. /render/my-component). Then we use Puppeteer to take a screenshot of that page. If you work on a team where developers use a different OS (e.g. Mac OS and Linux), or if you develop on Mac OS but use Linux for continuous integration, you would quickly run into issues where screenshots are inconsistent across platforms. This is, for better or worse, expected behavior. In order to work around this issue, react-screenshot-test will default to running Puppeteer (i.e. Chrome) inside Docker to take screenshots of your components. This ensures that generated screenshots are consistent regardless of which platform you run your tests on.

nut.js gives you full control over your mouse. Move, click or drag your cursor where you need it! Press (and hold) single keys or type pages of text, nut.js handles both! It allows for native UI interactions via keyboard and/or mouse but additionally gives you the possibility to navigate the screen based on image matching. nut.js gives you access to your system clipboard. Copy and paste text as you go! Retrieve info about open windows to improve your tests or workflows. nut.js provides plug-ins to perform on-screen image search, the key component for visual testing or image-based automation! nut.js works on all major operating systems. Windows, macOS and Linux! An improved image matching plugin that supports Apple Silicon chips, works across all current and future node/Electron versions and provides multi-image matching.

React Native Owl is a visual regression testing library for React Native that enables developers to introduce visual regression tests to their apps for iOS and Android. Being heavily inspired by Detox, an end-to-end testing and automation framework, this library uses a similar API that makes setting up react-native-owl and running the tests locally and on your preferred CI service seamless. While Detox focuses on end-to-end testing in general, React Native Owl focuses on visual regression testing and helping you catch unexpected changes to the visual appearance of your app over time.

Storycap crawls your Storybook and takes screenshot images. It is primarily responsible for image generation necessary for Visual Testing such as reg-suit.