javascript - 如何在 Ruby 中使用 selenium-webdriver/capybara 截取完整的浏览器页面及其元素?
问题描述
我正在研究屏幕截图自动化。特别是,我正在努力实现以下目标:
- 提示用户指向网站上不同页面的链接 X
- 提示用户输入类名 Y
- 我应该能够访问网站 X 登录页面,提供登录详细信息(假设它们是已知的),单击“提交”按钮,这应该将我重定向到“主页”页面
- 然后我查看用户提供的链接列表,访问每个页面并截取所有具有 Y 类(或整个页面)的元素
- 将它们保存在当前目录中
我想在 Ruby 中实现以下解决方案(但我也愿意接受任何其他建议):
1) 截取网站 X 上整个可滚动页面的屏幕截图 2) 找到类 Y 的元素,特别是它在页面上的位置、宽度和高度。3)裁剪完整的屏幕截图,以便只看到所需的元素
问题如下:
我无法截取整个页面的屏幕截图,我只能截取屏幕可见区域的屏幕截图。
这是我尝试过的和相应的问题:
解决方案 1(红宝石 - 通用):
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 gem):
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
工具/技术:
- 硒网络驱动程序(3.12.0)
- 铬驱动程序 2.40
解决方案
您可以使用watir-screenshot-stitch gem来完成您想要的操作:
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.
推荐阅读
- php - 如何在 openCart 的结帐路线中添加社交登录?
- reactjs - 在构建我的 expo 应用程序时出错:无效的标记压缩接近堆限制分配失败 - JavaScript 堆内存不足
- ethernet - 以太网通信是否需要互联网连接?
- rest - Opensubtitles 新的 REST API 返回 401 未授权
- python - 如何在 scalewidget 中插入时间戳
- android - 如何创建具有圆形左下角和右下角的布局?
- typescript - 根据类型保护推断函数的返回类型
- python - 我们如何将从关键字部分派生的变量分配给机器人框架中变量部分中的变量
- javascript - mongoDB $unset 每个与数组中的 id 匹配的对象
- python - 无法在安卓手机上部署应用(reportlab 问题)