javascript - 使用注入(inject)的脚本在每个步骤上请求CasperJS导航

我最近开始使用CasperJS来测试一段JavaScript，该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执行AJAX请求，该请求将更新#my_btn_status。

如您所见，页面似乎一直在重新加载，而MyScript.js一直在注入，因此我永远无法看到#my_btn_status的内容，因为#my_btn的状态在页面加载时一直在重置。

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

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

编辑：我已经进一步考虑了这一点，并且我认为了解MyScript.js除了#my_btn之外还将iframe注入页面也可能有用。 casperjs是否有可能不断将MyScript.js注入每个子iframe中，从而解释url = about：blank，isMainFrame = false？

最佳答案

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

其次，在页面DOM环境中（由于评估函数），使用getHTML（）：casper函数，该函数是未知的。不要混淆这两种情况。这里，casper函数注入到远程DOM环境中：http://casperjs.readthedocs.org/en/latest/modules/clientutils.html。

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

因此，您无需使用valuate（），getHTML（）是一个casper函数，请保留在casper上下文中。

后;您的条件getHTML（''）。length很奇怪：您获取了html，因此没有方法'length'链接到选择器的html内容。您想满足哪个条件？

当您单击按钮时，另一个元素（'div＃my_btn_status'）的内容是否增加？

这是一个更好的结构：

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');
    }
});

我考虑过单击按钮会将'div＃my_btn_status'的内容增加1。这是一个示例。也许解析int中的字符串是必要的。 （parseInt）