CasperJS点击无法显示模态窗口。

Question

我正在尝试编写一个非常简单的CasperJS脚本，测试网站上的登录按钮。单击事件后，会在网站顶部打开一个模态窗口，以便您填写登录字段。

使用网站时，这非常有效。使用casperjs test my-script-file --engine=slimerjs也完全正常。没有slimerjs，代码将失败。

按钮的定义方式:

<button class="btn btn-strong-submit" data-action="join">Join</button>

我的测试：

casper.test.begin('testing', 3, function suite(test)
{
    casper.start();
    casper.thenOpen("http://the-website-to-test-url", function()
    {
        casper.wait(5000, function(){
            casper.thenClick("button.btn.btn-strong-submit");
        });
    });

    casper.then(function () {
        casper.wait(3000);
        casper.capture("screen.png");
    });

    casper.then(function(){
        casper.assertVisible("div.join_container");
    });

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

在网站上，单击按钮会跳转到http://the-website-to-test-url.com/#join，因为网站的工作方式是等待点击并使用jQuery捕获它，然后查找[data-action]、forms #[data-action]，然后以这种方式构建URL。

但是CasperJS似乎无法理解从背景中捕获的jQuery点击。有什么想法吗？

终端输出的更新：

[info] [phantom] Starting...
[info] [phantom] Running suite: 4 steps
[debug] [phantom] opening url: http://www.MYURL.com/, HTTP GET
[debug] [phantom] Navigation requested: url=http://www.MYURL.com/, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://www.MYURL.com/"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/4 http://www.MYURL.com/ (HTTP 200)
[info] [phantom] Step anonymous 2/4: done in 721ms.
[info] [phantom] Step anonymous 3/4 http://www.MYURL.com/ (HTTP 200)
[info] [phantom] Step anonymous 3/4: done in 731ms.
[info] [phantom] Step _step 4/5 http://www.MYURL.com/ (HTTP 200)
[info] [phantom] Step _step 4/5: done in 752ms.
[info] [phantom] wait() finished waiting for 5000ms.
[debug] [phantom] Mouse event 'mousedown' on selector: .btn.btn-strong-submit
[debug] [phantom] Mouse event 'mouseup' on selector: .btn.btn-strong-submit
[debug] [phantom] Mouse event 'click' on selector: .btn.btn-strong-submit
[info] [phantom] Step anonymous 5/5 http://www.MYURL.com/ (HTTP 200) 

//After click URL should have changed to http://www.MYURL.com/#login

[info] [phantom] Step anonymous 5/5: done in 5772ms.
[info] [phantom] Step _step 6/6 http://www.MYURL/ (HTTP 200)
[info] [phantom] Step _step 6/6: done in 5792ms.
[info] [phantom] wait() finished waiting for 3000ms.
[debug] [phantom] Capturing page to /home/TEMP/screen.png
[info] [phantom] Capture saved to /home/TEMP/screen.png
[info] [phantom] Done 6 steps in 9367ms

- teodr

---

那么，你的脚本在SlimerJS上“可用”，但在PhantomJS上不行？你是什么意思？你如何验证它无法工作？ - Artjom B.

使用slimerjs我可以看到它，但是使用casperjs/phantomjs assertVisible会失败。抱歉，在太多尝试之后我将其从我的代码中删除了，忘记再次放回去了。 - teodr

而且，我尝试在等待5000后捕获屏幕截图，但仍然没有显示。 - teodr

wait 是异步的，而 capture 则不是。把 capture 放在回调函数里试试看是否会有变化：wait(3000, function(){this.capture("screen.png")});。如果没有变化，请注册 resource.error、casper.page.onResourceTimeout、remote.message 和 page.error 事件。也许会出现错误。 - Artjom B.

让我们在聊天中继续这个讨论。 - teodr

Answer 1

扩展Artjom的评论，我认为你应该更改这个：

casper.then(function () {
    casper.wait(3000);
    casper.capture("screen.png");
});

to be：

casper.wait(3000, function () {
    casper.capture("screen.png");
});

这里更加详细，不仅仅是更紧凑：“等待3000毫秒然后执行...”。

（顺便说一句：casper.then(doSomething) 和 casper.wait(0, doSomething) 是同样的东西。）

注意：这种方法的缺点是会在单元测试中增加3秒的延迟。你可以将其重写为：

casper.waitUntilVisible('div.join_container', {
    casper.capture("screen.png");
});

然后，一旦它可见，它就会进行截屏，然后进入下一步。这种方法的缺点是你的断言 总是 生效；如果有问题，你会得到一个超时而不是测试失败。（这可能或可能不重要，这取决于你正在测试什么以及为什么。）

- Darren Cook

---

我已经更新了我的问题，并附上了从casperjs测试my-test-file.js的终端输出。 - teodr