検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >Phantomcssによる視覚回帰テスト

Phantomcssによる視覚回帰テスト

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-21 08:24:11848ブラウズ

Phantomcssによる視覚回帰テスト

キーテイクアウト

  • Phantomcssは、視覚回帰テストを実行するnode.jsツールです。これは、Webページ要素が意図したとおりに表示されるかどうかをチェックする自動テストの形式です。これは、ページまたは特定の要素のスクリーンショットを撮影し、保存されたベースライン画像に比較し、スクリーンショットが一致しない場合に違いの画像を作成することで行います。
    • Phantomcssは、PhantomcssまたはSlimerjsブラウザ、Phantomjs 2またはSlimerjsとの相互作用のためのCasperjsを含むいくつかのコンポーネントに基づいて構築されており、画像を比較するためのJSに似ています。
  • Phantomcssを使用するには、テストスイートがnode.jsスクリプトの形で作成されます。テストスイートは、必要なページを開き、スクリーンショットを撮影し、それらを前の実行の画像と比較します。ウェブサイトに変更が加えられた場合、テストを再度実行して、新しいスクリーンショットをオリジナルと比較できます。
    • テスト中に視覚的な変化が検出された場合、PhantomCSSは変更された領域を強調します。これらの変更を受け入れるために、テストコマンドは追加の–Rebase引数で実行できます。これにより、以前のベースライン画像を新しいものに置き換えます。
    • あなたがあなたのキャリアで真剣な開発をしたなら、開発中に自動テストの重要性を認識したとき、あなたはおそらくポイントに達した可能性があります。あなたの経験に応じて、この実現は1つの大きなバーストであなたを襲うか、時間の経過とともに穏やかに来るかもしれませんが、最終的には第二の性質になります。自動テストには、単体テストから、分離されたコードをテストするとき、統合および機能的テストまで、システムのさまざまな部分がどのように一緒に動作するかをテストする際に、さまざまな形式があります。この記事は、一般的な自動テストの概要に関するものではありません。それは、
  • 視覚回帰テストと呼ばれる特別で比較的新しいニッチについてです
    • 。

視覚回帰テストは、Webページをテストするための代替アプローチを取ります。要素またはテキスト値がDOMに存在することを確認する代わりに、テストが実際にページを開き、この特定のブロックがに望んでいるように見えるかどうかを確認します。違いを確認するために、例を挙げてみましょう。あなたのウェブサイトに友好的なメッセージであなたの訪問者に挨拶することを想像

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

それが機能することを確認するために、メッセージを生成するコードを単位テストすることができます（そして必要です）。正しい名前を挿入することを確認します。また、SeleniumまたはProtractorを使用して機能的なテストを作成して、正しいテキストで要素が実際にページに存在するかどうかを確認することもできます。しかし、これで十分ではありません。テキストが正しく生成されたり、DOMに表示されたりするだけでなく、要素全体が正しいように見えることを確認する必要があります。誰かがテキストの色を誤ってオーバーライドしていません。それを行うための多くのツールがありますが、今日は特に1つのオプションを検討します。 phantomcssとは？

phantomcssは、視覚回帰テストを実行するためのnode.jsツールです。それはオープンソースであり、ハドルの人たちによって開発されました。 PhantomCSSを使用すると、ヘッドレスブラウザを実行し、ページを開き、ページ全体またはページ上の特定の要素のスクリーンショットを使用できます。このスクリーンショットは、将来の参照のためのベースライン画像として保存されます。ウェブサイトで何かを変更するたびに、PhantomCSSを再度実行できます。別のスクリーンショットを取り、それを元の画像と比較します。違いが見つからない場合、テストは渡されます。ただし、スクリーンショットが一致しない場合、テストが失敗し、レビューするために違いを示す新しい画像が作成されます。このアプローチにより、このツールはCSSの変更をテストするのに最適です。

Phantomcssは、いくつかの主要なコンポーネントの上に構築されています：

Casperjs - PhantomcssまたはSlimerjsブラウザーと対話するためのツール。ページを開いて、ボタンをクリックしたり、値を入力したりするなど、ユーザーインタラクションを実行できます。さらに、Casperjsは独自のテストフレームワークと、ページのスクリーンショットをキャプチャする機能を提供します。

Phantomjs 2またはSlimerjs - 2つの異なるヘッドレスブラウザー。どちらもPhantomCSで使用できます。ヘッドレスブラウザは、ユーザーインターフェイスのない通常のブラウザのようなものです。

    semble.js - 画像を比較するためのライブラリ。
  • Phantomcsは、PhantomjsとSlimerjsの両方と一緒に使用できますが、この記事ではPhantomjsを使用します。
    • スピンのために持ってみましょう
    • このツールを実際に使用する方法を確認するために、小さなテストプロジェクトを設定しましょう。そのためには、テストするためのWebページと、Casperjsのシンプルなnode.js Webサーバーが必要です。ページを開くことができます。
テストプロジェクトのセットアップ

いくつかのサンプルコンテンツを使用してindex.htmlファイルを作成します：

Webサーバーをインストールするには、NPMプロジェクトの初期化を行い、HTTP-Serverパッケージをインストールします。

サーバーを実行するには、簡単なNPMスクリプトを定義しましょう。次のスクリプトセクションをpackage.json

に追加するだけです
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

プロジェクトフォルダーからnpm開始を実行でき、インデックスページはデフォルトのアドレスhttp://127.0.0.1:8080でアクセスできます。サーバーを起動し、今のところ実行したままにします。しばらくする必要があります。

phantomcssのインストール

phantomcssのインストールは簡単です。プロジェクトにいくつかの依存関係を追加するだけです。 

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>
  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
テストスイートの作成

最初のテストスイートをセットアップするために必要なすべてがあります。 PhantomCSSテストスイートは、node.jsスクリプトの形で作成され、ウェブサイトの必要なページを開き、スクリーンショットを撮影し、前の実行の画像と比較します。 Phantomcss自体のデモに基づいた簡単なテストケースから始めます。

このテストはhttp://127.0.0.1:8080/を開き、ボディ要素のスクリーンショットを取り、スクリーンショット/body.png。 
<span>npm init
</span><span>npm install http-server --save-dev</span>
テスト自体を配置したら、残っているのは、テストを実行するスクリプトを定義することだけです。次のスクリプトをpackage.jsonに追加しましょう。

次のコマンドを実行して実行できます。

あなたが見る出力は次のように見えるはずです：
<span>"scripts": {
</span>  <span>"start": "http-server"
</span><span>},</span>

初めてテストを実行したため、新しいベースラインスクリーンショットを作成するだけで、比較は実行されません。先に進み、スクリーンショットフォルダー内を覗きます。このような画像が表示されるはずです：
<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>

これはあなたのウェブサイトがどのように見えるかの黄金の基準であり、テストの将来の実行は彼らの結果をこの画像と比較します。 
<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
  phantomcss<span>.init({
</span>    <span>rebase: casper.cli.get('rebase')
</span>  <span>});
</span>
  <span>// open page
</span>  casper<span>.start('http://127.0.0.1:8080/');
</span>
  <span>// set your preferred view port size
</span>  casper<span>.viewport(1024, 768);
</span>
  casper<span>.then(function() {
</span>      <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span>      phantomcss<span>.screenshot('body', 'body');
</span>  <span>});
</span>
  casper<span>.then(function now_check_the_screenshots() {
</span>    <span>// compare screenshots
</span>    phantomcss<span>.compareAll();
</span>  <span>});
</span>
  <span>// run tests
</span>  casper<span>.run(function() {
</span>    <span>console.log('\nTHE END.');
</span>    casper<span>.test.done();
</span>  <span>});
</span><span>});</span>
回帰の導入

同じテストコマンドを再度実行すると、すべてのテストが正常に合格したことが報告されます。 Phantomcssによる視覚回帰テスト

これは、ウェブサイトで何も変更していないため予想されることです。何かを壊して、テストをもう一度再実行しましょう。たとえば、index.htmlのスタイルを変更してみてください。たとえば、ブロックのサイズを400pxに減らしてください。次に、テストをもう一度実行して、何が起こるか見てみましょう：

ここでいくつかの重要なことが起こりました。最初に、Phantomcssは、スクリーンショットBody_0.pngの不一致のためにテストが失敗したと報告しました。不一致は11.41％で測定されます。第二に、現在のバージョンと以前のバージョンの違いは、障害フォルダーに保存されました。開くと、このようなスクリーンショットが表示されます：

<span>"test": "casperjs test test.js"</span>
スクリーンショットは、変更された領域を便利に強調しているため、違いを簡単に見つけることができます。

変更を受け入れる

違いが強調されたので、変化を受け入れるにはどうすればよいですか？ブロックの幅の減少に固執し、現在のビューを新しい標準として受け入れたいことをツールに伝えることができるはずです。それを行うには、追加でテストコマンドを実行できます - rebase引数：

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

2つのダブルダッシュに注意してください。これは、パラメーターを基礎となるコマンドに渡すNPMの方法です。したがって、次のコマンドにより、Casperjs Test test.js -Rebaseが作成されます。この変更を受け入れたので、以前のベースライン画像は新しいものに置き換えられます。

それをさらに取る

基本の段階が得られたので、このツールを独自のワークフローに統合することを考え始めることができます。それはかなりプロジェクト固有であるため、その詳細には入りませんが、ここに熟考する質問がいくつかあります：

    実際のウェブサイト、または別のUI要素のみが存在するあるある種のスタイルガイドに対してテストを実行しますか？
  • あなたのサイトには動的なコンテンツがありますか？はいの場合、コンテンツを変更すると、テストが壊れます。それを避けるために、それに対してテストを実行するために、静的コンテキストを備えたWebサイトの個別のバージョンを設定する必要があります。
    • バージョンコントロールにスクリーンショットを追加しますか？はい、あなたはそうする必要があります。
    • ページ全体のスクリーンショットを撮るつもりですか、それとも別々の要素を撮るつもりですか？
    • このツールを使用して、自動テストでWebサイトの視覚的な側面をカバーできるようになりました。ユニットと機能テストが既に整っていると、この新しい戦略は、テストフロンティアの狭いギャップを埋めます。まだテストが初めてであっても、これは開始するのに適した場所です！
    • PHANTOMCSSによる視覚回帰テストに関するよくある質問（FAQ）
Phantomcssとは何ですか？それはどのように機能しますか？ 視覚回帰テストにファントムクを使用するにはどうすればよいですか？

視覚回帰テストには、Phantomcssを使用するには、最初にPhantomCSSにスクリーンショットをキャプチャするものを伝えるテストスクリプトを作成する必要があります。このスクリプトは、javaScriptまたはcoffeescriptで書くことができます。スクリプトの準備ができたら、Phantomjsを使用して実行できます。 PhantomCSSは、指定された要素のスクリーンショットをキャプチャし、それらをベースライン画像と比較し、違いを示すレポートを生成します。 Mocha、Jasmine、Qunitなど、他のテストフレームワークと一緒に使用してください。また、JenkinsやTravis CIなどの継続的な統合システムと統合することもできます。スクリーンショットをキャプチャして比較するプロセスを自動化し、開発者に多くの時間を節約できます。また、ベースラインとテスト画像の違いを簡単に見つけることができる視覚レポートを提供します。さらに、PhantomCSSはレスポンシブデザインテストをサポートしているため、開発者がさまざまな画面サイズでWebページをテストできるようにします。古いベースライン画像を削除して、テストスクリプトを再度実行するだけです。 PhantomCSS will capture new screenshots and use them as the new baseline images.

Can PhantomCSS handle dynamic content?

Yes, PhantomCSS can handle dynamic content.これにより、開発者はスクリーンショットをキャプチャする前に遅延を指定し、動的なコンテンツに十分な時間を与えることができます。 It also supports the use of callbacks to wait for specific events before capturing screenshots.

How do I debug tests in PhantomCSS?

PhantomCSS provides several options for debugging tests.メッセージをコンソールにログに記録し、失敗したテストを画像ファイルとして保存し、テスト実行のビデオを作成することもできます。 These features make it easier to identify and fix issues in your tests.

Can I customize the comparison process in PhantomCSS?

Yes, PhantomCSS allows you to customize the comparison process.比較タイプ、不一致の許容範囲、および出力設定を設定できます。 This gives you more control over the comparison process and allows you to tailor it to your specific needs.

What are the alternatives to PhantomCSS for visual regression testing?

There are several alternatives to PhantomCSS for Backstopjs、Wraith、Geminiを含む視覚回帰テスト。これらのツールは、PhantomCSと同様の機能を提供しますが、特定のニーズに応じて、さまざまな長所と短所がある場合があります。

以上がPhantomcssによる視覚回帰テストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript json css html npm coffeescript Static define if for while try Error break double using Interface delete JS console number default dom this display jenkins kind http ui everything Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：スペクター：軽量CSSフレームワーク次の記事：スペクター：軽量CSSフレームワーク

関連記事

続きを見る