7

CSS リファクタリング用のビジュアル リグレッション テスト ツールを探しており、Web サイトに意図しないカスケード動作がないかどうかを確認しています。

理想的には、Web サイトを (ローカルでも) クロールし、各ページのスナップショットを取得して単一のリポジトリに保存できるツールです。

2 回目の実行時には、前回の実行時とは視覚的に異なるページが表示されます。

さらに良い：

  1. ページの 2 バージョンのオーバーラップ XOR ビューを表示できる場合。
  2. さまざまなブラウザーのレンダリング結果を比較します (自動化された Microsoft Expression Web 比較機能に似ています)。
4

6 に答える 6

6

私の現在のお気に入りは、 BrowserStack Automate APIと組み合わせたWebDriverCSSです。このツールのペアにより、BrowserStack がサポートする非常に幅広いデバイスにわたって、マルチプラットフォーム、マルチブラウザーの回帰テストが可能になります。コードを書く必要がありますが、Phantom や Slimer にバインドされたどのソリューションよりもはるかに包括的です。

古い W​​ebKit が唯一のテスト UA であることに問題がなければ、PhantomCSSを使用したCSS 回帰テストに関する優れた記事があります。彼らの基本的な例は、元の質問が望んでいたものを正確に提供します: 2 つのコミット間の視覚的な違いです。

コーディングを必要としない (YAML 構成のみ) よりシンプルなツールについては、PhantomCSS よりも Wraith の方を頻繁に使用します。Wraith が好きで、Casper コードを書きたくない場合は、@ericcraio の回答に投票してください。

于 2013-06-23T15:12:05.550 に答える
1

ブラウザショットをチェックしてください。これは無料のサービスです。

無料ユーザーとして毎日実行できるテストの数には、いくつかの制限があります。しかし、リトマスとは異なり、サポートされているすべてのブラウザでテストを実行できます。Litmusでは、無料のユーザーがInternetExplorer7とMozillaFirefox2で自分のWebサイトをテストすることしかできません。

于 2010-03-17T12:58:46.877 に答える
1

SUCCSS と呼ばれる CSS 回帰テスト ツールを開発しています。これは npm グローバルのオープン ソースです: https://github.com/B2F/Succss。Atm で、完全なドキュメントを読むことができます: http://succss.ifzenelse.net

于 2015-02-23T22:42:35.133 に答える
0

リトマスをチェックしてください。

それはあなたのサイトをクロールし、あなたが望むすべてのブラウザの近くで画面キャプチャを取得します。

コア機能に加えて、Litmusを使用すると、バグを追跡したり、プライベートサイトにログインしたり、テストから互換性レポートを公開したりすることもできます。

于 2010-03-17T12:59:03.523 に答える
0

あなたが説明したことは、まさにMogotestが行うことです。サイトにログインし、設定したすべてのページのスクリーンショットを撮り、Web 整合性テストの原則を使用して自動比較を行います。

また、履歴を完全に追跡することで、何かが壊れたとき (およびその時点でサイトがどのように見えたか) を正確に伝えることができます。最後に、テスト実行ごとにコードのスナップショットを作成し、各問題で何が変更されたかを正確に示すことができます。

この回答の自己宣伝的な性質については申し訳ありません。私はあなたが探しているものに対処することを徹底的にしたかっただけです.

于 2013-01-22T20:29:36.463 に答える