使用 CasperJS 测试多个 HTML 页面？答案

【问题标题】：Testing multiple HTML pages with CasperJS?使用 CasperJS 测试多个 HTML 页面？
【发布时间】：2015-03-30 16:32:14
【问题描述】：

我正在一个带有搜索框的网页上使用 CasperJS。使用 Casper，我能够成功地执行搜索并看到表单已填写并执行搜索，但是我无法专门获取结果数量来测试它是否有效。

当我查看网页的源代码时，我有元素的 XPath，它嵌套在几个 div 中。

但是当我尝试在该路径上执行assertExists()，甚至将getElementByXPath() 的结果返回给一个变量时，它都不起作用。在第一种情况下测试失败，在第二种情况下它打印null。

这是 XPath：

//*[@id="total"]

source 的 sn-p 如下所示：

<div id="pgContent"><div id="results_pagination1_container">
    <span style="float: right; font-size: .9em">
    Found <span id="total">721</span> item(s)</span>
</div>

这是 CasperJS 代码，与此处相关。

casper.test.begin(
    'Testing that we get the right amount of results for a search query',
    2, function suite(test) {
        casper.start(catapult, function() {
            test.assertTitle("Search", "Search"); // Good
            test.assertExists('#input-searchbox'); // Good
            this.fillSelectors('form#inputForm', {
                'input[name="queryStr"]' : 'airplane'
            }, true);

            //this.click('input#btnSearch');
        });
        casper.then(function() {
             var resultsNum = __utils__.getElementByXPath('//*[@id="total"]');
            this.echo(resultsNum);
            test.assertExists('//*[@id="total"]'); 
        });

【问题讨论】：

请定义“不起作用”并显示您当前的代码。
已添加评论。不起作用，因为它在第三次测试中不断失败，并且 resultsNum 生成 null 而不是该 xPath 标记处的元素。

标签： javascript html testing xpath casperjs

【解决方案1】：

Clientutils 和 DOM 仅在页面上下文中访问

CasperJS clientutils 模块仅在页面上下文中定义。每当 CasperJS 启动时，它都会将这些实用程序注入到页面中以方便以后使用。问题是页面及其 DOM 只能从 evaluate() 函数内部访问。

要记住的另一件事是，您不能将 DOM 节点移出页面上下文。要么您完全在页面上下文（evaluate() 内部）中完成您的工作，要么获得节点的表示，如 textContent 属性：

var resultsNum = this.evaluate(function(){
    return __utils__.getElementByXPath('//*[@id="total"]').textContent;
});

这是来自documentation 的部分内容（因为 CasperJS 是建立在 PhantomJS 之上的）：

注意：evaluate 函数的参数和返回值必须是简单的原始对象。经验法则：如果可以通过 JSON 序列化就可以了。

闭包、函数、DOM 节点等将起作用！

CSS 选择器和 XPath 表达式的区别

另一件事是，如果没有通过名称另行说明，所有函数都假定选择器是 CSS 选择器。查看test.assertExists('//*[@id="total"]'); 可以清楚地看出'//*[@id="total"]' 不是 CSS 选择器，而是一个XPath 表达式。您可以通过 XPath 实用程序在 CasperJS 中使用 XPath 表达式：

var x = require('casper').selectXPath;
test.assertExists(x('//*[@id="total"]'));

或者您可以简单地使用等效的 CSS 选择器：

test.assertExists('#total');

【讨论】：