CasperJS 无法设置选择列表值答案

【问题标题】：CasperJS fails to set select list valuesCasperJS 无法设置选择列表值
【发布时间】：2013-10-17 01:50:51
【问题描述】：

我有一个如下所示的选择列表：

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

我正在尝试将值设置为 3。我尝试了 3 种方法均未成功。

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.fillSelectors('select#ListingType', {
    'select[name="Criteria/ListingTypeID"]' :  "3"
}, true);

这会引发错误消息：``CasperError: Errors executed whilefilled form: no field matching css selector "select[name="Criteria/ListingTypeID"]" in form''

我的选择器出了什么问题？

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

这似乎也有效（没有错误），但值再次保持不变。

为了完整起见，我尝试在每个变体之后发送“更改”事件。我还在每个之后转储了所选元素的属性，它从不显示该值已设置。

请注意，此选择器所在的页面上有大量的 JS 代码，并且此

我确定我犯了一些非常愚蠢的错误，但是在过去几天对这段代码进行黑客攻击之后，我没有取得任何进展。有什么可行的方法来做到这一点？

【问题讨论】：

fillSelectors 接受标识 form 元素的选择器，而不是字段本身...
所以fillSelectors 永远不会在没有父 form 元素的元素上工作，它会出现。啊。谢谢。
这看起来像答案stackoverflow.com/questions/16332312/…

标签： javascript phantomjs html-select casperjs

【解决方案1】：

您可以使用 slimerJS（它打开 firefox）轻松检查值的变化。

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

如果你想用它的文本而不是值来填充选项（我发现它更容易）：使用这个函数：

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

在你的测试中：

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

页面当然必须有jquery，或者你注入它。

【讨论】：