Selenium 和 Firefox 的可重现截图答案

【问题标题】：Reproducible screenshots with Selenium and FirefoxSelenium 和 Firefox 的可重现截图
【发布时间】：2019-07-13 22:18:25
【问题描述】：

我使用 Selenium 使用 firefox Web 驱动程序自动执行一些 GUI 测试。

我想到，在测试运行期间创建屏幕截图以使用手册中的屏幕截图也是有意义的。

我的应用程序的屏幕是相对静态的——没有可见的时间戳等等。所以我的期望是，如果我从让我们说起始页创建一个屏幕截图，稍后再次导航到起始页，屏幕截图应该是相同的。此外，如果我运行两次测试，两次运行的起始页屏幕截图应该相同。

我将屏幕截图保存为 PNG，我什至在保存之前处理屏幕截图（保存时不带日期），因此文件应该完全相同。

尽管如此，如果我将图片相互比较（例如，将它们相互减去），它们之间会有细微的差异（肉眼看不到），表格边缘或字体周围有一些微弱的线条。

我的问题：

1) 为什么会有差异？

2) 确保屏幕截图相同的最简单方法是什么？（我可以做什么样的后期处理）

PS：我也试过把渲染器从skia改成windows再改成cairo，虽然差别略有不同，但还是没有解决问题。

【问题讨论】：

标签： selenium firefox image-processing screenshot selenium-firefoxdriver

【解决方案1】：

如何保存图片？

在 ruby 中我使用的是这样的东西？

def take_screenshot(image_id)
  scenario = Zpg::HooksHelper::FeatureHelper.scenario_name
  Dir.mkdir('output', 0o777) unless File.directory?('output')
  Dir.mkdir('output/screenshots', 0o777) unless File.directory?('output/screenshots')
  screenshot = "./output/screenshots/#{image_id}#{scenario.tr(' ', '_').gsub(/[^0-9A-Za-z_]/, '')}.png"
  if page.driver.browser.respond_to?(:save_screenshot)
    page.driver.browser.save_screenshot(screenshot)
  else
    save_screenshot(screenshot)
  end
  FileUtils.chmod(0o777, screenshot)
end

我正在检查图像差异

    # return[hash]
    def image_diff(imageid_1 = nil, _imageid_2 = nil)
      scenario = Zpg::HooksHelper::FeatureHelper.scenario_name
      if imageid_1.class != Integer
        image_1 = "./features/support/data/images/#{Zpg.brand}/#{imageid_1}.png"
        image_2 = "./output/screenshots/#{_imageid_2}#{scenario.tr(' ', '_').gsub(/[^0-9A-Za-z_]/, '')}.png"
      else
        image_1 = "./output/screenshots/#{imageid_1}#{scenario.tr(' ', '_').gsub(/[^0-9A-Za-z_]/, '')}.png"
        image_2 = "./output/screenshots/#{_imageid_2}#{scenario.tr(' ', '_').gsub(/[^0-9A-Za-z_]/, '')}.png"
      end
      images = [
          ChunkyPNG::Image.from_file(image_1),
          ChunkyPNG::Image.from_file(image_2)
      ]

      diff = []

      images.first.height.times do |y|
        images.first.row(y).each_with_index do |pixel, x|
          diff << [x, y] unless pixel == images.last[x, y]
        end
      end
      puts "pixels (total):     #{images.first.pixels.length}"
      puts "pixels changed:     #{diff.length}"
      puts "pixels changed (%): #{(diff.length.to_f / images.first.pixels.length) * 100}%"

      # init empty hash
      diff_hash = {}
      # return pixels changed number
      diff_hash[:pixels_changed] = diff.length
      # return pixels changed percentage
      diff_hash[:pixels_changed_percentage] = (diff.length.to_f / images.first.pixels.length) * 100
      # return diff hash
      diff_hash
    end

如果浏览器 DOM 不是 100% 加载，你会得到不同的结果。我会尝试设定一个阈值，我希望我的图像是。

.Net https://www.codeproject.com/Articles/374386/Simple-image-comparison-in-NET 中有一个非常好的项目，您可以将其转换为您想要的任何语言。

【讨论】：