Ruby+Selenium实现每步执行后截图：现有代码问题及修复方法

你当前的代码核心问题是所有步骤的截图都用了同一个文件名screenshot.png，导致每执行一步就会覆盖上一步的截图，最终只能保留最后一步的结果。要实现每步对应独立截图，只需要给每个截图生成唯一的文件名，同时优化截图在测试报告中的展示即可。

修改你的HOOKS.RB代码如下：

AfterStep do |step|
  # 生成唯一文件名：精确到毫秒的时间戳 + 简化后的步骤名称
  timestamp = Time.now.strftime("%Y%m%d%H%M%S%L")
  # 替换步骤名称里的特殊字符为下划线，避免文件名非法
  simplified_step_name = step.name.gsub(/[^a-zA-Z0-9]/, '_')
  screenshot_filename = "screenshot_#{timestamp}_#{simplified_step_name}.png"

  # 统一使用@browser对象（需确保env.rb中已正确初始化）
  @browser.screenshot.save(screenshot_filename)
  encoded_img = @browser.driver.screenshot_as(:base64)
  
  # 给embed添加第三个参数，让测试报告显示截图对应的步骤标识
  embed("data:image/png;base64,#{encoded_img}", 'image/png', screenshot_filename)
end

关键修改点说明： #

• 唯一文件名：通过Time.now.strftime生成精确到毫秒的时间戳，再结合简化后的步骤名称，彻底避免文件名重复导致的覆盖问题，同时文件名还能直观对应到具体步骤。
• 统一浏览器对象：把代码里的browser改成@browser，避免作用域差异导致的对象找不到问题（需要你在ENV.RB的Before钩子中初始化@browser，比如@browser = Watir::Browser.new :chrome）。
• 报告可读性优化：给embed方法加上第三个参数（截图文件名），测试报告里会直接显示每个截图对应的标识，方便后续排查问题时快速定位步骤。

简洁版可选方案 #

如果你不需要关联步骤名称，仅用时间戳也能保证文件名唯一性，简化代码如下：

AfterStep do
  timestamp = Time.now.strftime("%Y%m%d%H%M%S%L")
  screenshot_filename = "screenshot_#{timestamp}.png"
  
  @browser.screenshot.save(screenshot_filename)
  encoded_img = @browser.driver.screenshot_as(:base64)
  embed("data:image/png;base64,#{encoded_img}", 'image/png', screenshot_filename)
end

修改完成后，每执行完一个步骤就会生成一个独立的截图文件，测试报告里也会对应展示每一步的截图，不会再出现覆盖的问题。

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