CasperJs和jQuery带链接的选择 [英] CasperJs and Jquery with chained Selects

问题描述

我想创建一个测试用例的网站，其中包括3个链接选择一种形式。 第一个选择是在默认情况下，当网页加载填充。如果选择了从第一个选择任何选项，则 第二个选择是通过Ajax调用填充。以同样的方式，当选择在第二个选项中选择，所以 第三个选择通过Ajax调用填充。最后，当被选择的第三选择一个选项，一个HTML表格是填充 随着信息比我需要验证。

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.

这三个相互关联的选择有这个结构

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>

我确实知道该网站使用jQuery的做Ajax调用。 有人已经或知道一个干净的方式创建这种情况下，与casperJs？

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?

推荐答案

下面是我做到了。因为Web上下文包括jQuery的，我们可以用它来触发事件，一个重要的步骤是，我们必须等待，每次Ajax调用后验证之前处理任何下一步骤。

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.

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

这篇关于CasperJs和jQuery带链接的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！