javascript - 使用 CasperJS 从下拉框中获取选项值

Question

刚开始学习CasperJS，我知道我可以使用以下方法获取选项的文本:

var casper = require('casper').create();
casper.start('http://www.example.com/test.aspx', function() {
  this.evaluate(function () {
    this.echo("Values: " + this.fetchText('#mySelect'));
  });
});
casper.run(function () {
    this.exit();
});

哪里mySelect是 <select>在页面中。示例 HTML 如下:

<select id="mySelect">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

我的目标是从 mySelect 中获取值(1、2 和 3) .我如何在 CasperJS 中执行此操作？我尝试了以下代码，但没有显示任何内容:

this.evaluate(function() {
    var options = document.getElementById("mySelect").children;
    for(var i = 0; i < options.length; i++) {
        this.echo('Options: ' + options[i]);
    }
});

经过一点调试，options是undefined .

Answer 1

casper.evaluate与 PhantomJS 的 page.evaluate 基本相同(我链接了两者，所以你可以仔细阅读)。它是沙盒页面上下文。来自外部的变量在那里不可用，this 指的是 window。我怀疑该页面是否具有全局函数 echo 和 fetchText。

请注意，不能从页面上下文传递 DOM 元素。您将必须构建如下表示:

var options = this.evaluate(function() {
    var options = document.getElementById("mySelect").children;
    return [].map.call(options, function(opt){
        return {val: opt.value, text: opt.textContent};
    });
});

或者只是

var options = this.getElementsInfo('#mySelect > option');