Question

我最近开始使用CasperJS测试一段JavaScript，它插入一个按钮并在页面上执行一些AJAX请求。我在代码中看到的，我没有看到文档中的示例，似乎CasperJS在每一步都重新加载原始页面。

这类似于我的代码：

var casper = require('casper').create({
    clientScripts: ['MyScript.js'],
    verbose: true,
    logLevel: "debug"
});

casper.on('remote.message', function(msg) {
    this.log('Remote console message: ' + msg, 'warning');
});

casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36');

casper.start('http://www.wikipedia.org');

casper.then(function(){
    if (this.exists('div#my_btn')){
        this.click('#my_btn');
        this.capture('wikipedia.png', undefined, {
            format: 'jpg',
            quality: 75
        });
        this.waitFor(function check() {
            return this.evaluate(function() {
                return this.getHTML('div#my_btn_status').length > 0;
            }, function then() {
                this.echo('Key: ' + this.getHTML('div#my_btn_status'));
            });
        });
    } else {
        this.log('My btn not here', 'error');
    }
});

casper.run();

这些是我收到的日志：

[info] [phantom] Starting...
[info] [phantom] Running suite: 3 steps
[debug] [phantom] opening url: http://www.wikipedia.org/, HTTP GET
[debug] [phantom] Navigation requested: url=http://www.wikipedia.org/, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://www.wikipedia.org/"
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Successfully injected Casper client-side utilities
[debug] [phantom] start page is loaded
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[info] [phantom] Step anonymous 3/3 http://www.wikipedia.org/ (HTTP 200)
[debug] [phantom] Mouse event 'mousedown' on selector: #my_btn
[debug] [phantom] Mouse event 'mouseup' on selector: #my_btn
[debug] [phantom] Mouse event 'click' on selector: #my_btn
[debug] [phantom] Capturing page to /Users/Me/Documents/Casper/wikipedia.png
[info] [phantom] Capture saved to /Users/Me/Documents/Casper/wikipedia.png
[info] [phantom] Step anonymous 3/3: done in 845ms.
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[info] [phantom] Step _step 4/4 http://www.wikipedia.org/ (HTTP 200)
[info] [phantom] Step _step 4/4: done in 919ms.
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
... (The above two lines get repeated a ton)
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[warning] [phantom] Casper.waitFor() timeout
[error] [phantom] Wait timeout of 5000ms expired, exiting.
Wait timeout of 5000ms expired, exiting.

单击 #my_btn 时，MyScript.js会执行更新 #my_btn_status 的AJAX请求。

正如您所看到的，似乎页面不断重新加载并且MyScript.js不断被注入，因此我无法看到 #my_btn_status 的内容，因为＃的状态my_btn 不断重置页面加载。

我正在使用此命令运行脚本：

casperjs --ignore-ssl-errors=true casper_test.js

编辑：我已经进一步考虑了这一点，我认为除了#my_btn之外，知道MyScript.js还会在页面中注入iframe可能会很有用。是否有可能casperjs继续将MyScript.js注入到每个子iframe中，这将解释url = about：blank，isMainFrame = false？

Answer 1

首先，您在点击按钮的同时捕获图像，因此您的屏幕不包含更新。

其次，你使用getHTML（）：一个casper函数，在页面DOM环境中（因为evaluate函数），这个函数是未知的。不要混淆这两个背景。这里注入了远程DOM环境中的casper函数：http://casperjs.readthedocs.org/en/latest/modules/clientutils.html。

第三，你的waitFor（）已过期，因为check（）闭包永远不会成立。由于未知函数getHTML（），它不可能是真的。有什么奇怪的是你没有远程消息事件中的错误，但我不认为getHTML（）存在于纯JS中......

所以你不需要使用evaluate（），getHTML（）是一个casper函数，保持在casper环境中。

后;你的条件是getHTML（＆＃39;＆＃39;）。长度很奇怪：你得到了html，所以没有方法＆＃39;长度＆＃39;链接到选择器的html内容。你希望哪个条件成真？

当您点击按钮时，另一个元素（＆＃39; div＃my_btn_status＆＃39;）的内容是否会增加？

这是一个更好的结构：

casper.then(function(){
    if (this.exists('div#my_btn')){
        this.click('#my_btn');
        this.waitFor(function check() {
            return this.fetchText('div#my_btn_status')==='1';
            }, function then() {
                this.echo('Key: ' + this.getHTML('div#my_btn_status'));
                this.capture('wikipedia.png');
            });
        });
    } else {
        this.log('My btn not here', 'error');
    }
});

我已经考虑点击按钮增加＆＃39; div＃my_btn_status＆＃39;的内容这是一个例子。也许在int中解析字符串是必要的。（parseInt函数）

使用注入脚本在每个步骤上请求CasperJS导航

1 个答案: