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

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不断被注入(inject)，因此我永远无法看到#my_btn_status的内容，因为#的状态my_btn 在页面加载时不断重置。

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

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

编辑:我进一步考虑了这一点，我认为了解 MyScript.js 除了 #my_btn 之外还向页面注入(inject) iframe 可能会很有用。 casperjs 是否有可能不断将 MyScript.js 注入(inject)到每个子 iframe 中，这将解释 url=about:blank, isMainFrame=false？

Answer 1

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

其次，您使用 getHTML() :一个 casper 函数，在页面 DOM 环境中(由于评估函数)，该函数是未知的。不要混淆这两个上下文。这里是在远程 DOM 环境中注入(inject)的 casper 函数:http://casperjs.readthedocs.org/en/latest/modules/clientutils.html .

第三，您的 waitFor() 已过期，因为 check() 闭包永远不会为 true。由于 getHTML() 函数未知，所以这不可能是真的。奇怪的是你没有来自远程消息事件的错误，但我不认为 getHTML() 存在于纯 JS 中......

所以你不需要使用evaluate()，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 中的字符串是必要的。 (解析Int)