Casperjs Dynamic Selectlists

CasperJS dynamic selectlists

Sharing the solution script.
I Iterated upon the select lists n*n*n times along with dates and two buttons.

    require 'rubygems'
    require 'capybara-webkit'
    require 'capybara/dsl'
    require 'nokogiri'

    include Capybara::DSL
    Capybara.current_driver = :webkit

    visit("http://thewebsite.com")

    op0_xpath = "//*[@name='selectlist0']/option[1]"
    op0 = find(:xpath, op0_xpath).text
    select(op0, :from => 'selectlist0')

    page.evaluate_script("$('body').submitForm2()")
    sleep(2)

    op1_xpath = "//*[@name='selectlist1']/option[1]"
    op1 = find(:xpath, op1_xpath).text
    select(op1, :from => 'selectlist1')

    page.evaluate_script("$('body').submitForm2()")
    sleep(2)

    op2_xpath = "//*[@name='selectlist2']/option[1]"
    op2 = find(:xpath, op2_xpath).text
    select(op2, :from => 'selectlist2')

    sleep(2)

    find(:xpath, "//input[@name='curYear']").set "2012"
    find(:xpath, "//input[@name='curMonth']").set "10"
    find(:xpath, "//input[@name='curDay']").set "09"

    click_button('button1')
    page.evaluate_script("$('body').submitForm()")

CasperJs and Jquery with chained Selects

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

Related Topics