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