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