Ferrum を使って特定の要素のスクリーンショットを撮影する

はじめに

Ferrum は CDP (Chrome DevTools Protocol) を使用して Ruby で Chrome を操作できる Gem です。今回はこの Gem を使用して、Web ページ上の特定の要素のスクリーンショットを撮影してみます。

例

Yahoo!天気・災害 で 福岡県福岡市 の本日の天気の部分を撮影したいです。

require 'ferrum'

browser = Ferrum::Browser.new
page = browser.create_page

# Yahoo! 天気・災害 > 天気・災害トップ > 九州 > 福岡県 > 福岡 (福岡)
url = 'https://weather.yahoo.co.jp/weather/jp/40/8210.html'
page.goto(url) 

# ~/Downloads/todays_weather.png として保存する。
path = Pathname(Dir.home).join('Downloads/todays_weather.png')
selector = '.forecastCity td:first-child'
page.screenshot(path:, selector:)

browser.quit

うまく撮影できました

バージョン情報

• Ruby 3.3.4
• Ferrum 0.15