javascript - CasperJs and Jquery with chained Selects - Stack Overflow

admin管理员组

文章数量:1289582

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?

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?

• javascript
• jquery
• ajax
• html-select
• casperjs

Share Improve this question Follow edited Mar 29, 2016 at 19:32 Artjom B. 62k2525 gold badges135135 silver badges229229 bronze badges asked Apr 29, 2013 at 16:42 Hemerson VarelaHemerson Varela 25.8k1818 gold badges7272 silver badges6969 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.');

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();
});

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

本文标签： javascriptCasperJs and Jquery with chained SelectsStack Overflow