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