CasperJS在AngularJS上无法正常运行 [英] CasperJS is not working well on AngularJS

问题描述

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

If in casper, I only click on one button, then everything works fine. The following code passes the test.

casper.then(function() {
    this.click('#loginB');
    this.fill('#loginEmailField', {
        'loginEmail':    '[e-mail]',
    }, 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");
});

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

Then, if after click on the login button, the user wants to sign up, then the sign up module should show up. The following tests whether it shows up but the test fail:

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

我手动尝试了该网站，并且确定它会显示出来。我该如何解决？

I manually tried the website and I am sure it shows up. How can I solve this?

推荐答案

您遇到了计时问题。所有 then * 和 wait * 都是异步的，但其他大多数功能不是异步的。因此，当您 casper.click 时，页面必须执行某些动作，这些动作在某种意义上可能是异步的，而这又不会阻止CasperJS在脚本中进一步发展。 >
^{我对您的前两个摘要起作用感到有些惊讶。}

You have a timing issue. All then* and wait* are asynchronous, but most of the other functions are not. So when you casper.click the page has to perform some actions which are probably in some sense asynchronous which in turn doesn't stop CasperJS to progress further in the script.
^{I'm somewhat surprised that your first two snippets worked.}

要解决此问题，您应该适当地等待一个静态方式：

To fix this you should properly wait either in a static manner:

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

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

You can translate this also into a dynamic version:

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在AngularJS上无法正常运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！