Nokogiri 无法使用 CSS 选择器答案

【问题标题】：Nokogiri doesn't work using css selectorNokogiri 无法使用 CSS 选择器
【发布时间】：2014-09-03 04:00:44
【问题描述】：

我的代码：

require 'rubygems'
require 'nokogiri'
require 'open-uri'

PAGE_URL = "http://www.whoscored.com/Teams/1799/Fixtures/Spain-Almeria"

page = Nokogiri::HTML(open(PAGE_URL))

CSS_SELECTOR = "a.match-link.match-report.rc"

links = page.css(CSS_SELECTOR)

puts links.length   # => RESULT = 0
puts links[0].text   # => RESULT = none
puts links[0]["href"] # => RESULT = ./read_stats.rb:15:in `<main>': undefined method     `text' for nil:NilClass (NoMethodError)

结果应该是：

1
Match Report
/Matches/738463/MatchReport

但我的结果是：

0
./read_stats.rb:15:in `<main>': undefined method `text' for nil:NilClass (NoMethodError)

它不起作用，我没有看到问题......

谢谢。

【问题讨论】：

是什么让你认为选择器应该匹配任何东西？你看过返回的 HTML 吗？您确定您要查找的元素是在 HTML 中返回的，而不是由某些 JavaScript 添加的吗？
我用 Firebug 对其进行了测试，它可以工作。我还测试了 ruby 脚本中的完整选择器（“html body div#layout-wrapper div#layout-content-wrapper div#layout-content-2col-left div#team-fixture-wrapper.ws-panel table#team- fixtures.grid.fixture tbody tr.item.alt td.toolbar.right a.match-link.match-report.rc") 这不起作用。
正如@muistooshort 所提到的，Firebug 不必检查服务器最初交付的 HTML DOM。 Javascript 可以在运行时改变 DOM，而 Firebug 只显示当前的改变。试试这个：curl http://www.whoscored.com/Teams/1799/Fixtures/Spain-Almeria | grep 'match-link'（它产生 0 个结果）...
当你抓取页面时，不要看浏览器在做什么，看服务器发回的原始 HTML。浏览器将调整 HTML 以确保其有效性，并且它们将运行 Nokogiri 不会运行的 JavaScript。
我们需要看一个被解析的 HTML 的最小例子。不要指望我们检索整个页面并跟踪标签。与其尝试使用长选择器，不如从最短的 CSS 开始，然后慢慢添加额外的标签，直到找到问题所在。而且，如上所述，不要相信 Firebug 或浏览器。查看 Nokogiri 通过open 获取的 HTML。

标签： css ruby nokogiri

【解决方案1】：

您需要先渲染页面，然后才能抓取它。

require 'watir-webdriver'
require 'nokogiri'

$browser = Watir::Browser.start "http://www.whoscored.com/Teams/1799/Fixtures/Spain-Almeria"

$page_html = Nokogiri::HTML.parse($browser.html)

$page_html.css("td[@class='toolbar right']").each do |me|
  print "#{me.count}\n#{me.text}\n#{me.css("a").map{|link| link['href']}[0]}\n\n"
end

试试watir.com

【讨论】：

完美！使用 selenium + phantomjs 是相同的逻辑。在浏览器中渲染页面以加载 de js 内容。