Javascript CasperJS在AngularJS上工作不好

如果在casper中，我只点击一个按钮，那么一切正常。以下代码通过了测试

casper.then(function() {
    this.click('#loginB');
    this.fill('#loginEmailField', {
        'loginEmail':    'a@a.com',
    }, false);
    this.fill('#loginPasswordField', {
        'loginPassword':    'a',
    }, false);
    this.click('#loginClickButton');
    this.click('#logoutB');
    test.assertNotVisible('#logoutB', "logout item should not show");
    test.assertNotVisible('#loggedInItem', "loggedin item should not show");
    test.assertVisible('#loginB', "login item should show");
});

这还包括：

casper.then(function() {
    test.assertNotVisible('#loginModal', "login modal not visible");
    this.click('#loginB');
    test.assertVisible('#loginModal', "login modal visible");
});

然后，如果在点击登录按钮后，用户想要注册，那么注册模块应该显示出来。以下测试是否显示但测试失败：

casper.then(function() {
    this.click('#loginB');
    this.click('#signUpB');
    test.assertVisible('#signUpModal', "signup modal is visible after click");
    test.assertVisible('#UsernameField', "Username field on the signup modal should be visible too");
    test.assertNotVisible('#loginModal', "login modal should be invisible after click");
});

---

我手动尝试了这个网站，我确信它会出现。我如何解决这个问题？

您遇到了时间问题。所有

then*

和

wait*

都是异步的，但大多数其他函数都不是。因此，当您单击casper.click时，页面必须执行某些操作，这些操作在某种意义上可能是异步的，而这反过来又不会阻止CasperJS在脚本中继续前进。
我有点惊讶，你的前两个片段居然奏效了

要解决此问题，您应以静态方式正确等待：

casper.thenClick('#loginB');

casper.wait(100, function() {
    this.click('#signUpB');
});

casper.wait(100, function() { // or whatever time you expect here
    test.assertVisible('#signUpModal', "signup modal is visible after click");
    test.assertVisible('#UsernameField', "Username field on the signup modal should be visible too");
    test.assertNotVisible('#loginModal', "login modal should be invisible after click");
});

您还可以将其转换为动态版本：

casper.thenClick('#loginB');

casper.waitUntilVisible('#signUpB', function() {
    this.click('#signUpB');
});

// wait until the last selector that is generated otherwise 
// it can happen that the others fail, but the selector which 
// you waited for is really there
casper.waitUntilVisible('#UsernameField', function() {
    test.assertVisible('#signUpModal', "signup modal is visible after click");
    test.assertVisible('#UsernameField', "Username field on the signup modal should be visible too");
    test.assertNotVisible('#loginModal', "login modal should be invisible after click");
});

---

我使用CasperJS测试记录器Chrome扩展获得了很好的结果。我的AngularJS应用程序中生成的第一个测试已经使用了casper.waitUntilVisible，所以我从未遇到过时间问题。也许你也能从它的使用中获益？

Hmmmmm。我确实尝试了wait（），但它不起作用，现在它起作用了……当计时设置为1000时，它就起作用了。此外，waitForSelector也不起作用。而且，即使它起作用，我认为这不是一个非常优雅的解决方案。事实上，我必须在每次click（）事件前后等待大约1s。这是没有效率的。还有其他方法解决这个问题吗？没错，在AngularJS中，节点通常位于DOM中，但隐藏。我将第一个

waitForSelector

更改为

waitUntilVisible

，以反映这一点。我不认为有更好的选择。你可能更喜欢使用量角器。它会自动等待scope.digest循环进行计算，因此比casper要快得多。若你们真的想用Casper，你们可能不想看看量角器是如何做到的。您可以开始在github repo中搜索

waitForAngular

函数。