Awesome Visual Regression Testing
Visual Regression Testingを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
一般情報
ブラウザ自動化
- Cypress.io - ブラウザ内で実行される自動化フレームワーク。
- Selenium - ブラウザ自動化フレームワークとエコシステム。
- SlimerJS - Firefoxをベースにした、PhantomJSのようなスクリプト可能なブラウザ。
- Webdriver.io - W3C WebDriverプロトコルに対するNode.jsバインディング実装。
ツールとフレームワーク(a-z↓)
- AET - スケーラブルなテストツールで、視覚的なリグレッションテスト、アクセシビリティおよびパフォーマンス検証、マーカップ分析などを提供。
- AyeSpy - 90秒で44枚の画像を比較。
- BackstopJS - 構成ファイルに基づく自動スクリーンショットテストフレームワーク。
- basset - 視覚的な差異を生成・レビューするオープンソースプラットフォーム。複数のブラウザに対応し、GitHubおよびSlackとの統合をサポート。
- BitDive - BitDiveはJava/Kotlinアプリケーション向けのゼロコードリグレッションテストツール。リアルタイムの実行挙動(メソッド、SQL、HTTP)をキャプチャし、自動モックによるライブコンテキストリプレイを実現し、バージョン間の意味のズレを検出できる。
- BFFless - GitHub Actionsとの統合を活用した、自前サーバーで視覚リグレッションスクリーンショットをホスト・閲覧できるプラットフォーム。
- Chimp - リアルタイムフィードバックを活用した受容テストおよびエンドツーエンドテストの開発。
- CodeceptJS - Node.js向けの現代的な受容テストフレームワーク。
- Creevey - マルチブラウザ視覚テストを魔法のように。UIランナー、テストのホットリロード、DockerおよびStorybook統合を備えた豊富な機能ツール。
- CSSCritic - 軽量なCSSリグレッションテスト。
- Differencify - Puppeteerを用いた視覚リグレッションテスト用のライブラリ。
- DiffGoblin Action - GitHubアクションで2つのURLをスクリーンショットし、PRコメントとして視覚的な差分を投稿。設定不要、外部サービス不要。
- ember-visual-test - Ember向けのシンプルな視覚リグレッションテスト。
- FuncUnit - jQueryをベースとした機能テストセット。
- Frostbyte Screenshot Action - CI/CDにおける自動ウェブサイトスクリーンショット用のGitHubアクション。APIベース(ローカルブラウザ不要)、5つのビューに対応、全ページキャプチャ、ダークモードをサポート。
- Galen - SeleniumをベースにしたJavaフレームワーク。
- gatling - 統合された視覚RSpecマッチャーで、実際の視覚テストを簡単に行える (Ruby)。
- grunt-photobox - サイトのスクリーンショットセッションを用いて、プロジェクトのレイアウトが破損しないように防ぐプラグイン。
- Happo - CIにおけるユーザーインターフェースの視覚差分テスト。
- Hardy - Seleniumを駆動し、Cucumberを活用したCSSテスト。
- jest-image-snapshot - Jestマッチャーが pixelmatch を使用して画像比較を行う。
- jest-puppeteer-react - Reactコンポーネント向けのJestとpuppeteerによる視覚回帰テスト。
- Karma - AngularJSチームが開発したテストランナーで、すべてのニーズに適合。
- Lastest - Playwright を基盤とするビジュアルリグレッションテストプラットフォーム。スクリーンショット差分、ベースラインレビュー、AI による不安定テストの選別に対応し、Docker Compose または Kubernetes でセルフホスト可能。
- Loki - Dockerなどを使ってChromeでStorybookにおける視覚回帰テスト。
- Look-alike - Chrome拡張機能によるスクリーンショットの取得と比較。
- Lost Pixel - フルページ、コンポーネント(StorybookおよびLadle統合を介して)、カスタムショット(例:Cypressを介して)の包括的な視覚回帰テスト。
- Muppeteer - Chromeを用いた視覚回帰テストフレームワーク(Mocha および Puppeteer を使用)。
- Needle - NeedleはSeleniumとnose(Python)を用いて視覚テストを行うツール。
- Nightmare - Electronをベースとした高レベルブラウザ自動化ライブラリ。
- Nightwatch - Node.jsをベースにし、Webdriverプロトコルを使用した自動テストおよび継続的統合フレームワーク。
- OSnap - プロジェクト向けの高速かつ使いやすいスナップショットテストツール(1200個のスナップショットが3分以内に実行可能)。
- Playwright - Chromium、FirefoxおよびWebKitを1つのAPIで自動化するNodeライブラリ。
- Protractor - Angularアプリ向けのE2Eテストフレームワーク。
- Puppeteer - ヘッドレスGoogle ChromeのNode API。
- qd_screenshottests - CasperJSをベースにしたDrupal 8サイト向けのUI回帰および機能テスト。
- reg-cli - 視覚的なリグレッションテストツールで、読みやすい1ファイルのHTMLレポートを出力します。
- reg-suit - 画像を比較し、スナップショットを保存し、GitHubリポジトリに差分を通知する視覚的なリグレッションテストセットです。
- ResembleJS - JavaScriptとHTML5を使って画像を分析・比較します。
- Selenide - Selenium WebDriverをベースにしたフレームワークで、Javaで読みやすく、維持しやすい自動テストを書くことができます。
- Shoov - Drupal 7サイトに特化したUIリグレッションおよび機能テストです。
- Spectre - 画像比較機能とスナップショット管理用の管理インターフェースを提供します。
- test-crawler - ウェブサイトをクロールし、スナップショット比較レポートを提供するビジュアルリグレッションテストツール。
- TestCafe - 現代的なウェブ開発スタック向けの自動ブラウザテストです。
- Touca - スナップショットファイルの管理を気にせず、オープンソースで継続的なリグレッションテストを提供します。
- vrtest - Seleniumを用いて、クロスブラウザでコンポーネントの視覚リグレッションテストを実行するJavaScriptライブラリです。
- wdio-visual-regression - webdriver.io向けの視覚リグレッションツール
- Wendigo - Puppeteerに基づいたテスト志向のブラウザ自動化ライブラリ。
- Wraith - Docker対応の使いやすいRubyツール。
- Zombie.js - Node.jsを用いた、驚異的に速いヘッドレスフルスタックテスト。
オンラインサービス(a-z↓)
-
applitools - クラウドベースの視覚テスト。
-
Argos - 現代のエンジニアチーム向けのオープンソース視覚テストプラットフォーム。
-
Axcept - 全チーム向けのテスト。並列実行100テスト。エンドポイントモック。コードカバレッジ。
-
Browser Shots - スクリーンショットのみ。
-
browserling - リアルタイムインタラクティブなクロスブラウザテスト。
-
BrowserStack - オープンソースプロジェクトは無料。Selenium Webdriver をサポート。
-
BugBug.io - ウェブアプリケーション向け軽量なテスト自動化ツール。学習が簡単で、コーディングは不要。無料で無制限のテストが可能。月額追加料金を支払うことで、クラウド監視とCI/CD統合が利用可能。
-
CrossBrowserTesting - 1500以上の実際のブラウザとモバイルデバイスでの手動および探索型テスト。
-
Diffy - DrupalおよびWordPressに特化したクラウドベースの視覚回帰ツール。全ページスクリーンショットと極小の誤検出。サイトのURLを提供するだけで開始可能。コーディングは不要。
-
Fluxguard - スクリーンショットのピクセルおよびDOM変更の比較と回帰分析。
-
Ghost Inspector - introduction videoを参照してください。
-
Happo - 複数ブラウザに対応したクラウドベースのスクリーンショットテストサービス。
-
HeadSpin - HeadSpinの回帰テストは、新しいアプリビルド、OSリリース、機能追加、場所などでの劣化を分析するための強力な比較ツールを提供。
-
Keploy - 実際のAPI呼び出しから自動的にテストケースとモックを生成するオープンソース回帰テストツール。
-
LambdaTest - 2000以上の実際のブラウザとオペレーティングシステム上で自動化およびリアルタイムインタラクティブなクロスブラウザテストを実行。
-
Meticulous.ai - コードを書かずに簡単にフロントエンドテストを作成可能。Meticulousを使用してウェブアプリのワークフローを記録し、その後新しいフロントエンドコード上でそのワークフローを再実行し、2つの再実行結果を比較してテストを作成。
-
Micoo - すべてのUIアプリケーション向け視覚回帰ソリューションのオープンソースサービス
-
MyVisReg – ブラウザにインストールや設定なしで、直接ブラウザ内で視覚回帰テストを実行。
-
PageBolt - スクリーンショット、動画記録、PDF、ページ検査 API。デバイスエミュレーション、広告ブロック、Cookie バナー除去に対応。
-
percy.io - ウェブアプリケーション向けの継続的な視覚レビュー。
-
Pixeleye - オープンソースで、複数ブラウザに対応した視覚レビューおよびテストプラットフォーム。自前サーバー展開も可能。Storybook、Cypress、PlaywrightおよびPuppeteerに優れたサポートを提供。
-
Preflight: Cypress Recorder - ブラウザ内でAIを活用したCypressテスト/モデルを作成し、Cypressのメールおよび視覚テストを自動化。
-
Preflight - 最も簡単な視覚回帰テストおよび自動ウェブテストツール。(限定)無料利用。
-
Reflect - 視覚回帰テストおよびテスト自動化ツール。
-
screener.io - React向けに、オープンソースであると見られる。
-
screenster.io - クラウドベースのウェブおよびモバイルUI向け自動化テストプラットフォーム
-
Sherlo - React Native Storybook向けの視覚テストプラットフォーム。iOSおよびAndroidシミュレータでクラウド上でスクリーンショットを取得し、視覚的な変更を自動検出。
-
TestGrid - クラウドまたはオンプレミスで、クロスブラウザ、モバイルアプリ、性能、API のエンドツーエンドテストを自動化。
-
TestingBot - 3,600以上のブラウザで自動ビジュアルテストを実行可能。オープンソースプロジェクトは無料。
-
Testomat.io Reporter - テストケース管理システム(TCMS)のようなtestomat.ioなどにテストを収集し、手動および自動テストを一元で同期できる。
-
testRigor - ウェブ、モバイル、デスクトップテスト向けのE2E機能テスト自動化ツール。
-
Vidiff - 段階ごとのクラウドベース視覚回帰テスト。
-
Visual Knight - テストツール向けのクラウドベース視覚テストプラットフォームで、リアルタイム結果を提供。
-
Visual Regression Tracker - オープンソースの自前サーバー対応視覚回帰テストサービス
-
VisWiz.io - 柔軟な視覚回帰テストサービス
-
VRTs - Visual Regression Tests – WordPressプラグインでコンテンツ更新時にスクリーンショットを自動更新し、誤検出を防止。
-
Wopee.io - AI テストエージェントを活用した自律型ビジュアルリグレッションテストプラットフォーム。Playwright、Cypress、Robot Framework と統合。
ブログ記事(a-z↓)
- Angela Riggs: Visual Regression Testing with BackstopJS - 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 - ヘッドレスChromeが従来のテスト自動化アプローチを変える。
- CodeLift: Introduction to Diffy for Visual Regression Testing - 生産環境に到達する前に視覚および機能的な問題を検出。
- Everything you need to know about Visual Regression Testing in 2022 - 2022年時点のツールを用いた視覚回帰テストの概要。
- Garris Shipon: Automating CSS Regression Testing - BackstopJSを使ったチュートリアル。
- Garris Shipon: Visual Regression Testing For Angular Applications - BackstopJSを使ったチュートリアル。
- Keeping a React Design System consistent: using visual regression testing to save time and headaches - Percyおよびjest puppeteerを使ってReactコンポーネントライブラリを視覚的にテスト。
- Kevin Lamping: The 5 best visual regression testing tools - 比較:Wraith、PhantomCSS、Gemini、WebdriverCSSおよびSpectre。
- Make visual regression testing easier - Differencifyの概要とその使い方について
- Pavels Jelisejevs: Visual Regression Testing with PhantomCSS - PhantomCSSの概要
- Phillip Gourley: Making visual regression useful - BackstopJSを使うべき理由
- Poor man’s visual regression testing - PerfectPixel Chromeプラグインによる手動視覚回帰テストの向上
- theheadless.dev - PlaywrightとPuppeteerに関する実践ガイドと実行可能な例のブログ
- UI Visual Regression Testing with Micoo - Micooサービスを用いた視覚回帰テストの概要
- Visual Regression Test with WebdriverIO & WebdriverCSS - WebdriverIOとWebdriverCSSにSpec Reporterを用いたチュートリアル
- Visual regression testing for Hugo with Github-CI and BackstopJS - BackstopJSでHugoの回帰テストを自動化する方法
- Visual regression testing using Jest, Chromeless and AWS Lambda - Chromelessとjest-image-snapshotを用いたチュートリアル
- Visual Regression Testing with Puppeteer & Jest - Puppeteer、Jest、VisWiz.ioを用いた視覚テストの設定チュートリアル
スライド、講演、動画(a-z↓)
- CSS Regression Testing with Wraith - wraith、スクリーンショット比較ツールの基本的な紹介をしたスクリーンキャスト
- Cypress in 100 Seconds - Fireshipによる紹介動画
- Look-alike - visual regression testing tool - Look-alike Chrome拡張機能についてのデモ:その仕組みや開発の背景と目的
- Screencast on CSS critic - a lightweight testing framework for CSS - CSS Criticを使って最初のCSSテストを書く方法:テストを通過させ、破壊し、再び通過させる方法
- Screenster Tutorial - Screensterを用いた視覚自動テストの作成方法
- Visual Regression Testing - from a tool to a process Nikhil Vermaによる、BadooのモバイルウェブチームがPhantomCSSを導入し、CIプロセスに接続した方法
- Visual Regression Testing with PhantomCSS - Jon BellahによるWordPress開発中にPhantomCSSを使う方法についての講演
- Visual Regression Testing with Shoov - shoovの設定方法と最初のテストを書く方法
- Visual Regression Testing: Sanity Checks With BackstopJS - コードデモとベストプラクティスを含むスクリーンキャスト
- Scaling up your Screenshot Testing, without the Friction - Droidcon/Fluttercon Indiaで発表されたモバイル中心の講演。スクリーンショットテストのスケーリングにおける課題とその解決方法を説明
非推奨(a-z↓)
次のプロジェクトは現在活発に保守されていませんが、利用者が多いため掲載しています。
- CasperJS - PhantomJS および SlimerJS 用のナビゲーションスクリプトとテストツール。(2018年でアーカイブ)
- Chromeless - Chromeの自動化をシンプルに。AWS Lambda上でローカルまたはヘッドレスで実行可能。(2018年でアーカイブ)
- DalekJS - JavaScriptによるクロスブラウザ自動テスト。2017年6月4日以降メンテナンス停止。
- dpxdt - Pythonによるエンドツーエンドテスト。
- Gemini - SeleniumおよびCasperJSに対応した豊かなフレームワーク。Geminiは非推奨であり、hermioneを使用してください。
- Huxley - Selenium Webdriverに基づくPythonフレームワーク。
- Navalia - ヘッドレスChromeおよびGraphQLに基づくブラウザ自動化。(2018年でアーカイブ)
- OcularJS - PhantomJSを使用。
- PhantomCSS - PhantomJSまたはSlimerJSによる視覚/CSSのリグレッションテスト。2017年12月22日以降メンテナンス停止。
- PhantomFlow - 決定木に基づくUIテストの実験的アプローチ。
- PhantomJS - スクリプタブルなヘッドレスWebkit。2018年6月2日以降メンテナンス停止。
- trifleJS - インターネットエクスプローラー向けのヘッドレス自動化。(最終更新2016年)
- Visual Review - 視覚リグレッションのテストおよびレビューに使える人間が使いやすいツール。
- WebdriverCSS - WebdriverCSSはWebdriver.ioの上に構築され、Seleniumに接続されています。
その他
貢献
貢献方法の詳細は貢献ガイドを参照してください。
行動規範
詳細は行動規範を参照してください。要点は次のとおりです。
開かれた歓迎的な環境を育むため、貢献者とメンテナーは、年齢、体格、障害、民族、性自認と表現、経験の程度、国籍、外見、人種、宗教、性的指向やアイデンティティにかかわらず、すべての人がハラスメントを受けずにプロジェクトとコミュニティへ参加できるよう努めます。
ライセンス
本作品は Creative Commons Attribution-ShareAlike 4.0 International License の下で提供されます。 権利者はすべての貢献者です。