javascript - 使用 Casperjs 的两个标签检索内容

Question

我刚刚开始使用 CasperJs，我想检索存储在列表中的当前页码。我认为这可以通过组合 class 和 aria-selected 来完成，后者必须为 true 才能指示当前页面。

如果有人能指出如何以编程方式执行此操作，我将不胜感激。 这是我到目前为止所得到的:

var casper = require("casper").create({
    pageSettings: {
        userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20130404 Firefox/23.0"
    }
});

var url = 'https://markets.ft.com/data/director-dealings';
var currentPage = 1;
var jobs = [];

casper.start(url, function() {
    this.waitForSelector('li[class="mod-ui-pagination__number"]');
});

casper.then(function() {

    var el = document.querySelectorAll('body > div.o-grid-container.mod-container > div:nth-child(2) > section > div:nth-child(1) > div > div > div.mod-ui-pagination__results-count > ul');//div[3] div[2] section div[1] div div div[3] ul li[2]');

    this.echo(JSON.stringify(el)); 
});

casper.run();

HTML:

<ul class="mod-ui-pagination">
    <li class="mod-ui-pagination__arrows" aria-disabled="false"><i class="o-ft-icons-icon o-ft-icons-icon--arrow-left"></i></li>
    <li class="mod-ui-pagination__number" aria-selected="false" data-mod-pagination-num="1">1</li>
    <li class="mod-ui-pagination__number" aria-selected="true" data-mod-pagination-num="2">2</li>
    <li class="mod-ui-pagination__number" aria-selected="false" data-mod-pagination-num="3">3</li>
    <li class="mod-ui-pagination__ellipsis"><i class="o-ft-icons-icon o-ft-icons-icon--more"></i></li>
    <li class="mod-ui-pagination__number" aria-selected="false" data-mod-pagination-num="739">739</li>
    <li class="mod-ui-pagination__number" aria-selected="false" data-mod-pagination-num="740">740</li>
    <li class="mod-ui-pagination__number" aria-selected="false" data-mod-pagination-num="741">741</li>
    <li class="mod-ui-pagination__arrows" aria-disabled="false"><i class="o-ft-icons-icon o-ft-icons-icon--arrow-right"></i></li>
</ul>

PS:有没有一个技巧可以快速找到如何访问一个元素？检查>复制选择器

编辑:检查 > 复制 Xpath 返回 ul 元素:html/body/div[3]/div[2]/section/div[1]/div/div/div[3]/ul/li[2]

Answer 1

1. 使用evaluate()访问真实页面环境(DOM)
2. 使用 querySelector() 而不是 querySelectorAll()，因为您只需要一个元素
3. 使用此 CSS 选择器:ul.mod-ui-pagination > li[aria-selected="true"]

这是脚本:

var casper = require('casper').create({
  pageSettings: {
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20130404 Firefox/23.0'
  }
});

casper.start('https://markets.ft.com/data/director-dealings');

casper.waitForSelector('li.mod-ui-pagination__number', function () {
  this.echo(this.evaluate(function () {
    var el = document.querySelector('ul.mod-ui-pagination > li[aria-selected="true"]');
    return el.textContent;
  }));
});

casper.run();