How to click a “select option” and then evaluate loaded content with casperjs

Question

I\'m trying to crawl the sizes for this product:

Link to product

The problem: The sizes are loaded after the color of the product is selected.

In th

Answer 1

Tricky, but looking at the URL, I think Casper can handle this nicely.

Let me know if you need help with the code for this but it will take a bit longer so to give you a bit of pseudo-code,

• create an empty object of colors and color IDs { color: colorId }
• as you're already kind of doing, find the select menu with [name='color'] and loop through those options. push anything that doesn't have a value of 0 to your object
• write a new function that will go to the url http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color=-9999&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183 and substitute the color ID where color=-9999.

example:

'http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color=' + object.colorId + '&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183'

• Either add the sizes to the existing colors object or make a new one, or console.log them. The world is yours!

Answer 2

Got same issue here. My solution is:

casper.then(function(){
    this.evaluate(function() {
        document.querySelector('select.select-category').selectedIndex = 2; //it is obvious
    });
    this.capture('screenshot.png');
});

Answer 3

This is how I do it

this.evaluate(function() {
    $('#select_element_selector').val('value').change();
});

The change() is very important

I'm assuming that you have jQuery on the page