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

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

到 select 选项 "byc" 但是这次 "select" 元素没有嵌入到表单中！

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

Answer 1

改编自我的回答 here，您可以创建自己的函数，select按值作为一个选项。这会更改 selected 索引，它可能不会触发 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()的代码判断，selector的形式不一定是形式。它可能是 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 元素？

How to fill a select element which is not embedded in a form with CasperJS?

javascript

html-select

casperjs

备选方案 1

备选方案 2