下拉菜单下的选项未被选中

Question

测试场景是，

正在创建一个单元格，
从下拉菜单中更改语言（从 R 到 Python），
输入代码并执行。 HTML 下拉菜单的代码是

<select class="form-control cell-control-select cell-control">
    <option>Markdown</option>
    <option>R</option>
    <option>Python</option>
    <option>RMarkdown</option>
</select>

下面是我的 casperjs 代码

casper.then(function(){
    this.mouse.click({ type: 'xpath' , path: "/html/body/div[3]/div/div[2]/div/div[3]/div[1]/div/select"});//x path for dropdown menu
    this.echo('clicking on dropdown menu');
    this.wait(3000);
});

casper.then(function(){
    var z = this.evaluate(function() {
    document.querySelector('.form-control').selectedIndex = 2;
    return true;
    });
    this.wait(3000);
});

它正在从下拉菜单中选择 Python 语言，但是当我们运行代码时，它在提示单元格中显示错误。我们在 python 语言单元格中运行 R 代码时遇到同样的错误。

Answer 1

问题可能是 select 框中的更改侦听器未被调用，因为设置 selectedIndex 属性不会触发更改。

触发此更改的可靠方法是使用 jQuery's change():

this.evaluate(function() {
    var form = document.querySelector('.form-control');
    form.selectedIndex = 2;
    $(form).change();
});

如果页面中还没有jQuery，如果本地有jQuery，可以这样注入：

var casper = require('casper').create({
    clientScripts: [ "jquery.min.js" ]
});

或者如果您在本地没有：

var casper = require('casper').create({
    remoteScripts: [ "http://code.jquery.com/jquery-2.1.3.min.js" ]
});

下拉菜单下的选项未被选中

options under dropdown menu is not getting selected

javascript

html-select

casperjs