CasperJs and jQuery with Selects chain

Question

I am trying to create a test case for a website that includes a form with three whole selections. The first selection is populated by default when the webpage loads. If any parameter is selected from the first selection, then the second selection is filled through an ajax call. Similarly, when an option is selected on the second selected, the third selection is populated through an ajax call. Finally, when the option is selected in the third selection, the html table is populated with the information I need to check.

Three interconnected choices have this structure.

<select id="s1" name="s1"> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> </select> <select id="s2" name="s2"></select> <select id="s3" name="s3"></select> 

I know for sure that the website uses jQuery to make an ajax call. Does anyone know or know how to create this case with casperJs?

Answer 1

Here is how I did it. Since the web context includes jQuery, we can use it to trigger events, and the important step is that we must wait and check after each ajax call before processing the next step.

 //set select values var optionFirstSelect = 125; var optionSecondSelect = 6; var optionThirdSelect = 47; //create casper object var casper = require('casper').create({ loadImages:false, verbose: true, logLevel: 'debug' }); //open url casper.start('http://thewebsite.com'); casper.then(function(){ //select option on first select this.evaluate(function(valueOptionSelect){ $('select#s1').val(valueOptionSelect); $('select#s1').trigger('change'); },optionFirstSelect); //wait until the second select is populated this.waitFor(function check() { return this.evaluate(function() { return document.querySelectorAll('select#s2 option').length > 1; }); }, function then() { //select option on second select this.evaluate(function(valueOptionSelect){ $('select#s2').val(valueOptionSelect); $('select#s2').trigger('change'); },optionSecondSelect); //wait until the third select is populated this.waitFor(function check() { return this.evaluate(function() { return document.querySelectorAll('select#s3 option').length > 1; }); }, function then() { //select option on third select this.evaluate(function(valueOptionSelect){ $('select#s3').val(valueOptionSelect); $('select#s3').trigger('change'); },optionThirdSelect); //wait until table with info is populated after an option is seleted on third select. this.waitFor(function check() { return this.evaluate(function() { return document.querySelectorAll('table#info tbody tr').length > 1; }); }, function then() { //Do verifications here ... }); }); }); }); casper.run(function() { //finish execution script this.exit(); }); 

Answer 2

The correct and simple way to do this is to fire the "onchange" event the first time you select it after you change the value to the desired option, and then on the second:

 //... // the first select casperjs.thenEvaluate(function() { var sel1 = document.getElementById('s1'); sel1.value = 3; var evt = document.createEvent('HTMLEvents'); evt.initEvent('change', true, false); sel1.dispatchEvent(evt); }); // the second select casperjs.thenEvaluate(function() { var sel2 = document.getElementById('s2'); sel2.value = 'someVal2'; // guess, you know needed value var evt = document.createEvent('HTMLEvents'); evt.initEvent('change', true, false); sel2.dispatchEvent(evt); }); // the third select casperjs.thenEvaluate(function() { var sel3 = document.getElementById('s3'); sel3.value = 'someVal3'; // guess, you know needed value var evt = document.createEvent('HTMLEvents'); evt.initEvent('change', true, false); sel3.dispatchEvent(evt); }); casperjs.then(function() { // your verifications here });