0

I'm trying to automate filling out a form using CasperJS 1.1.0-beta3 and PhantomJS 1.9.8.

If I load the page and don't fill any fields (text inputs and dropdowns), I can submit the form using: this.click('#_submit_button');

However, after I manipulate the form in any way at all I can no longer submit the form. I've tried filling out the fields using:

document.querySelector('#from').value = '123';
jQuery('#from').val('123');
this.fillSelectors('form', { ... }, false); // Using true won't submit the form

Here is the code:

casper = require('casper').create();
casper.options.pageSettings.loadImages = false;
casper.options.waitTimeout = 120000; // 120 sec
casper.options.viewportSize = {width: 1280, height: 1024};

var errors = [];

var outputDir = '/tmp/downloads';

function logTimestamp(){
    var dt = new Date();
    var utcDate = dt.toUTCString();
    return utcDate + '  ';
}

casper.start('https://domain.com/directory/page/', function() {
    casper.waitForSelector('div[id="abc-xyz"]');
});

casper.then(function() {
    this.wait(1000);
});

casper.then(function() {
    this.echo(logTimestamp() + '1');
});

casper.then(function(){
    casper.evaluate(function(){
        jQuery('#from').val('123');
        jQuery('#to').val('456');
        jQuery('#code').val('P');
        jQuery('#ab-cd-ef').css('background-color','blue');
    });
});

casper.then(function() {
    this.wait(1000);
});

casper.then(function() {
    this.echo(logTimestamp() + '2');
});

casper.then(function() {
    this.capture(outputDir + "/1.png"); 
});

casper.then(function() {
    this.click('#_submit_button');
});

casper.then(function() {
    this.wait(5000);
});

casper.then(function() {
    this.echo(logTimestamp() + '3');
});

casper.then(function() {
    casper.waitForSelector('div[id="abc-xyz"]');
});

casper.then(function() {
    this.capture(outputDir + "/2.png"); 
});

casper.then(function() {
    this.echo(logTimestamp() + '4');
});

casper.then(function() {
    this.exit();
});

casper.on("page.error", function(msg, trace) {
    this.echo("Error:    " + msg, "ERROR");
    this.echo("File:     " + trace[0].file, "WARNING");
    this.echo("Line:     " + trace[0].line, "WARNING");
    this.echo("Function: " + trace[0]["function"], "WARNING");
    errors.push(msg);
});

casper.run(function() {
    if (errors.length > 0) {
        this.echo(errors.length + ' Javascript errors found', "WARNING");
    }else{
        this.echo(errors.length + ' Javascript errors found', "INFO");
    }
    casper.exit();
});

If I comment out the 3 lines that update the form fields, the page submits and 1.png has a blue background, and 2.png has a green background (showing the form was submitted).

But any attempt to manipulate the form causes the "click" or submit to fail, and both 1.png and 2.png still have the blue background.

There are no JavaScript errors.

Sorry, I'm not able to provide a link to the page in question.

Any thoughts on why the submit button works if the form is left alone, but won't work after the form fields are changed?

I thought it may have to do with the submit button "id" starting with an underscore, which wasn't valid for HTML4 and I can't change, but it works before the fields are updated, so I don't think it's related.

Thanks

user1517922
  • 1,308
  • 3
  • 15
  • 22
  • It probably depends on the code of the page, but one suggestion is to trigger the "change" event on every single field you edit. Also, which PhantomJS version do you use? Please register to the `resource.error`, `page.error`, `remote.message` and `casper.page.onResourceTimeout` events ([Example](https://gist.github.com/artjomb/4cf43d16ce50d8674fdf#file-2_caspererrors-js)). Maybe there are errors. – Artjom B. Dec 17 '15 at 18:30
  • I had the other 3, but adding `onResourceTimeout` revealed "server replied: Internal Server Error". Digging on that told me to run with "casperjs --ssl-protocol=any", which solved the problem. Thanks! I'm glad it's working, but I wish CasperJS had a way to show me that the page failed, or at least gave me a blank .png, rather than showing me the incorrect previous .png. – user1517922 Dec 17 '15 at 19:23
  • It does. Check `casper.status()` or enable `casper.options.verbose = true` and `casper.options.logLevel = 'debug';` – Artjom B. Dec 17 '15 at 19:26

0 Answers0