CasperJS is not working well on AngularJS

问题

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

This also passes:

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?

回答1:

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

回答2:

I got good results using Resurrectio, the CasperJS test recorder Chrome extension. The first generated test within my AngularJS app already used casper.waitUntilVisible, so I never ran into a timing issue. Maybe you can benefit from its use, too?

来源：https://stackoverflow.com/questions/27035005/casperjs-is-not-working-well-on-angularjs

标签

javascript

angularjs

casperjs