--- title: さまざまなブラウザーやデバイスのスクリーンショットを視覚的に比較します。 description: TestingBot のビジュアル UI 回帰テストを使用して、Web サイトまたはモバイル アプリの視覚的なバグを見つけます。さまざまなブラウザーやモバイル デバイスで自動スクリーンショットを取得し、比較します。 Windows、Linux、Mac、Android、iOS。 source_url: html: https://ja.testingbot.com/features/screenshot-testing md: https://ja.testingbot.com/features/screenshot-testing.md --- # 自動化されたビジュアル UI 回帰テスト Web ページやモバイル アプリの視覚的な問題を早い段階で見つけて修正します。実際のブラウザと物理的なモバイル デバイスでテストします。 TestingBot のコードレス ビジュアル UI テストを使用して、Web サイトで視覚的な問題が検出されたときにアラートを受け取ります。 [無料で始める](https://ja.testingbot.com/users/sign_up) [デモをリクエストする](https://testingbot.com/demo) ![自動化されたビジュアル UI 回帰テスト](https://ja.testingbot.com/assets/hero/visual-abbead5878a5c7c5d80577279ba1f4c14a31df4ffdb0309dad7f6b7c3b09e63e.svg) 世界で最も革新的な企業のいくつかから信頼されています ![カバレッジによる品質](https://ja.testingbot.com/assets/features/screenshot-command-8a1297c081a302dc4dbc77a4e4461dec802ee7f7cfc8153948e2e06ee30b891e.jpg) ## 簡単なビジュアル回帰テスト たった1行のコードで、既存のテストフレームワークでビジュアル回帰テストが可能になります。テスト中にレイアウトのずれ、UIの不整合、ビジュアルの回帰を迅速に検出できます。 または、監視したいURLを入力してください。TestingBotは定期的にスクリーンショットを撮り、変更が検出されると通知します。 [無料で始める](https://ja.testingbot.com/users/sign_up) ## 視覚的な回帰をレビューして承認する あなたとあなたのチームは、ビジュアル テストの結果を検査し、特定のビジュアル変更を承認または拒否できます。ベースラインのスクリーンショットと新しいスクリーンショットのスライダーを比較したり、発生した変更の差分画像を検査したりできます。 ![カバレッジによる品質](https://ja.testingbot.com/assets/features/visual_schedule-8bc03556f3225d26b8fd4e5bdb31c1881ef2abb3257c35093cc441b5b62abbaa.jpg) ## コードレスのビジュアル UI テスト 数分で Web サイトの UI の欠陥のテストを開始できます。 URL を入力し、テストするブラウザを選択するだけです。テストを実行する頻度とアラートの受け取り方法を定義します。 視覚的な変化が発生すると、変更内容を強調表示するスクリーンショットと差分画像を含むアラートが即座に届きます。 [無料で始める](https://ja.testingbot.com/users/sign_up) ## 精度を最適化 UI 検証プロセス中に誤検知が発生しないように、正確性を考慮してビジュアル テストを構築しました。 ### アニメーションとビデオをフリーズする 誤検知を防ぐため、ビジュアルスナップショット中はアニメーションとビデオが一時的に停止されます。 ### UI要素を無視する 変更される可能性があり、スクリーンショットとは無関係な特定の UI 要素は無視されます。 ### ピクセルパーフェクトのスクリーンショット 数百ものブラウザやデバイスで Web サイトのフルページ、アバブザフォールド、またはクロムレスのスクリーンショットを一度に撮影します。 ## テスト自動化フレームワーク TestingBotのUIテストは、Selenium、Appium、Puppeteer、Playwrightとシームレスに統合されます。コードを1行追加するだけで、自動化されたビジュアル回帰テストで既存のテストを強化できます。 [![Selenium Testing](https://ja.testingbot.com/assets/support/selenium-266ecc0599068fc6eca0bcd9174fb46053c95cebe1c66f7a50c480f3f1a52929.svg)](https://testingbot.com/support/visual-testing/automated/selenium) ### [Selenium](https://testingbot.com/support/visual-testing/automated/selenium) すべての主要なブラウザをサポートするWebDriverを使用した人気のあるブラウザ自動化フレームワーク。 [![Appium Testing](https://ja.testingbot.com/assets/support/appium-4b35a8bb56bae236bd84c539cee9b8bbb489a55ddf48e32d059c86685d230354.svg)](https://testingbot.com/support/visual-testing/automated/appium) ### [Appium](https://testingbot.com/support/visual-testing/automated/appium) WebDriverを使用するMobileAutomationFrameworkは、物理デバイスおよびシミュレーター/エミュレーターで実行されます。 [![Playwright Testing](https://ja.testingbot.com/assets/support/playwright-2dcb4e75b55ac0d1135cfa47be6137b13f46a2047ce78b96a34f51b0e2cc0d96.svg)](https://testingbot.com/support/visual-testing/automated/playwright) ### [Playwright](https://testingbot.com/support/visual-testing/automated/playwright) Microsoftによって構築されたPuppeteerに似ていますが、ChromeとEdgeをサポートしています。 [![Puppeteer Testing](https://ja.testingbot.com/assets/support/puppeteer-0a8cdd38af69dabd46638afbb3bffc8a372902949aa599663ec379f3e875263c.svg)](https://testingbot.com/support/visual-testing/automated/puppeteer) ### [Puppeteer](https://testingbot.com/support/visual-testing/automated/puppeteer) GoogleによるChromeDevToolsベースの自動化フレームワーク。 ChromeおよびEdgeブラウザをサポートします。 ## よくある質問 ### これを使用して視覚的な欠陥を特定するにはどうすればよいですか? TestingBot は、正しいとマークされた画像と、撮影されたばかりの新しいスクリーンショットとの間で、ピクセルごとの自動比較を実行します。異なるピクセルの量がしきい値を超える場合、テストは不合格とみなされます。 これは、CSS スタイルや位置が正しくない、またはページに欠落している Web サイトの新しいバージョンを展開するときに発生する可能性があります。 Web ページの UX に悪影響を与える前に、視覚的なバグを発見します。 ### なぜ機能テストでは視覚的な問題をカバーできないのでしょうか? 定期的な機能テストで、寸法、位置、スタイルをテストできます。欠点は、すぐにコード内のチェックポイントが大きな負担になることです。 コード内で視覚的なチェックを行う代わりに、スナップショットを取得して比較する方がはるかに効率的です。視覚的な結果は、開発者や QA にとってもはるかに簡単に解釈できます。 ### いつビジュアル テストを使用する必要がありますか? 理想的には、CI/CD パイプラインの一部として視覚的なチェックを実行します。フロントエンド コードをチェックインするたびに実行して、新しいコードが製品に悪影響を及ぼさないようにすることができます。 ### AIはビジュアルテストに使用できますか? 機械学習アルゴリズムをトレーニングして、視覚的な違いを発見できます。 AI はトレーニングされたデータに依存しているため、偽陽性/偽陰性を報告する可能性があります。これは万能のソリューションではなく、正確なピクセル マッチングと比較すると失敗することがよくあります。 ### スナップショット テストはどのように機能しますか? Web ページ上の UI のビジュアル テストのコンテキストにおけるスナップショット テストは、Web ページの初期状態のスクリーンショットをキャプチャします。次に、それらを後続のレンダリングと比較します。外観に 1 つ以上の変化が発生した場合、テストは不合格とみなされます。これは、UI 要素の一貫性を確保するのに役立ちます。 ### 無料トライアルにサインアップ TestingBot を使用して、アプリと Web サイトの視覚的なテストを開始します。 [無料トライアルを開始する](https://ja.testingbot.com/users/sign_up) あなたが好きかもしれないリソース [![Visual Regression Testing with Python](https://ja.testingbot.com/assets/resources/articles/20-823a333072d87c93f6d75a502e3073e32bd0bee1d3142540ce0b42da6fa7ccf0.webp)](https://testingbot.com/resources/articles/python-visual-testing) ### [Visual Regression Testing with Python](https://testingbot.com/resources/articles/python-visual-testing) Find out how to do automated visual UI testing with the power of Python and TestingBot. [続きを読む](https://testingbot.com/resources/articles/python-visual-testing) [![Angular UI Testing](https://ja.testingbot.com/assets/resources/articles/21-15af461a46c449ef26dfb952ed9d0fc327c97d9ca815f24f8fe9ee60b9aa64a5.webp)](https://testingbot.com/resources/articles/angular-ui-testing) ### [Angular UI Testing](https://testingbot.com/resources/articles/angular-ui-testing) Learn more about using Visual UI Testing in combination with Cypress to test Angular UI apps. [続きを読む](https://testingbot.com/resources/articles/angular-ui-testing) [![Visual Regression Testing](https://ja.testingbot.com/assets/blog/2024/visual-testing.webp)](https://testingbot.com/blog/visual-regression-testing) ### [Visual Regression Testing](https://testingbot.com/blog/visual-regression-testing) Learn about TestingBot's visual testing feature, allowing you to easily compare layouts across browsers and devices. [続きを読む](https://testingbot.com/blog/visual-regression-testing)