如何使用 CasperJS 选择指定元素？

Question

我想先选择 <span> 和第二个 <span> ，然后获取它们的 innerText。

我尝试使用 xpath 或 document.querySelector ，它们不起作用。我console.log我的数组显示为空。

// I want to select first <span>
function getDate() {
    var date = document.querySelector('div.movie_intro_info_r li').selectedIndex = 1;
    return Array.prototype.map.call(date, function (e) {
        return e.innerHTML;
    });
};
// I want to select second <span>
function getMovieLength() {
    var movieLength = document.querySelectorAll(x('//*[@class="movie_intro_info_r"]/span[2]'));
    return Array.prototype.map.call(movieLength, function (e) {
        return e.innerText;
    });
};

casper.then(function () {
    casper.each(movieHref, function (casper, url) {
        casper.thenOpen(url, function () {
            casper.waitForSelector('div.btn_gray_info.gabtn', function () {
                console.log('wait for element');
            });
            releaseDate[urlCount] = this.evaluate(getDate);
            console.log(releaseDate[urlCount]);// show null

            movieLength[urlCount] = this.evaluate(getMovieLength);
            console.log(movieLength[urlCount]);// show null
            urlCount++;
        });
    });
});

我怎样才能只选择指定的元素并获取它的innerText？

Answer 1

你的代码对于你想要做的事情来说有点太复杂了。您应该考虑将 fetchText 方法与 CSS 选择器一起使用：

var casper = require('casper').create();

casper.start('YOUR_URL', function () {
  this.echo(this.fetchText('.movie_intro_info_r > span:first-of-type'));
  this.echo(this.fetchText('.movie_intro_info_r > span:nth-of-type(2)'));
}).run();