具有链接选择的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();
});