使用Watir截取元素截图时出现NoMethodError错误的原因及解决方法

问题重现 #

你使用watir-element-screenshot工具截取元素截图时遇到了NoMethodError，错误提示浮点数没有>>方法。你的代码如下：

require 'watir'
require 'watir/extensions/element/screenshot'
browser = Watir::Browser.new :firefox
browser.goto 'google.com.ua'
browser.text_field(id: "lst-ib").set "ruby\n"
browser.window.maximize
browser.element(id: "resultStats").screenshot("2.png")
browser.close

运行后抛出的错误栈：

C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/color.rb:968:in `scanline_bytesize': undefined method `>>' for 2439.0:Float (NoMethodError)
Did you mean? >
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:207:in `encode_png_image_pass_to_stream'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:174:in `encode_png_image_without_interlacing'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:161:in `encode_png_pixelstream'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:85:in `to_datastream'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/image.rb:62:in `to_datastream'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:35:in `write'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:43:in `block in save'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:43:in `open'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/chunky_png-1.3.8/lib/chunky_png/canvas/png_encoding.rb:43:in `save'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/watir-extensions-element-screenshot-0.0.3/lib/watir/extensions/element/screenshot.rb:12:in `screenshot'
from 2.rb:11:in `<main>'

错误原因 #

这个问题的核心是**watir-element-screenshot gem（版本0.0.3）没有处理浮点数类型的元素尺寸**：

• 当你的系统是高DPI屏幕，或者浏览器启用了缩放功能时，Selenium获取到的元素宽高会是浮点数（比如错误里的2439.0）。
• 而ChunkyPNG库的scanline_bytesize方法需要整数参数，它尝试使用整数位移运算符>>处理这个浮点数，自然就抛出了未定义方法的错误。
• 另外，watir-element-screenshot这个gem已经多年没有更新，官方没有修复这类兼容性问题。

修复方案 #

你可以选择以下两种方案解决问题：

方案1：修改gem源码强制转换尺寸为整数

找到你的Ruby gems目录下的watir-extensions-element-screenshot的源码文件（路径类似C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/watir-extensions-element-screenshot-0.0.3/lib/watir/extensions/element/screenshot.rb），修改其中获取尺寸的代码：
原代码：

width = element.wd.size.width
height = element.wd.size.height

修改为：

width = element.wd.size.width.to_i
height = element.wd.size.height.to_i

这样就能把浮点数转成整数，避免ChunkyPNG报错。

方案2：禁用浏览器的高DPI缩放

通过浏览器启动参数强制关闭缩放，让元素尺寸返回整数：

• Chrome浏览器：

  require 'watir'
  require 'watir/extensions/element/screenshot'
  # 添加强制缩放参数
  browser = Watir::Browser.new :chrome, options: {args: ['--force-device-scale-factor=1']}
  browser.goto 'google.com.ua'
  browser.text_field(id: "lst-ib").set "ruby\n"
  browser.window.maximize
  browser.element(id: "resultStats").screenshot("2.png")
  browser.close
  

• Firefox浏览器：

  require 'watir'
  require 'watir/extensions/element/screenshot'
  # 创建配置禁用缩放
  profile = Selenium::WebDriver::Firefox::Profile.new
  profile['layout.css.devPixelsPerPx'] = '1.0'
  browser = Watir::Browser.new :firefox, profile: profile
  browser.goto 'google.com.ua'
  browser.text_field(id: "lst-ib").set "ruby\n"
  browser.window.maximize
  browser.element(id: "resultStats").screenshot("2.png")
  browser.close
  

内容的提问来源于stack exchange，提问作者Yura