使用Ruby结合Nokogiri提取网页指定元素遇阻求助

问题根源 #

你在开发者工具中看到的目标HTML是JavaScript动态渲染生成的，而Mechanize只能抓取服务器返回的静态HTML，不会执行页面中的JavaScript，所以静态页面里没有这段内容。

解决方案 #

方案1：使用支持JS渲染的工具（推荐） #

改用Capybara搭配Selenium/Headless Chrome，这类工具可以模拟浏览器执行JS，获取完整渲染后的页面。

步骤：

1. 安装依赖gem：

gem install capybara selenium-webdriver

2. 修改代码如下：

require 'capybara/dsl'
require 'selenium-webdriver'
require 'pry'

include Capybara::DSL

# 配置无头Chrome（不弹出浏览器窗口）
Capybara.register_driver :headless_chrome do |app|
  chrome_options = Selenium::WebDriver::Chrome::Options.new(args: %w[headless disable-gpu no-sandbox])
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: chrome_options)
end

Capybara.default_driver = :headless_chrome
Capybara.default_max_wait_time = 10 # 设置等待JS加载的超时时间

site_url = 'https://host.com'

visit(site_url)

# 用唯一标识的data-test-id定位按钮，比class更可靠
target_button = find('button[data-test-id="select-link"]')
# 提取隐藏span中的文本
flight_details = target_button.find('span.is-visually-hidden').text

puts flight_details

binding.pry

方案2：直接抓取数据接口（更高效） #

如果不想模拟浏览器，可以直接获取页面加载数据的接口：

• 打开开发者工具的「Network」标签，刷新页面
• 筛选「XHR」类型的请求，找到返回航班数据的接口（通常URL包含flight、fare等关键词）
• 复制该接口的请求URL、请求头和参数，用Mechanize直接请求接口获取JSON格式的数据，解析后提取所需信息

验证方法 #

在你原代码的pry会话中执行以下命令，确认静态页面是否包含目标内容：

# 搜索目标标识
page.body.include?("FLIGHTS_DETAILS_AND_FARES")
# 或者搜索价格文本
page.body.include?("$683")

如果返回false，就证明内容是动态渲染的，必须用上述方案解决。

内容的提问来源于stack exchange，提问作者Grant Sayer