CasperJS fails to set select list values

Question

I've got a select list that looks like this:

<select id="ListingType" name="Criteria/ListingTypeID" onchange="Search.toggleListingType(this);">
    <option selected="selected" value="1">RH1</option>
    <option value="2">BC4</option>
    <option value="3">RR3</option>
    <option value="4">RH2</option>
    <option value="5">RE0</option>
</select>

I'm trying to set the value to 3. I've unsuccessfully tried 3 ways to do this.

1.

this.evaluate(function(value) {
    document.querySelector('select#ListingType').value = value;
    return true;
}, '3');
// insure the onChange JS is run
this.evaluate(function() {
    var element = document.querySelector('select#ListingType');
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    element.dispatchEvent(evt);
});

This appears to work (throws no errors), but the value doesn't get changed.

2.

this.fillSelectors('select#ListingType', {
    'select[name="Criteria/ListingTypeID"]' :  "3"
}, true);

This throws the error message: ``CasperError: Errors encountered while filling form: no field matching css selector "select[name="Criteria/ListingTypeID"]" in form''

What's wrong with my selector?

3.

// In desperation...
this.sendKeys('select#ListingType', 'RR3');

This also seems to work (no errors), but again the value is unchanged.

Just for completeness, I've tried sending the "change" event after each of the variations. I also dump out the attributes of the selected element after each, and it never shows the value as being set.

Note the page that this selector is on has a ton of JS code on it, and this <select> element is not wrapped in a <form> element.

I'm sure I'm making some really stupid mistake, but after hacking on this code for the last several days, I've not made any progress. What's a working way to do this?

`fillSelectors` accepts a selector identifying the *form* element, not the field itself… — NiKo, Oct 19 '13 at 18:52
So `fillSelectors` will not ever work on an element which does not have a parent _form_ element, it appears. Ugh. Thanks. — CXJ, Oct 20 '13 at 21:18
This looks like the answer http://stackoverflow.com/questions/16332312/how-to-click-a-select-option-and-then-evaluate-loaded-content-with-casperjs — user2763101, Jan 25 '14 at 03:49

Fanch · Answer 1 · 2014-02-28T14:24:39.033

You can use slimerJS (it opens firefox) to easily check a change in value.

    this.fillSelectors('form#id_form', {
        'select[name="Criteria/ListingTypeID"]' :  "3"
        }, false);
    this.wait(6000,function(){  
        this.echo("i saw my new value");
    });

And if you want to fill the option by its text and not value (i find it easier): use this function :

casper.fillSelectOptionByText = function (selectSelector,text){
    this.evaluate(function(sel,setByText) {
        $(sel + " > option").each(function() {
            if($(this).text() === setByText) {
                $(this).attr('selected', 'selected');            
            }                        
        });
    },selectSelector,text);
};

And in your test :

this.fillSelectOptionByText("select[name='year of birth']","1991");

The page has to have jquery of course, or you inject it.

CasperJS fails to set select list values

1 Answers1