用phantomjs / casperjs测试DOM元素 [英] testing DOM elements with phantomjs/casperjs

问题描述

我有一个基于AJAX的JavaScript应用程序，我想通过界面测试来覆盖。例如，我想编写一个测试，加载我的网站（从给定的URL），并检查是否存在一些DOM元素（给定的id和给定的类）。

问题是当我在浏览器中输入URL时，我的应用程序会显示一个正在加载... 标签，并在下面发送一个AJAX请求。当AJAX响应到达时，进行一些处理，并显示正确的网页内容（正在加载... 标签被隐藏）。到目前为止，我已经得到这个代码：

  casper.test.begin（'Main page test'，2，function suite测试）{
 
 casper.start（'http：//xxx.yyy.zzz/'，function（）{
 test.assertTitle（'我的页面名称'，'页面标题是设置正确'）; 
}）; 
 
 casper.then（function（）{
 test.assertExists（'＃tabsListArea'，'tabs area is found'）; 
}）; 
 
 casper.run（function（）{
 test.done（）; 
}）; 
}）; 
  

这是我收到的错误消息：

 找到FAIL选项卡区域
＃type：assertExists 
＃file：mypath /.../ casperjs / casper-test.js：11 
 ＃code：test.assertExists（'＃tabsListArea'，'tabs area is found'）; 
＃subject：false 
＃selector：#tabsListArea
⚠看起来你没有使用自从1.1 
  
解决方案
你是否尝试过任何一个waitFor函数。你可以尝试这样的事情：
  casper.test.begin（'主页测试'，2，功能套件{
 
 casper.start（'http：//xxx.yyy.zzz/'，function（）{
 test.assertTitle（'我的页面名称'，'页面标题设置正确'）; 
}）; 
 
 casper.waitFor（function check（）{
 return this.evaluate（function（）{
 return $ '）.is（'hidden'）; 
}）; 
}，function then（）{//在执行check（）的时候执行
 test.assertExists（'＃tabsListArea '，'tabs区域被找到'）; 
}，function timeout（）{//如果检查失败，执行步骤
 this.echo（超时：页面没有及时加载... ）.exit（）; 
}）; 
 
 casper.run（function（）{
 test.done（）; 
}）; 
}）; 
  
然后，您可以使用waitTimeout选项来播放，以便足够的时间加载页面。这不是一个完美的解决方案，但在这种情况下可以工作。
 
I've got an AJAX-based javascript application which I would like to cover with interface tests. For example, I would like to write a test that loads my website (from a given URL) and checks if there are some DOM elements (given ids and given classes) that exist.

The problem is that when I enter the URL in a browser, my application has a Loading... label displayed and an AJAX request is sent beneath. When AJAX response arrives, some processing is done and the right webpage content is displayed (Loading... label is hidden). So far I've got this code:
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();
    });
});
This is the error message I get:
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
Can someone please point me out what can I do to make phantomjs/casperjs wait until the AJAX response arrives and is processed by the JS engine so that I can make all assertions?
解决方案
Have you tried any of the waitFor functions. You could try something like this:
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();
   });
});
You could then play around with the waitTimeout option so you give the page enough time to load. It isn't a perfect solution but it could work in this case.

                        
这篇关于用phantomjs / casperjs测试DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！