extension ExtPose

ビジュアルテスト - UI Testing Inspector

CRX id

begcddgpiamjkanbgdcihlbfdmogcloo-

Description from extension meta

ウェブページ更新前後のビジュアル変化を詳細レポートとDOM分析で比較します。

Image from store ビジュアルテスト - UI Testing Inspector
Description from store なぜ使用するのか? ⚡️ 100%ローカル&プライベート:すべてのスクリーンショットと比較データはあなたのコンピューターに保存されます。クラウドサービスなし、データ共有なし ⚡️ インスタントフィードバックループ:エクステンションをインストールし、ベースラインを取得し、コード変更を行い、違いを瞬時に確認できます。迅速な回帰テストに最適 ⚡️ ピクセルパーフェクト検出:人の目で見逃してしまう最小のビジュアル変化もキャッチします 主要機能: 🔸 ワンクリックベースライン:任意のウェブページの「前」状態を1回のクリックでキャプチャ 🔸 ピクセルパーフェクトビジュアル差分:ベースライン、現在の状態、正確な違いをハイライトした画像を示すクリアなレポートを取得 🔸 要素検査:コードだけでなく、DOMとCSS の変更点も確認 🔸 フルページ&ビューポートキャプチャ:可視エリアまたはスクロール可能なページ全体をキャプチャ 🔸 レポート履歴:最大15個の過去比較レポートを保存・確認 🔸 ライト&ダークテーマ:昼夜問わず快適な表示 詳細レポート内容 🔍 比較のたびに包括的なレポートが得られます: ✔️ 概要: ビジュアル差分の割合と追加/削除/変更要素の数 ✔️ サイドバイサイド表示: 「前」と「後」のスクリーンショットをハイライトされた「差分」画像と並べて比較 ✔️ DOM&CSS変更リスト: 変更された要素を正確に特定し、色・フォントサイズ・マージンなどコードレベルの変更を確認 ✔️ 技術詳細: レイアウト変更、コンテンツ修正、構造更新の包括的分析 キャッチできること: ➤ レイアウトシフトと不整列 ➤ 色とスタイルの変更 ➤ 欠損または移動した要素 ➤ フォントとテキストの修正 ➤ 画像の違い 動作方法: 1️⃣ ビジュアルベースラインを設定: テストページで「ベースライン設定」をクリック 2️⃣ 自信を持ってコーディング: CSS変更やコンテンツ更新を行う 3️⃣ 変更を即座にチェック: 「ベースラインと比較」をクリックし詳細レポートを確認 4️⃣ 差分を分析: サイドバイサイド表示と変更リストで問題を特定 5️⃣ ベースライン更新: 新バージョンに満足したら再度「ベースライン設定」で保存 プロのヒント ✨ ページ読み込み完了後にベースラインキャプチャ ✨ フルページキャプチャで包括的テスト ✨ 同じウィンドウサイズでスクリーンショットを撮り正確比較 ✨ コンテンツ安定時にキャプチャ ✨ 一度に一つの変更をテストし明確な結果を得る ✨ 大規模リファクタ前に重要ベースラインを保存 ✨ 類似ページ状態を比較(同じログイン状態・データ) 使用例 ✅ ビジュアル回帰テスト ✅ UI/デザイン検証 ✅ CSSリファクタリング ✅ フロントエンドテスト 対象ユーザー ➡️ フロントエンド開発者 ➡️ QAエンジニア ➡️ UI/UXデザイナー ➡️ フリーランサー&小規模チーム なぜ優れているか 🖼️ 手動スクリーンショットより効率的 📝 ゼロ学習曲線 FAQ ❓変更検出方法? 💬 ピクセル比較+構造スキャンのデュアルメソッド ❓データは安全? 💬 はい、すべてローカル処理・保存 ❓localhostで使える? 💬 もちろん、ローカル開発で完璧に動作 ❓動的コンテンツは? 💬 静的状態比較用。アニメーション完了後にキャプチャしてください

Latest reviews

  • (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.

Statistics

Installs
25 history
Category
Rating
5.0 (1 votes)
Last update / version
2025-07-04 / 1.0.0
Listing languages

Links