Creevey

screenshot of Creevey
angular
react
vite
vue

Cross-browser screenshot testing tool for Storybook with fancy UI Runner.

Overview

Creevey is a powerful cross-browser screenshot testing tool designed specifically for Storybook. Its intuitive UI Runner enhances the testing experience, making it easy to visualize and interact with your stories as tests. Named after Colin Creevey from the Harry Potter series, Creevey streamlines the testing process for developers by allowing them to write interaction tests effortlessly while ensuring consistent design across different browsers.

With Creevey, you can quickly integrate testing into your CI pipeline without hassle. Its support for Docker and real-time hot-reloading means that you can catch visual discrepancies as they're introduced, allowing for a smoother development workflow and higher quality user experiences.

Features

  • Easy Integration with Storybook: Creevey seamlessly integrates with Storybook, allowing you to use your stories as tests and simplifying the testing setup.
  • Interactive Tests: Users can write interaction tests directly, enhancing the ability to assess functionality beyond just visual appearance.
  • Fancy UI Runner: Enjoy a visually appealing interface that improves your experience by facilitating easy navigation and test management.
  • Docker Support: Creevey provides support for Docker, which makes it simple to set up and maintain testing environments, especially in CI formats.
  • Cross-browser Testing: This tool offers reliable cross-browser testing capabilities, ensuring that your UI behaves consistently across different browsers.
  • Hot-reloading for Tests: Tests automatically refresh to reflect changes in your components, streamlining the development and testing process.
  • Continuous Integration Ready: Designed with CI in mind, Creevey fits smoothly into your existing workflows without additional setup headaches.
  • Configurable Capture Options: Capture specific elements or the entire viewport of your Storybook, giving you flexibility in how you conduct visual tests.
angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.