CasperJs和Jquery用链式选择

我正在尝试为一个网站创建一个测试用例，其中包含一个包含3个链式选择的表单。 加载网页时默认填充第一个选择。 如果选择了第一个选择中的任何选项，则通过ajax调用填充第二个选择。 以相同的方式，当在所选的第二个选项上选择一个选项时，通过ajax调用填充第三个选项。 最后，当在第三个选择上选择一个选项时，将使用我需要validation的信息填充html表。

三个互连的选择具有此结构

 Option1 Option2 Option3    

我确信该网站使用Jquery来进行ajax调用。 有人用或知道用casperJs创建这个案例的干净方法吗？

Answer 1

我是这样做的。 因为Web上下文包含jQuery，我们可以使用它来触发事件，重要的一步是我们必须在每次ajax调用之后等待并validation，然后才能处理任何下一步。

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