CODEWITHSUNDEEP
javascripttestingcasperjs
Akasha
Akasha

Reputation: 2212

CasperJS never submits my form

I've a simple form that I would like to fill out and submit in order to test that it works as expected.

Here is the code that is supposed to work, but actually does not. I've already tried to submit the form in many ways, but neither of them triggered the page reload.

casper.test.begin('Showcase signup works', 2, function suite(test){
    casper.start('https://my.vidzor.com/accounts/signup/', function(){
        test.assertExists('form', 'Signup form found');
        this.fillSelectors('form', {
            'input[name="name"]': 'Test User',
            'input[name="email"]': '[email protected]',
            'input[name="password"]': 'example',
            'input[name="password_confirm"]': 'example'
            }, true);
        this.click('button[type="submit"]');
        this.evaluate(function submitForm(){
            $('form').submit();
        });
        this.wait(10000);
        this.captureSelector('signup-form.png','input#id_name');
        var form_values = this.getFormValues('form');
        console.log(JSON.stringify(form_values));
        test.assertEqual(form_values.stage, "2");
    });
    casper.run(function() {
        test.done();
    });
});

There are many weird things going on that I've noticed.

  1. form_values does not contain the name and email fields, even though they got filled
  2. captureSelector takes a screenshot of the whole page; actually when I called it for 'form' only, then it captured different parts of the page
  3. seemingly the page is never submitted (the 10 sec waiting time should be definitely more than necessary for the next page to load, and no errors are shown in the screenshot)

What do I miss here?

Upvotes: 0

Views: 383

Answers (1)

Artjom B.
Artjom B.

Reputation: 61892

You have to keep the asynchronous nature of CasperJS in mind. All wait* and then* functions are asynchronous step functions, which are used to schedule some behavior. If you call synchronous functions like captureSelector after the invocation of a wait, then there was no wait inbetween. They have to be scheduled inside of the then callback of wait:

this.wait(10000, function then(){
    this.captureSelector('signup-form.png','input#id_name');
    var form_values = this.getFormValues('form');
    console.log(JSON.stringify(form_values));
    test.assertEqual(form_values.stage, "2");
});

If the form submit handler is not asynchronous then the following should work without explicit wait:

casper.start('https://my.vidzor.com/accounts/signup/', function(){
    this.fillSelectors('form', {
        'input[name="name"]': 'Test User',
        'input[name="email"]': '[email protected]',
        'input[name="password"]': 'example',
        'input[name="password_confirm"]': 'example'
    }, true);
});
casper.then(function(){
    this.captureSelector('signup-form.png','input#id_name');
    var form_values = this.getFormValues('form');
    console.log(JSON.stringify(form_values));
    test.assertEqual(form_values.stage, "2");
});

Upvotes: 2

Related Questions