Question

我正在尝试使用phantomCSS对HTML页面中的不同组件进行单元测试。我的测试HTML页面包含下拉元素。在这个HTML上，我加载了一个将这些元素转换为（通过使用jquery）的javascript文件。

所以，在我的testSuite中，我试图找到选择器＆＃34; div.selected＆＃34;并捕获此元素的屏幕截图。这里的问题是，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时，不会抛出相同的错误。不确定这是否是因为无头浏览器中的行为。任何帮助将不胜感激。

Answer 1

我们能够解决这个问题。看起来像components.html中包含的toolkit.js确实使用bonzo而不是jquery将HTML select转换为s。

由于某种原因，我们运行测试套件时无法识别$。我们将$更改为“bonzo”并解决了问题。

PhantomCSS - Javascript没有被执行

1 个答案: