@harrisonqian / Awesome › wiki / testing / visual-regression-testing
Public View

Visual Regression Testing

repo: mojoaxel/awesome-regression-testing
category: Testing related: Selenium

Awesome Visual Regression Testing Awesome

Curated list of awesome visual regression testing resources.

Regression testing is a type of software testing which verifies that software which was previously developed and tested still performs the same way after it was changed or interfaced with other software. The purpose of regression testing is to ensure that changes to the software have not introduced new faults.

Foreword

This is intended to be an incomplete list of resources about visual regression testing. It is not tailored to a specific area or role (Developer/QA/UX-Designer). Note that this is for all areas of regression software testing after the code in question is written. For a awesome list on general software testing see e.g. awesome-testing.

Finally, I'm sure everyone who reads this list has one thing they want to add. Please read the How to Contribute page and Feel free to add to the list!!. If you think this is helpful Please give a Star ⭐️.

Contents

General information

Browser automation

Tools and frameworks (a-z↓)

Online services (a-z↓)

  • applitools - Cloud base visual tests.

  • Argos - The open source visual testing platform for modern engineering teams.

  • Axcept - Testing for the whole team. Up to 100 tests in parallel. Endpoint Mocking. Code Coverage.

  • Browser Shots - Screenshots only.

  • browserling - LIVE interactive cross-browser testing.

  • BrowserStack - Free for Open Source. Supports Selenium Webdriver.

  • BugBug.io - Lightweight test automation tool for web applications. Easy to learn and doesn't require coding. It's free, with unlimited tests. For an additional monthly fee, you also get cloud monitoring and CI/CD integration.

  • Chromatic - Visual testing and UI review for component libraries. Cloud-based. Video

  • CrossBrowserTesting - Manual & exploratory testing on 1500+ real browsers and mobile devices.

  • Diffy - Cloud based visual regression tool that focuses on Drupal and WordPress. Full page screenshots and minimal number of false positives. Just provide URLs of your sites to get started. No coding required.

  • Fluxguard - Screenshot pixel and DOM change comparisons and regressions.

  • Ghost Inspector - See introduction video.

  • Happo - Cloud-based screenshot testing service with support for multiple browsers.

  • HeadSpin - HeadSpin's Regression testing gives you a powerful comparison tool for analysing degradation across new app builds, OS releases, feature additions, locations, and more.

  • Keploy - Open-source regression testing tool that automatically generates test cases and mocks from real API calls.

  • LambdaTest - Perform Automated and Live Interactive Cross Browser Testing on 2000+ Real Browsers and Operating Systems Online.

  • Meticulous.ai - Easily create frontend tests without writing code. Use Meticulous to record workflows on your web app. You can then replay those flows on new frontend code, and create a test by diffing two replays.

  • Micoo - Open source service for all UI application visual regression solution

  • percy.io - Continuous visual reviews for web apps.

  • Pixeleye - Open-source, multi-browser visual review and testing platform with the option to self-host. It has first-class support for Storybook, Cypress, Playwright & Puppeteer.

  • Preflight: Cypress Recorder - Create AI-powered Cypress Tests/POM models in your browser and automate Email & Visual testing for Cypress.

  • Preflight - Easiest Visual regression testing and Automated Web Testing tool. (Limited) free use.

  • Reflect - Visual regression testing and test automation tool.

  • screener.io - For React, looks open source.

  • screenster.io - Cloud based automation testing platform for web and mobile UI.

  • Sherlo - Visual testing platform for React Native Storybook. Captures screenshots on iOS and Android simulators in the cloud and detects visual changes automatically.

  • TestGrid - Perform End to End test automation be it cross browser testing, mobile app testing, performance testing or API testing on cloud or on-premise.

  • TestingBot - Provides +3600 browsers to run automated visual tests. Free for Open Source.

  • Testomat.io Reporter - Allows to collect tests to a Test Case Management System (TCMS) like testomat.io and sync manual and automated tests in one place.

  • testRigor - E2E functional test automation tool for web, mobile, and desktop tests.

  • Vidiff - Cloud-based visual regression testing across stages.

  • Visual Knight - Cloud-based visual testing platform with realtime results for testing tools.

  • Visual Regression Tracker - Open Source selfhosted service for visual regression testing

  • VisWiz.io - Flexible visual regression testing service.

  • VRTs - Visual Regression Tests – WordPress plugin auto-updating screenshots on content updates, preventing false positives.

Blog posts (a-z↓)

  • [Angela Riggs: Visual Regression Testing with BackstopJS](https://www.metaltoad.com/blog/visual-regression-testing-backstopjs) - Tutorial using BackstopJS.
  • Automated screenshot comparison tests with headless Chrome, Puppeteer and Pixelmatch, in Bitbucket pipeline
  • Automatic visual diffing with Puppeteer
  • Chromeless, Chrominator, Chromy, Navalia, Lambdium, GhostJS, AutoGCD - Headless Chrome is shaking up traditional approaches to test automation.
  • CodeLift: Introduction to Diffy for Visual Regression Testing - Catch visual and functional issues before they reach production.
  • [Everything you need to know about Visual Regression Testing in 2022](https://david-x.medium.com/the-state-of-visual-regression-testing-in-2022-5de10ffe8f6f) - Intro to visual regression testing with tools updated as of 2022.
  • Garris Shipon: Automating CSS Regression Testing - Tutorial using BackstopJS.
  • [Garris Shipon: Visual Regression Testing For Angular Applications](https://davidwalsh.name/visual-regression-testing-angular-applications) - Tutorial using BackstopJS.
  • [Keeping a React Design System consistent: using visual regression testing to save time and headaches](https://techblog.commercetools.com/keeping-a-react-design-system-consistent-f055160d5166) - Using percy, and jest puppeteer to visually test a React component library.
  • [Kevin Lamping: The 5 best visual regression testing tools](http://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools) - Compares: Wraith, PhantomCSS, Gemini, WebdriverCSS and Spectre.
  • [Make visual regression testing easier](https://medium.com/@nima.soroush.h/make-visual-regression-testing-easier-4a3dc7073737) - Introduction to Differencify and how to use it.
  • [Pavels Jelisejevs: Visual Regression Testing with PhantomCSS](https://www.sitepoint.com/visual-regression-testing-with-phantomcss) - Introduction to PhantomCSS.
  • Phillip Gourley: Making visual regression useful - Why you should use BackstopJS.
  • Poor man's visual regression testing - Improved manual visual regression testing with the PerfectPixel chrome plugin.
  • theheadless.dev - Blog with practical guides and runnable examples on Playwright and Puppeteer.
  • [UI Visual Regression Testing with Micoo](https://mikuu.medium.com/ui-visual-regression-testing-with-micoo-12c7a4a036b9) - Introduction about how to do visual regression testing with Micoo service
  • Visual Regression Test with WebdriverIO & WebdriverCSS - Tutorial using WebdriverIO and WebdriverCSS with Spec Reporter
  • [Visual regression testing for Hugo with Github-CI and BackstopJS](https://jameskiefer.com/posts/visual-regression-testing-for-hugo-with-github-ci-and-backstopjs/) - How to automate regression testing for Hugo with BackstopJS
  • [Visual regression testing using Jest, Chromeless and AWS Lambda](https://github.com/novemberfiveco/visual-regression-testing-jest-chromeless) - Tutorial using Chromeless and jest-image-snapshot.
  • [Visual Regression Testing with Puppeteer & Jest](https://www.viswiz.io/help/tutorials/puppeteer) - Tutorial to setup visual testing with Puppeteer, Jest and VisWiz.io.

Slideshows, talks and videos (a-z↓)

  • [CSS Regression Testing with Wraith](https://youtu.be/gE_19L0l2q0) - Screencast: Basic introduction to wraith, a screenshot comparison tool.
  • Cypress in 100 Seconds - Introduction video by Fireship.
  • [Look-alike - visual regression testing tool](https://youtu.be/vTyoQuC0To8) - Demo what the Look-alike Chrome extension is, how it works and how and why it was build.
  • [Screencast on CSS critic - a lightweight testing framework for CSS](https://youtu.be/AqQ2bNPtF60) - How to write your first CSS test with CSS critic, make it pass, break it, and make it pass again.
  • Screenster Tutorial - Tutorial on how to create visual automated tests with Screenster.
  • [Visual Regression Testing - from a tool to a process](https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process) by Nikhil Verma - How the Mobile Web team in Badoo converted and integrated PhantomCSS into their workflow and connected it to their CI process.
  • [Visual Regression Testing with PhantomCSS](https://youtu.be/Vp8vnXMjIfw) - Talk by Jon Bellah on how to use PhantomCSS during wordpress development.
  • [Visual Regression Testing with Shoov](https://youtu.be/CBBiJ6YlXLc) - How to setup shoov and get your first test written.
  • [Visual Regression Testing: Sanity Checks With BackstopJS](https://youtu.be/l8lGj8Zh0k4) - Screencast with code demo and best practices.

Deprecated (a-z↓)

The following projects are no longer maintained actively but are still worth mentioning because of their user base.

Miscellaneous

Contributing

See the Contribution Guide for details on how to contribute.

Code of Conduct

See the Code of Conduct for details. Basically it comes down to:

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

License

CC-BY-SA

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. License holders are all contributors.

[[curator]]
I'm the Curator. I can help you navigate, organize, and curate this wiki. What would you like to do?