1

My html code is:

<div class="setting-control">
<select class="on-off" id="custom-cache-pref">
  <option value="">Default</option>
  <option value="byc">Bypass cache</option>
  <option value="basic">Basic caching</option>
  <option value="iqs">Ignore query string</option>
  <option value="agg">Aggressive caching</option>
  <option value="all">Cache everything</option>
</select>
</div>

Usually with casperjs I would use

this.fillSelectors('form[name="formName"]', { 
    'select[id="custom-cache-pref"]': 'byc'                     
}, false);

to select option "byc" but this time the "select" element is not embedded in a form!

How can I choose its value in this case?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Sulli
  • 763
  • 1
  • 11
  • 33

1 Answers1

4

Adapted from my answer here, you can create your own function that selects an option by value. This changes the selected index which might not trigger the select onChange event.

casper.selectOptionByValue = function(selector, valueToMatch){
    this.evaluate(function(selector, valueToMatch){
        var select = document.querySelector(selector),
            found = false;
        Array.prototype.forEach.call(select.children, function(opt, i){
            if (!found && opt.value.indexOf(valueToMatch) !== -1) {
                select.selectedIndex = i;
                found = true;
            }
        });
        // dispatch change event in case there is some kind of validation
        var evt = document.createEvent("UIEvents"); // or "HTMLEvents"
        evt.initUIEvent("change", true, true);
        select.dispatchEvent(evt);
    }, selector, valueToMatch);
};

casper.start(url, function() {
    this.selectOptionByValue('select#custom-cache-pref', "byc");
}).run();

Alternative 1

Judging by the code of __utils__.fill() and casper.fillForm(), the selector of the form doesn't necessarily have to be a form. It may be a div:

this.fillSelectors('div.setting-control', { 
    'select[id="custom-cache-pref"]': 'byc'                     
}, false);

Alternative 2

If this still doesn't work, you might need to resort on focusing on the select element in the page context and sending up and down key events to change the value using PhantomJS' page.sendEvent():

this.evaluate(function(){
    document.querySelector('select[id="custom-cache-pref"]').focus();
});
this.page.sendEvent('keypress', this.page.event.key.Down);
Community
  • 1
  • 1
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
  • alternative 1 doesn't work, alternative 2 works but the change of value can not be seen on a screenshot before I validate the form (which made me waste a lot of time this morning). – Sulli Feb 14 '15 at 13:31
  • Actually, I tried alternatives 1 and 2 on the contact form on SO and it [works](https://gist.github.com/artjomb/1414c89238abdeef372a) rather well. Maybe there are errors. Please register to the [`resource.error`](http://docs.casperjs.org/en/latest/events-filters.html#resource-error), [`page.error`](http://docs.casperjs.org/en/latest/events-filters.html#page-error), [`remote.message`](http://docs.casperjs.org/en/latest/events-filters.html#remote-message) and [`casper.page.onResourceTimeout`](http://phantomjs.org/api/webpage/handler/on-resource-timeout.html) events. – Artjom B. Feb 14 '15 at 15:01
  • 2
    @ArtjomB. Thank you for providing this code solution; it works for me. I tried to use the jquery code solution, but that didn't work - https://stackoverflow.com/questions/16332312/how-to-click-a-select-option-and-then-evaluate-loaded-content-with-casperjs/34553086#34553086 - I've also asked the CasperJS team to implement a native solution - https://github.com/n1k0/casperjs/issues/1390. – tim-montague Jan 01 '16 at 18:32
  • `initUIEvent` is now [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent). Just do `select.dispatchEvent(new Event('change'))` instead. – Greendrake Dec 31 '17 at 04:39
  • @Greendrake `initUIEvent` may be deprecated in the real browser world, but if I remember correctly, it was the only thing that worked for PhantomJS at the time of writing this post. – Artjom B. Dec 31 '17 at 08:36