使用 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 is basically the same as 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');

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

Get option values from drop down box with CasperJS

javascript

casperjs