CasperJs and Jquery with chained Selects

Question

I'm trying to create a testing case for a web site which includes a form with 3 chained selects. The first select is populated by default when the web page is loaded. If any option from the first select is selected, then the second select is populated via an ajax call. In the same way, when an option is selected on the second selected, so the third select is populated via an ajax call. Finally, when an option is selected on the third select, a html table is populated with the information than I need to validate.

The three interconnected selects have this struct

<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 web site use Jquery for to do the ajax call. Somebody has or know a clean way for create this case with casperJs?

Answer 1

Here is how I did it. Because the web context includes jQuery, we can use it to trigger events, and an important step is that we have to wait and validate after each ajax call before to process any 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 right and easiest way to do this is to fire 'onchange' event on the first select after you changed value to need option, then the same on the second one:

//...
// 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
});