Submit a form using Casperjs - casperjs

Question

I have tried various methods in casperJS to fill in and submit a form. The code is shown below. Ultimately I am building a robot to automatically check the status of a cargo airwaybills on the IAG Cargo web portal.
Sendkeys will complete the form but I cannot manage to click the SEARCH button.
Using casperJS Form filling methods does not work at all.
Is this an unusual website or am I doing something wrong?
In the code below the program appears to fail on line
this.clickLabel('SEARCH', 'button');
and the subsequent code does not run.
(I have used an dummy airwaybill number in this example so the final page will show 'Airwaybill not found')
var casper = require('casper').create();
var x = require('casper').selectXPath;
phantom.cookiesEnabled = true;
casper.userAgent('Mozilla/4.0 (compatable; MSIE 6.0; Windows NT 5.1)');
casper.start('https://www.iagcargo.com/iagcargo/portlet/en/html/601/main/search');
casper.waitForSelector("#awb_cia", function() {
this.echo('Selector found');
casper.capture('iag_start.png');
this.sendKeys('#awb_cia','125');
this.sendKeys('#awb_cod','12345675');
});
casper.then(function step2() {
this.clickLabel('SEARCH', 'button');
this.echo('this is step 2');
casper.capture('iag_end.png');
});
require('utils').dump(casper.steps.map(function(step) {
return step.toString();
}));
casper.run();

Answer 1

Not being able to click is a common problem that could have by many reasons. clickLabel() won't work here, since it's not a button tag, but an input tag. Here is what I saw on the page:
You can try this,
casper.click('input[value="Search"]');
In general, here are things you could try when clicking an element.
Try changing the viewportSize, e.g.
viewportSize: { width: 1024, height: 768 }
This is because, casperjs won't click anything that is not visible on the page.
If using xpath selector, try CSS instead. XPath selectors are brittle, and do not work the same across all browsers.
Sometimes jquery click works, e.g.
casper.evaluate(function(){
var element = document.querySelector( 'span.control.critical.closer' );
$(element).click();
});
If there's a function inside the button tag, you can call that function directly. E.g.
SEARCH
You can call that function directly,
casper.someFunc();

Answer 2

var casper = require('casper').create({
verbose: true,
logLevel: "debug",
waitTimeout: 60000,
resourceTimeout: 10000,
viewportSize: {
width: 1024,
height: 768
},
pageSettings: {
javascriptEnabled: true,
loadImages: true,
loadPlugins: true
}
});
var x = require('casper').selectXPath;
phantom.cookiesEnabled = true;
casper.userAgent('Mozilla/4.0 (compatable; MSIE 6.0; Windows NT 5.1)');
casper.start('https://www.iagcargo.com/iagcargo/portlet/en/html/601/main/search');
casper.waitForSelector("#awb_cia", function() {
this.echo('Selector found');
casper.capture('iag_start.png');
this.sendKeys(x('//*[#id="awb_cia"]'),'125');
this.sendKeys('#awb_cod','12345675');
this.capture('iag_middle.png');
});
casper.then(function step2() {
if(this.exists('body > div.cuerpo > div.cuerpo > div.contenido > div > form > table > tbody > tr > td:nth-child(3) > input')){
this. click('body > div.cuerpo > div.cuerpo > div.contenido > div > form > table > tbody > tr > td:nth-child(3) > input');
}
});
casper.then(function step3() {
this.echo('this is step 2');
casper.capture('iag_end.png');
});
//require('utils').dump(casper.steps.map(function(step) {
// return step.toString();
//}));
casper.run();