CasperJS is not working well on AngularJS

Question

1.39M viewsSeptember 10, 2022angularjs casperjs javascript

2

Bones and Teeth September 7, 2022 0 Comments

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':    '[email protected]',
    }, 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?

2 Answers

score 1 · Answer 1 · 2022-09-07T05:22:00+00:00

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?

score 1 · Answer 2 · 2022-09-07T01:50:52+00:00

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