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

casperjs, html-select, javascript, phantomjs

Solution

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

Problem

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 the product page's source code, I can see that the dropdown has a onchange-method: It clicks the form #postColor onchange. The select dropdown: ``` <select name="color" id="color" class="cposelect" onchange="document.getElementById('postColor').click();" style="width:150px;margin-right: 20px; float: left;"> <option selected="selected" onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="0">Select colour</option> <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-8027">Light Camel</option> <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-9999">black</option> </select> ``` The #postColor form, which is clicked onchange: ``` <input type="submit" name="postColor" value="" onclick="location.href=('./?model=10344-4180&color='+document.forms[0].color.value+'&size='+document.forms[0].size.value+'&addbread=OUTLET&addbread2=DRIZIA&currentimage='+document.getElementById('currentimage').value+'&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183'); return false;" id="postColor" class="cpobutton " style="display: none;"> ``` This is my code so far and it's not working: ``` casper.start('http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&addbread=OUTLET&addbread2=DRIZIA&color=0&currentimage=1&selectedmi=a1_INDEX_14', function() { this.test.assertExists('select[name="color"] option:nth-child(2)'); this.click('select[name="color"] option:nth-child(2)'); this.waitForSelector('select[name="size"] option:nth-child(2)', function() { this.test.pass('selector is !'); var sizes = this.evaluate(function() { console.log("======== evaluating ========"); // var sizes = document.querySelectorAll('#size option'); return document.querySelectorAll('#size option'); }); for (var i = sizes.length - 1; i >= 0; i--) { console.log(sizes[i].innerText); } }); }); ``` I suspect that problem is that a totally new page is loaded when a color is clicked (the sizes are not dynamically appended). How would you solve this problem?

Original source