phantomCSS を使用して、HTML ページ内のさまざまなコンポーネントを単体テストしようとしています。テスト HTML ページにドロップダウン要素が含まれています。この HTML で、これらの要素を (jquery を使用して) に変換する JavaScript ファイルを読み込みます。
したがって、私のtestSuiteでは、セレクター「div.selected」を見つけて、この要素のスクリーンショットをキャプチャしようとしています。ここでの問題は、PhantomCSS がそのセレクター要素をまったく見つけられないことです。
さらに分析したところ、ページに含まれているスクリプトが実行されていないことがわかりました。以下のコードを参照してください。コマンドラインではなく、gulp-phantomcss を使用してテストを実行していることに注意してください。
components.html
<html>
<body>
<select id="test" name="test">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" data-out-of-stock="true">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
</select>
<script src="toolkit/scripts/toolkit.js"></script>
</body>
</html>
toolkit.js が読み込まれると、上記の HTML は次のように変換されます。
<html>
<body>
<select id="test" name="test" data-initialized="" data-node-uid="1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" data-out-of-stock="true">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
</select>
<div class="select">
<div class="selected">Alabama</div>
<div class="options">
<input id="test_0" type="radio" name="test" value="AL"><label for="test_0">Alabama</label>
<input id="test_1" type="radio" name="test" value="AK"><label for="test_1">Alaska</label>
<input id="test_2" type="radio" name="test" value="AZ"><label for="test_2">Arizona</label>
<input id="test_3" type="radio" name="test"
value="AR"><label for="test_3">Arkansas</label><input id="test_4" type="radio" name="test" value="CA" disabled=""><label for="test_4" class="out-of-stock">California</label>
<input id="test_5" type="radio" name="test" value="CO"><label for="test_5">Colorado</label><input id="test_6" type="radio" name="test" value="CT"><label for="test_6">Connecticut</label>
<input id="test_7" type="radio" name="test" value="DE"><label for="test_7">Delaware</label><input id="test_8" type="radio" name="test" value="DC"><label for="test_8">District Of Columbia</label>
</div>
</div>
</body>
</html>
以下は私のtestSuite.jsファイルです（今のところ、探している要素のスクリーンショットを取得できるかどうかを確認しようとしています）。
casper.start('http://localhost:3000/components.html');
casper.then(function(){
phantomcss.screenshot("div.selected", 'dropdown/0.1 default-dropdown-standard');
});
casper.run();
testSuite を実行すると、以下のメッセージが表示されます。
[PhantomCSS] Screenshot capture failed: No element matching selector found: div.selected
ここで何か不足していますか？私たちを助けてください。
エラーメッセージにリスナーを追加するためにtestSuiteを少し変更したところ、以下のエラーが発生しました。
[debug] [phantom] url changed to "http://localhost:3000/components.html"
Page Error: TypeError: 'undefined' is not an object (evaluating '$(this.get(0).children).deepEach')
ページが読み込まれると、toolkit.js でこのエラーがスローされます。しかし、この HTML をブラウザーで開いても、同じエラーはスローされません。これがヘッドレス ブラウザの動作によるものかどうかはわかりません。どんな助けでも大歓迎です。