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&amp;color='+document.forms[0].color.value+'&amp;size='+document.forms[0].size.value+'&amp;addbread=OUTLET&amp;addbread2=DRIZIA&amp;currentimage='+document.getElementById('currentimage').value+'&amp;selectedmi=a1_INDEX_14&amp;prev=10850-4314&amp;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?