PhantomCSS -未执行Javascript
我正在尝试使用phantomCSS对HTML页面中的不同组件进行单元测试。我的测试HTML页面包含dropdown元素。在这个HTML中，我加载了一个javascript文件，该文件将这些元素转换为(通过使用jquery)。
因此，在我的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时，没有抛出同样的错误。不确定这是否是因为无头浏览器中的行为。任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2015-03-06 05:14:35
我们能够解决这个问题。看起来components.html中包含的toolkit.js确实使用了bonzo而不是jquery来将HTML select转换为s。
由于某些原因，当我们运行测试套件时，$没有被识别。我们把$改成了"bonzo“，它解决了这个问题。
https://stackoverflow.com/questions/28817011
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号