Update and add index

This commit is contained in:
Jonas Zeunert
2024-04-23 15:17:38 +02:00
parent 4d0cd768f7
commit 8d4db5d359
726 changed files with 41721 additions and 53949 deletions

View File

@@ -1,18 +1,16 @@
 Awesome Visual Regression Testing !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome)
 Awesome Visual Regression Testing !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/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.
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 
(https://github.com/TheJambo/awesome-testing).
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 (https://github.com/TheJambo/awesome-testing).
Finally, I'm sure everyone who reads this list has one thing they want to add. Please read the How to Contribute (.github/CONTRIBUTING.md) page and Feel free to add to the list!!. If you 
think this is helpful Please give a Star ⭐.
Finally, I'm sure everyone who reads this list has one thing they want to add. Please read the How to Contribute (.github/CONTRIBUTING.md) page and Feel free to add to the list!!. If you think this is helpful Please give a Star ⭐️.
Contents
@@ -69,8 +67,7 @@
- Chimp (https://github.com/xolvio/chimp) - Develop acceptance tests & end-to-end tests with realtime feedback.
- Differencify (https://github.com/NimaSoroush/differencify) - A library for visual regression testing using Puppeteer (https://github.com/GoogleChrome/puppeteer).
- ResembleJS (https://github.com/Huddle/Resemble.js) - Analyse and compare images with Javascript and HTML5.
- Muppeteer (https://github.com/HuddleEng/Muppeteer) - Visual regression testing framework for Chrome using Mocha (https://mochajs.org/) and Puppeteer 
(https://github.com/GoogleChrome/puppeteer).
- Muppeteer (https://github.com/HuddleEng/Muppeteer) - Visual regression testing framework for Chrome using Mocha (https://mochajs.org/) and Puppeteer (https://github.com/GoogleChrome/puppeteer).
- ember-visual-test (https://github.com/Cropster/ember-visual-test) - Simple visual regression testing for Ember (https://emberjs.com/).
- AET (https://github.com/Cognifide/aet) - Scalable testing tool providing visual regression testing, accessibility and performance validation, markup analysis and more.
- Wendigo (https://github.com/angrykoala/wendigo) - Test-oriented browser automation library based on Puppeteer.
@@ -87,16 +84,14 @@
- Selenide (https://github.com/selenide/selenide) - Framework powered by Selenium WebDriver for writing easy-to-read and easy-to-maintain automated tests in Java.
- Karma (http://karma-runner.github.io/latest/index.html) - A test runner by the AngularJS team, that fits all our needs.
- Touca (https://github.com/trytouca/trytouca) - Open source continuous regression testing without the hassle of managing snapshot files.
- Lost Pixel (https://github.com/lost-pixel/lost-pixel) - Holistic visual regression testing for full pages, components (via Storybook and Ladle integration), and custom shots (e.g. via 
Cypress).
- Lost Pixel (https://github.com/lost-pixel/lost-pixel) - Holistic visual regression testing for full pages, components (via Storybook and Ladle integration), and custom shots (e.g. via Cypress).
Online services
- BrowserStack (https://www.browserstack.com) - Free for Open Source. Supports Selenium Webdriver (https://github.com/SeleniumHQ/selenium/tree/master/javascript/node/selenium-webdriver).
- BugBug.io (https://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.
- HeadSpin (https://www.headspin.io/) - HeadSpin's Regression testing gives you a powerful comparison tool for analysing degradation across new app builds, OS releases, feature additions, 
locations, and more.
- BugBug.io (https://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.
- HeadSpin (https://www.headspin.io/) - HeadSpin's Regression testing gives you a powerful comparison tool for analysing degradation across new app builds, OS releases, feature additions, locations, and more.
- TestGrid (https://www.testgrid.io/) - Perform End to End test automation be it cross browser testing, mobile app testing, performance testing or API testing on cloud or on-premise.
- LambdaTest (https://www.lambdatest.com/) - Perform Automated and Live Interactive Cross Browser Testing on 2000+ Real Browsers and Operating Systems Online.
- screener.io (https://screener.io) - For React, looks open source.
@@ -122,44 +117,35 @@
- TestingBot (https://testingbot.com) - Provides +3600 browsers to run automated visual tests. Free for Open Source.
- Preflight (https://preflight.com) - Easiest Visual regression testing and Automated Web Testing tool. (Limited) free use.
- Preflight: Cypress Recorder (https://cypress.preflight.com) - Create AI-powered Cypress Tests/POM models in your browser and automate Email & Visual testing for Cypress.
- Meticulous.ai (https://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.
- Meticulous.ai (https://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.
- testRigor (https://testrigor.com) - E2E functional test automation tool for web, mobile, and desktop tests.
- VRTs - Visual Regression Tests (https://bleech.de/en/products/visual-regression-tests/)  WordPress plugin auto-updating screenshots on content updates, preventing false positives.
- Testomat.io Reporter (https://github.com/testomatio/reporter) - Allows to collect tests to a Test Case Management System (TCMS) like testomat.io and sync manual and automated tests in one 
place.
- Testomat.io Reporter (https://github.com/testomatio/reporter) - Allows to collect tests to a Test Case Management System (TCMS) like testomat.io and sync manual and automated tests in one place.
Blog posts
- 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.
- 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.
- Garris Shipon: Visual Regression Testing For Angular Applications (https://davidwalsh.name/visual-regression-testing-angular-applications) - Tutorial using BackstopJS.
- Angela Riggs: Visual Regression Testing with BackstopJS (https://www.metaltoad.com/blog/visual-regression-testing-backstopjs) - Tutorial using BackstopJS.
- Garris Shipon: Automating CSS Regression Testing (https://css-tricks.com/automating-css-regression-testing/) - Tutorial using BackstopJS.
- Phillip Gourley: Making visual regression useful (https://medium.com/@philgourley/making-visual-regression-useful-acfae27e5031) - Why you should use BackstopJS.
- Pavels Jelisejevs: Visual Regression Testing with PhantomCSS (https://www.sitepoint.com/visual-regression-testing-with-phantomcss) - Introduction to PhantomCSS.
- Chromeless, Chrominator, Chromy, Navalia, Lambdium, GhostJS, AutoGCD (https://medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium-ghostjs-autogcd-ef34bcd26907) - Headless 
Chrome is shaking up traditional approaches to test automation.
- 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.
- Make visual regression testing easier (https://medium.com/@nima.soroush.h/make-visual-regression-testing-easier-4a3dc7073737) - Introduction to Differencify 
(https://github.com/NimaSoroush/differencify) and how to use it.
- Chromeless, Chrominator, Chromy, Navalia, Lambdium, GhostJS, AutoGCD (https://medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium-ghostjs-autogcd-ef34bcd26907) - Headless Chrome is shaking up traditional approaches to 
test automation.
- 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.
- Make visual regression testing easier (https://medium.com/@nima.soroush.h/make-visual-regression-testing-easier-4a3dc7073737) - Introduction to Differencify (https://github.com/NimaSoroush/differencify) and how to use it.
- Visual Regression Testing with Puppeteer & Jest (https://www.viswiz.io/help/tutorials/puppeteer) - Tutorial to setup visual testing with Puppeteer, Jest and VisWiz.io.
- 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.
- Visual Regression Test with WebdriverIO & WebdriverCSS (https://medium.com/@dalenguyen/visual-regression-test-with-webdriverio-webdrivercss-d7675a1812b2) - Tutorial using WebdriverIO and 
WebdriverCSS with Spec Reporter
- Automated screenshot comparison tests with headless Chrome, Puppeteer and Pixelmatch, in Bitbucket pipeline 
(https://jakobzanker.de/blog/automated-screenshot-comparison-test-with-headless-chrome-in-bitbucket-pipeline/)
- 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.
- Visual Regression Test with WebdriverIO & WebdriverCSS (https://medium.com/@dalenguyen/visual-regression-test-with-webdriverio-webdrivercss-d7675a1812b2) - Tutorial using WebdriverIO and WebdriverCSS with Spec Reporter
- Automated screenshot comparison tests with headless Chrome, Puppeteer and Pixelmatch, in Bitbucket pipeline (https://jakobzanker.de/blog/automated-screenshot-comparison-test-with-headless-chrome-in-bitbucket-pipeline/)
- Automatic visual diffing with Puppeteer (https://meowni.ca/posts/2017-puppeteer-tests/)
- theheadless.dev (https://theheadless.dev) - Blog with practical guides and runnable examples on Playwright and Puppeteer.
- 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
- 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 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
- 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
- Poor man's visual regression testing (https://idkshite.com/posts/compare-visual-changes) - Improved manual visual regression testing with the PerfectPixel chrome plugin.
- 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. 
- 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. 
Slideshows, talks and videos
@@ -169,10 +155,9 @@
- Visual Regression Testing: Sanity Checks With BackstopJS (https://youtu.be/l8lGj8Zh0k4) - Screencast with code demo and best practices.
- Screenster Tutorial (https://youtu.be/Zy8y_dGzZXI) - Tutorial on how to create visual automated tests with Screenster.
- 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.
- 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.
- 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.
- 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.
- Cypress in 100 Seconds (https://www.youtube.com/watch?v=BQqzfHQkREo&ab_channel=Fireship) - Introduction video by Fireship. 
Deprecated
@@ -186,10 +171,9 @@
- dpxdt (https://github.com/bslatkin/dpxdt) - End-to-end testing with Python.
- Visual Review (https://github.com/xebia/VisualReview) - A human-friendly tool for testing and reviewing visual regressions.
- Huxley (https://github.com/facebookarchive/huxley) - Python framework based on Selenium Webdriver (https://github.com/SeleniumHQ/selenium/tree/master/javascript/node/selenium-webdriver).
- WebdriverCSS (https://github.com/webdriverio/webdrivercss) - WebdriverCSS sits on top of Webdriver.io (https://github.com/webdriverio/webdriverio/) and hooks into Selenium 
(https://github.com/SeleniumHQ/selenium).
- Gemini (https://github.com/gemini-testing/gemini) - Feature rich framework with support for Selenium (https://github.com/SeleniumHQ/selenium) and CasperJS 
(https://github.com/casperjs/casperjs). Gemini is deprecated, use hermione instead.
- WebdriverCSS (https://github.com/webdriverio/webdrivercss) - WebdriverCSS sits on top of Webdriver.io (https://github.com/webdriverio/webdriverio/) and hooks into Selenium (https://github.com/SeleniumHQ/selenium).
- Gemini (https://github.com/gemini-testing/gemini) - Feature rich framework with support for Selenium (https://github.com/SeleniumHQ/selenium) and CasperJS (https://github.com/casperjs/casperjs). Gemini is deprecated, use hermione 
instead.
- OcularJS (https://github.com/mmacartney10/ocularjs) - uses PhantomJS (https://github.com/ariya/phantomjs).
- trifleJS (https://github.com/sdesalas/trifleJS) - Headless automation for Internet Explorer. (last update 2016)
- CasperJS (https://github.com/casperjs/casperjs) - Navigation scripting and testing utility for PhantomJS and SlimerJS. (archived 2018)