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('#loginE

Solution 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.

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

Solution 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?