Скриншоты на полную страницу в качестве Retina с использованием Ruby

Question

Я изо всех сил пытаюсь найти решение этой проблемы, перепробовав много вариантов.

Моя идеальная цель - сделать снимок экрана

• Захватить определенный элемент CSS
• Захватите всю высоту элемента (даже если она длиннее высоты страницы)
• Дождитесь, пока все ресурсы будут полностью загружены
• Быстро

Первая попытка (использование selenium-webdriver с установленным chromedriver)

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 (path,: full => 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.

Указание отдельных атрибутов устройства

Также можно включить мобильную эмуляцию, указав отдельные атрибуты. Чтобы включить мобильную эмуляцию таким образом, словарь "mobileEmulation" может содержать словарь "deviceMetrics" и строку "userAgent". Следующие метрики устройства должны быть указаны в словаре "deviceMetrics": "ширина" - ширина в пикселях экрана устройства "высота" - высота в пикселях экрана устройства "pixelRatio" - отношение пикселей устройства

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

Но не удалось заставить его работать.

Любые предложения будут очень благодарны, спасибо!

Answer 1

Поскольку на этот вопрос никто не ответил, я подумал обрисовать решение, которое я использовал, чтобы максимально приблизиться к идеалу.

В конечном счете, пока эти проблемы с фантомным JS не будут решены

• https://github.com/ariya/phantomjs/issues/10964
• https://github.com/ariya/phantomjs/issues/12132

Похоже, что единственным драйвером, способным обеспечить снимок экрана полной высоты, является драйвер Firefox.

Хотя он не поддерживает сетчатку с использованием пикселей устройства для моих целей, я смог преобразовать с помощью CSS масштаб до 200%, и большинство элементов (кроме растровых изображений) являются точными.

Рабочий пример захвата экрана конкретным твитом с разрешением сетчатки в Ruby см. Здесь: https://github.com/chrism/twitter-screenshot