CasperJs和Jquery用链式选择

I'm trying to create a testing case for a web site which includes a form with 3 chained selects. The first select is populated by default when the web page is loaded. If any option from the first select is selected, then the second select is populated via an ajax call. In the same way, when an option is selected on the second selected, so the third select is populated via an ajax call. Finally, when an option is selected on the third select, a html table is populated with the information than I need to validate.

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

The three interconnected selects have this struct

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

<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>

I know for sure that the web site use Jquery for to do the ajax call. Somebody has or know a clean way for create this case with casperJs?

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

2 个解决方案

#1

Here is how I did it. Because the web context includes jQuery, we can use it to trigger events, and an important step is that we have to wait and validate after each ajax call before to process any next step.

我是这样做的。因为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();
});

2 个解决方案

#1

更多相关文章

随机推荐