Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Not able to select select value from dropdown menu using casperjs

I want to achieve following using casperjs :

1) Go to the page - http://www.snapdeal.com/product/nokia-asha-501/1486852?
2) select the color from the dropdown menu on the page
3) Wait for the right side buy button to get refreshed and then click the buy button.

User Gravatar

lavesh

Posted Oct 15 2013 3:56 UTC

$10


  • Assigned To alonisser
  • Solved
  • casperjs
  • 5104 Views

3 Replies


var url = 'http://www.snapdeal.com/product/nokia-asha-501/1486852';

var casper = require('casper').create({
    logLevel :"debug",
    verbose : true
});



casper.on('remote.message', log);

casper.on('error', logError);

casper.on('complete.error', logError);

casper.on('page.error', logError);

casper.start(url, function(){
    this.echo(this.getTitle());
    console.log('started');
});

casper.thenEvaluate(function chooseRed(){

        console.log($('#attribute-select-0'));
        var $select = $('#attribute-select-0');
        var _option = 'Red';
        $select.val(_option);
        $select.change();

});
casper.waitForSelectorTextChange('.buyContainer', function(){
    console.log('text changed on .buyContainer'); //just to be sure the button container changes.
});

casper.thenClick('#BuyButton-1', function clickBuy(){
    console.log('clicked');

});



casper.run();

function log(msg){
    console.log('remote msg: ', msg);
}

function logError(msg,traceback){
    console.log(msg);
    console.log(traceback);
}
User Gravatar

alonisser

Posted Oct 19 2013 12:51 UTC

Solution

This didn't solve your task? Get your own custom solution.

The above code assumes that color Red exists in the dropdown menu and will fail if its not there . Is there a way we can automatically select lets say first value from the list.

User Gravatar

lavesh

Posted Oct 23 2013 23:19 UTC

you can change

 console.log($('#attribute-select-0'));
        var $select = $('#attribute-select-0');
        var _option = 'Red';
        $select.val(_option);
        $select.change();

to

 console.log($('#attribute-select-0'));
        var $select = $('#attribute-select-0');
        var _option = $select.find('option:last-child').val();
        $select.val(_option);
        $select.change();

note changing the _option to the value of the last element (first element is a --, you could use nth-child, but last is easier since there is always last element

cheers

User Gravatar

guyisra

Posted Oct 24 2013 8:16 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions