我正在尝试为一个网站创建一个测试用例,其中包括带有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创建这种情况的干净方法吗?
这是我的方法。因为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(); });