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

Answer 2

正确和最简单的方法是在您将值更改为需要选项后在第一个选择上触发 'onchange' 事件，然后在第二个选择上相同：

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