CasperJs和Jquery用链式选择

Question

我正在尝试为一个网站创建一个测试用例,其中包含一个包含3个链式选择的表单.加载网页时默认填充第一个选择.如果选择了第一个选择中的任何选项,则通过ajax调用填充第二个选择.以相同的方式,当在所选的第二个选项上选择一个选项时,通过ajax调用填充第三个选项.最后,当在第三个选择上选择一个选项时,将使用我需要验证的信息填充html表.

三个互连的选择具有此结构

<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>

我确信该网站使用Jquery来进行ajax调用.有人用或知道用casperJs创建这个案例的干净方法吗？

Answer 1

我就是这样做的.因为Web上下文包含jQuery,我们可以使用它来触发事件,重要的一步是我们必须在每次ajax调用之后等待并验证才能处理任何下一步.

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