Question

我努力寻找解决方案，尝试了很多选择。

我的理想目标是能够截图

抓住特定的CSS元素
抓住元素的整个高度（即使长度超过页面高度）
等待包含的所有资产已完全加载
快速

首次尝试（使用安装了chromedriver的selenium-webdriver）

的Gemfile

gem 'selenium-webdriver'

App.rb

require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome 
driver.get url
driver.save_screenshot("screenshot.png")

这在一定程度上有效，但屏幕截图被修剪到最大高度（这对于Chromedriver https://code.google.com/p/chromedriver/issues/detail?id=294而言似乎是一个非常古老的问题）

第二次尝试（使用poltergeist切换到phantomjs）

的Gemfile

gem 'capybara'
gem 'poltergeist'

App.rb

require "capybara/dsl"
require "capybara/poltergeist"
Capybara.run_server = false
Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, {
    # Raise JavaScript errors to Ruby
    js_errors: true,
    # Additional command line options for PhantomJS
    phantomjs_options: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'],
  })
end
Capybara.current_driver = :poltergeist

class Screenshot
  include Capybara::DSL

  # Captures a screenshot of +url+ saving it to +path+.
  def capture(url, path)
    # Open page
    visit url

    if page.driver.status_code == 200
      page.driver.save_screenshot(path, :full => true)
      puts "screenshot saved"
    else
      # Handle error
      puts "there was a problem #{page.driver.status_code}"
    end
  end
end

screenshot = Screenshot.new
screenshot.capture url, "screenshot.png"

这有不同的问题，

它捕获了页面的全长
未嵌入网络字体（https://github.com/ariya/phantomjs/issues/12132）
视网膜不可用（https://github.com/ariya/phantomjs/issues/10964）

第三次尝试（使用Capybara尝试利用page.save_screenshot（路径，：full =＆gt; true））

的Gemfile

gem 'selenium-webdriver'
gem 'capybara'

App.rb

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

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, :browser => :chrome)
end

Capybara.current_driver = :chrome

class Screenshot
  include Capybara::DSL

  # Captures a screenshot of +url+ saving it to +path+.
  def capture(url, path)
    # Open page
    visit url

    page.save_screenshot(path, :full => true)
    puts "screenshot saved"

  end
end

screenshot = Screenshot.new
screenshot.capture url, "screenshot.png"

简短版本 - 这没有帮助

第四次尝试（使用Watir）

的Gemfile

gem 'watir-webdriver'

App.rb

require 'watir-webdriver'
b = Watir::Browser.new
b.goto url
b.screenshot.save 'screenshot.png'

这可行（启动Firefox），但与DevicePixelRatio相同的问题是能够拍摄视网膜截图。

第五次尝试（回到使用Chrome）

App.rb

require 'watir-webdriver'
b = Watir::Browser.new :chrome
b.goto url
b.screenshot.save './tmp/watir.png'

直接回到裁剪页面问题。

理想情况下，我认为可能是使用最新ChromeDriver v2.12的移动仿真选项实现此目的的方法

指定单个设备属性

也可以通过指定启用移动仿真   个人属性。要以这种方式启用Mobile Emulation，   “mobileEmulation”字典可以包含“deviceMetrics”字典   和一个“userAgent”字符串。必须具有以下设备指标   在“deviceMetrics”字典中指定：“width” - 宽度   设备屏幕的像素“高度” - 像素的高度   设备的屏幕“pixelRatio” - 设备的像素比率

https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation

但是还没设法让它发挥作用。

任何建议都会非常感谢！

Answer 1

由于这个问题还没有得到其他人的回答，我认为我概述了我过去尽可能接近理想的解决方案。

最终解决幻影JS的这些问题

似乎唯一能够确保全高度屏幕截图的驱动程序是Firefox驱动程序。

虽然它不支持使用设备像素的视网膜，但我能够使用CSS将比例缩放到200％，并且大多数元素（位图图像除外）都是准确的。

有关在Ruby中以视网膜分辨率捕获特定推文的屏幕工作示例，请参阅此处：https://github.com/chrism/twitter-screenshot

使用Ruby在Retina Quality中的完整页面截图

1 个答案: