javascript - 带有链式选择的 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();
});