Question

我的HTML代码是：

<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>

通常使用casperjs我会使用

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

选择“byc”选项，但这次“select”元素未嵌入表单中！

在这种情况下如何选择其值？

Answer 1

根据我的回答here改编，您可以创建自己的函数，按值选择一个选项。这会更改所选索引，这可能不会触发select onChange事件。

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();

备选方案1

根据__utils__.fill()和casper.fillForm()的代码判断，表单的选择器不一定必须是表单。它可能是一个div：

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

备选方案2

如果这仍然不起作用，您可能需要专注于页面上下文中的select元素，并使用PhantomJS发送上下键事件来更改值。 page.sendEvent()：

this.evaluate(function(){
    document.querySelector('select[id="custom-cache-pref"]').focus();
});
this.page.sendEvent('keypress', this.page.event.key.Down);

如何使用CasperJS填充未嵌入表单的select元素？

1 个答案:

备选方案1

备选方案2