如何在Ruby中使用selenium-webdriver/capybara截取整个浏览器页面及其元素的屏幕截图? [英] How to take a screenshot of a full browser page and its elements using selenium-webdriver/capybara in Ruby?

问题描述

我正在进行屏幕截图自动化.特别是，我正在努力实现以下目标:

I am working on screenshot automation. In particular, I am trying to achieve the following:

1. 提示用户输入网站X上不同页面的链接
2. 提示用户输入类名Y
3. 我应该能够访问网站X的登录页面，提供登录详细信息(假设它们是已知的)，单击提交"按钮，这应该将我重定向到主页"页面
4. 然后，我查看用户提供的链接列表，访问每个页面并拍摄所有具有Y类(或整个页面)的元素的屏幕截图
5. 将它们保存在当前目录中

请点击链接以显示视觉效果

我想在Ruby中实现以下解决方案(但我也愿意接受其他建议):

1)截取网站X上整个可滚动页面的屏幕快照2)查找类Y的元素，尤其是其在页面上的位置，宽度和高度.3)裁剪完整的屏幕截图，以便仅显示所需的元素

1) Take a screenshot of the entire scrollable page on the website X 2) Find the element(s) of class Y, in particular its location on the page, width and height. 3) Crop the full screenshot so that only desired element is visible

问题如下:

我无法截取整个页面的屏幕截图，只能截取屏幕可见区域的屏幕截图.

I cannot take a screenshot of the entire page, I was only able to take a screenshot of the visible area of my screen.

这是我尝试过的以及相应的问题:

解决方案1(Ruby-常规):

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox #:chrome

driver.navigate.to "https://some_very-very_long_page_on_website_X"
driver.manage.window.maximize # <- works for firefox only
driver.save_screenshot('picture1.png')

# Problem: it captures only the viewable area, 
# not an entire page

解决方案2(Ruby-调整窗口大小):

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox #:chrome
driver.navigate.to 'https://some_very-very_long_page_on_website_X'

width  = driver.execute_script("return Math.max(document.body.scrollWidth,document.body.offsetWidth,document.documentElement.clientWidth,document.documentElement.scrollWidth,document.documentElement.offsetWidth);")
height = driver.execute_script("return Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);")

driver.manage.window.resize_to(width, height) # <- resizes the window
driver.manage.window.full_screen  # <- works, but in chrome throws:
                                  # full_screen': undefined method `full_screen_window'

picture = driver.screenshot_as(:png)

File.open('picture2.png', 'w+') do |fh|
  fh.write picture
end

driver.quit

# Resizes the window only to the viewable area, as a result,
# it captures the viewable area only

解决方案3(Ruby-watir宝石):

require 'watir'

b = Watir::Browser.new
b.goto 'https://some_very-very_long_page_on_website_X'
b.screenshot.save("picture.png")

# Issues: does not capture the entire page

解决方案4(Ruby-捕获单个元素)

require "selenium-webdriver"

driver = Selenium::WebDriver.for :chrome

driver.get'https://some_very-very_long_page_on_website_X'

driver.manage.window.maximize
driver.execute_script("document.getElementById('some_id').scrollIntoView();")
driver.save_screenshot "picture3.png"

# Problem: captures the element, which I need, but only if its size is less than
# the viewable area

解决方案5(Ruby-缩放)

require "selenium-webdriver"

driver = Selenium::WebDriver.for :firefox

driver.get 'https://some_very-very_long_page_on_website_X'

driver.manage.window.maximize
driver.execute_script("document.body.style.transform = 'scale(0.5)'")
#driver.execute_script("document.body.style.zoom = '50%'") <-- transform works better than zoom

driver.save_screenshot "picture3.png"

#Issues: works, but not for very long pages, in addition it may change the layout
# (some elements may start to overlap each other)
# Also I am not sure how to calculate the value of the parameter for scale
# for very long pages

解决方案6-(Ruby-无头Chrome调整大小)

require "selenium-webdriver"

options = Selenium::WebDriver::Chrome::Options.new
options.add_argument('--headless')
driver = Selenium::WebDriver.for :chrome, options: options

driver.get "https://some_very-very_long_page_on_website_X"

width  = driver.execute_script("return Math.max(document.body.scrollWidth,document.body.offsetWidth,document.documentElement.clientWidth,document.documentElement.scrollWidth,document.documentElement.offsetWidth);")
height = driver.execute_script("return Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);")

driver.manage.window.resize_to(width+2000, height+2000) # <-- if I do not have +2000, page looks squished
                                                        # the greater the number, the greater the quality
                                                        # but also the more white space is around the page
                                                        # and the picture is heavier
driver.manage.window.maximize

sleep 5             # <--- required waiting for page loading 
driver.save_screenshot "full.png"

# One of the best approaches, but it is not clear to me how to calculate 
# the parameters for resize_to

工具/技术:

• selenium-webdriver(3.12.0)
• ChromeDriver 2.40

推荐答案

您可以使用 watir-screenshot-stitch gem 来完成您想要的事情:

You can use the watir-screenshot-stitch gem to do exactly what you want:

require 'watir-screenshot-stitch'
b = Watir::Browser.new :firefox
b.goto "https://github.com/mozilla/geckodriver/issues/570"
b.base64_geckodriver # => returns a base64-encoded full page screenshot.

这篇关于如何在Ruby中使用selenium-webdriver/capybara截取整个浏览器页面及其元素的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！