使用 CasperJS 从淘汰赛下拉列表中获取选定的值答案

【问题标题】：Get selected value from knockout dropdown using CasperJS使用 CasperJS 从淘汰赛下拉列表中获取选定的值
【发布时间】：2015-11-27 13:39:19
【问题描述】：

我有一个使用 KnockoutJS 创建的下拉菜单。现在我正在编写 UI 测试，我想在下拉列表中为我的 UI 测试获取所选项目（我正在使用 CasperJS）。问题是当我在下拉选择器旁边写> option[selected="selected"] 时，我得到了未定义。请注意，我想在不更改 .js 文件的情况下执行此操作，仅更改测试。我该怎么做？

【问题讨论】：

这是因为属性（反映当前状态；可更改）和属性（反映创建状态元素；可更改）之间的差异。
你建议做什么？
我不能推荐任何东西，因为我不知道你到底在做什么。我不明白您所说的 “我想在不更改 .js 文件的情况下执行此操作” 是什么意思。哪个JS文件？你是说 CasperJS 脚本吗？
我不想修改淘汰赛。

标签： javascript knockout.js html-select casperjs

【解决方案1】：

CasperJS 没有直接提供获取选中值的函数，但是你可以使用普通的 DOM 操作来获取数据

var selector = "select"; // use proper selector
casper.then(function(){
    var selected = this.evaluate(function(selector){
        var s = document.querySelector(selector);
        var o = s.children[s.selectedIndex];
        return {value: o.value, text: o.innerHTML};
    }, selector);
    this.echo("result: " + JSON.stringify(selected, undefined, 4));
});

您可能还需要等待选择元素出现：

casper.waitForSelector(selector + " > option")
    .then(function(){/* from above */});

【讨论】：