Casperjs And Jquery With Chained Selects

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

Solution 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 valuesvar optionFirstSelect  = 125;
var optionSecondSelect = 6;    
var optionThirdSelect  = 47; 

//create casper objectvar casper = require('casper').create({
    loadImages:false,
    verbose: true,
    logLevel: 'debug'
});

//open url
casper.start('http://thewebsite.com');

casper.then(function(){

    //select option on first selectthis.evaluate(function(valueOptionSelect){
        $('select#s1').val(valueOptionSelect);
        $('select#s1').trigger('change');
    },optionFirstSelect);

    //wait until the second select is populatedthis.waitFor(functioncheck() {
        returnthis.evaluate(function() {
            returndocument.querySelectorAll('select#s2 option').length > 1;
        });
    }, functionthen() {

            //select option on second selectthis.evaluate(function(valueOptionSelect){
                $('select#s2').val(valueOptionSelect);
                $('select#s2').trigger('change');
            },optionSecondSelect);

            //wait until the third select is populated        this.waitFor(functioncheck() {
                returnthis.evaluate(function() {
                    returndocument.querySelectorAll('select#s3 option').length > 1;
                });
            }, functionthen() {

                    //select option on third selectthis.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(functioncheck() {
                                returnthis.evaluate(function() {
                                    returndocument.querySelectorAll('table#info tbody tr').length > 1;
                                });
                            }, functionthen() { 

                            //Do verifications here ...
                    });               
            });         
    }); 
});

casper.run(function() {
    //finish execution script this.exit();
});

Solution 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 valuevar 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 valuevar evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', true, false);
    sel3.dispatchEvent(evt);
});

casperjs.then(function() {
    // your verifications here
});