0

我正在尝试使用 phantomCSS 对 HTML 页面中的不同组件进行单元测试。我的测试 HTML 页面包含下拉元素。在这个 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 时，不会抛出同样的错误。不确定这是否是因为无头浏览器中的行为。任何帮助，将不胜感激。

4

1 回答 1

0

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

并且由于某种原因，当我们运行测试套件时，$ 未被识别。我们将 $ 更改为“bonzo”，它解决了这个问题。

于 2015-03-05T21:14:35.130 回答