問題タブ [phantomcss]

レイアウトにビジュアル比較テストを追加しようとしていますが、テスト環境が正しく構成されていないようです。

私は使用しています：

• CasperJS
• PhantomJS
• PhantomCSS
• ResembleJS

これは私のテスト JS ファイルです。

テストを実行casperjs test tests/layout.jsすると、スクリーンショットが作成され、エラーがスローされます。

ファイルの場所を確認しましたresemblejscontainer.htmlが、スローされたエラーに記載されている場所に正確にありました。

どこが間違っていますか？

私はPhantomCSSを使用して、Web サイトのスクリーンショットを含む視覚回帰テストを作成しています。ページ上のすべての要素でCasperJSを使用してクリックをシミュレートしたいと考えています。aすべての href を取得しopen、各リンクにアクセスするために使用できますが、イベントをシミュレートclickして JavaScript の相互作用などを行いたいと考えています。何らかの理由で、これを行う方法を見つけることができませんでした。

次の方法で、ページ上のすべてのリンクを取得できます。

しかしcasper.click()、パラメーターとしてセレクターを受け取り、このサイト全体に非常に一般的なリンクがあります。かなり些細な作業のように思えますが、何らかの理由でそれを行う方法が見つかりませんでした。

Stack の他の多くの人が苦労しているように、私は CasperJS テストを複数のファイルに分割しようとしています。ドキュメントを読んで、ここで回答をクロールするのに 3 日間費やしましたが、役立つものは何も見つからないようです。

--pre、--post、および --include コマンドを使用して含める 3 つのスクリプト (セットアップ、関数、クリーンアップ) があります。各テスト ファイルを個別に実行すると、うまく機能します。

...プロデュース...

ただし、ディレクトリ全体で CapserJS を実行しようとすると、完全に失敗するわけではありません。動作せず、--pre ステップから --post ステップにジャンプして、ディレクトリ：

合格も不合格もありません。それだけ。私は完全に途方に暮れています。デバッグ出力には何もありません。以下にスクリプト出力を含めました。次に何をしようか迷っている人がいたら、ぜひ聞いてみたいです！

phantomcss-functions.js :

phantomcss-setup.js :

ファントムcss-cleanup.js

tables.js (テスト ファイルのサンプル)

casper.then()ホバー、クリック、フォーカスなど、いくつかのボタンの視覚的な状態をテストしようとしていますが、基本的に同じコマンドを何度もコピーしない方法を探していました。単純なループでこれを行うことができるはずだと思いました。

(現在) 5 つのボタンの小さな配列を作成し、記録したい状態ごとに CasperJS の手順を追加しながら、それらを while ループしました。残念ながら、実際に実行されるのは最後の手順のみです。

ループに関する多くの投稿を読みましたが、それらはすべて、ページ上のリンクをクリックするか、探しているものと一致しないその他のシナリオに関係しているようです。

多分私は密集しているだけですか？以下のコード...

アプリケーションに grunt-phantomcss をインストールしようとしていますが、次のエラーが発生します。

これを修正するために私ができることを誰かが知っていますか? bower と npm のキャッシュを消去しようとしましたが、同じエラーが発生します。

オフライン マシンにノード パッケージをインストールするにはどうすればよいですか?

たとえば、インターネット接続のないマシンに PhantomCSS をインストールしようとしています。

phantomCSS を使用して、HTML ページ内のさまざまなコンポーネントを単体テストしようとしています。テスト HTML ページにドロップダウン要素が含まれています。この HTML で、これらの要素を (jquery を使用して) に変換する JavaScript ファイルを読み込みます。

したがって、私のtestSuiteでは、セレクター「div.selected」を見つけて、この要素のスクリーンショットをキャプチャしようとしています。ここでの問題は、PhantomCSS がそのセレクター要素をまったく見つけられないことです。

さらに分析したところ、ページに含まれているスクリプトが実行されていないことがわかりました。以下のコードを参照してください。コマンドラインではなく、gulp-phantomcss を使用してテストを実行していることに注意してください。

toolkit.js が読み込まれると、上記の HTML は次のように変換されます。

以下は私のtestSuite.jsファイルです（今のところ、探している要素のスクリーンショットを取得できるかどうかを確認しようとしています）。

testSuite を実行すると、以下のメッセージが表示されます。

ここで何か不足していますか？私たちを助けてください。

エラーメッセージにリスナーを追加するためにtestSuiteを少し変更したところ、以下のエラーが発生しました。

ページが読み込まれると、toolkit.js でこのエラーがスローされます。しかし、この HTML をブラウザーで開いても、同じエラーはスローされません。これがヘッドレス ブラウザの動作によるものかどうかはわかりません。どんな助けでも大歓迎です。

grunt-phantomcssプラグイン (基本的には PhantomJS と CasperJS のラッパー)を使用してページをテストしているところです。

私たちのサイトには動的に入ってくるものがいくつかあります (ユーザーのランダムなプロファイル画像とランダムな広告) 技術的には、ページを読み込むたびに見た目が異なります。つまり、ビルドが失敗します。Casper/Phantom がそれらを認識せずにビルドに合格するように、古き良き DOM API 手法に飛び込んで使用し、これらの画像を「グレー表示」/不透明にすることができるようにしたいと考えています。

すでに見てきましたpageSettings.loadImages = falseが、技術的には機能しますが、すべての画像も削除されます。つまり、非広告、非プロファイルの画像でさえ除外されます.

これは非常に基本的なサンプル テスト スクリプトです (動作しません)。

他の人がこれをどのように解決したか知りたいです。なぜなら、これは奇妙な使用例ではないと確信しているからです (非常に多くの人が自分のサイトに動的広告を持っているため)。