使用phantomjs / casperjs测试DOM元素

时间:2013-07-29 13:33:59

标签: javascript unit-testing dom phantomjs casperjs

我有一个基于AJAX的javascript应用程序,我想用接口测试来介绍。例如,我想编写一个加载我的网站的测试(来自给定的URL)并检查是否存在一些存在的DOM元素(给定的id和给定的类)。

问题是当我在浏览器中输入URL时,我的应用程序显示了Loading...标签,并在下面发送了一个AJAX请求。当AJAX响应到达时,将完成一些处理并显示正确的网页内容(隐藏Loading...标签)。到目前为止,我已经有了这段代码:

casper.test.begin('Main page test', 2, function suite(test) {

    casper.start('http://xxx.yyy.zzz/', function() {
        test.assertTitle('My page name', 'page title is set correctly');
    });

    casper.then(function() {
        test.assertExists('#tabsListArea', 'tabs area is found');
    });

    casper.run(function() {
        test.done();
    });
});

这是我收到的错误消息:

FAIL tabs area is found
#    type: assertExists
#    file: mypath/.../casperjs/casper-test.js:11
#    code: test.assertExists('#tabsListArea', 'tabs area is found');
#    subject: false
#    selector: "#tabsListArea"
⚠  looks you did not use begin() which is mandatory since 1.1

有人可以指出我可以做些什么来使phantomjs / casperjs等到AJAX响应到来并由JS引擎处理以便我可以做出所有断言?

1 个答案:

答案 0 :(得分:3)

您是否尝试过任何waitFor函数。你可以尝试这样的事情:

casper.test.begin('Main page test', 2, function suite(test) {

    casper.start('http://xxx.yyy.zzz/', function() {
        test.assertTitle('My page name', 'page title is set correctly');
    });

    casper.waitFor(function check() {
        return this.evaluate(function() {
            return $('loading label').is('hidden');
        });
    }, function then() {    // step to execute when check() is ok
        test.assertExists('#tabsListArea', 'tabs area is found');
    }, function timeout() { // step to execute if check has failed
        this.echo("Timeout: page did not load in time...").exit();
    });

    casper.run(function() {
       test.done();
   });
});

然后您可以使用waitTimeout选项,以便为页面提供足够的时间来加载。它不是一个完美的解决方案,但它可以在这种情况下起作用。