可以用Selenium/Capybara截取整个页面吗？

Question

PhantomJS 可以选择截取整个页面的屏幕截图（而不仅仅是当前视口）。有没有办法使用 Selenium 来做到这一点？我正在使用 headless gem 无头运行 Cucumber/Capybara 测试。我会使用 PhantomJS，但我遇到了一些其他问题。

Answer 1

如果有人被冲上海岸，寻找如何使用 Poltergeist 做到这一点，你只需要传递

full

参数：

page.save_screenshot('screen.png', full: true) # If providing a custom file name.
page.save_screenshot(full: true)               # Capybara sets a name based on timestamp.
page.save_and_open_screenshot('screen.png', full: true) # Same as save_screenshot.
page.save_and_open_screenshot(full: true)               # Same as save_screenshot.

文档。

希望有帮助！

Answer 2

原来我一直在使用无头宝石提供的

take_screenshot

方法，而我本来可以使用

page.save_screenshot()

方法，它正是我所需要的。谢谢你，安德烈。

Answer 3

我尝试了很多方法来充分利用 Capybara/Selenium。

我尝试过的只有一件事似乎有效，那就是使用 headless_chrome。请记住，我使用循环以不同的宽度截取屏幕截图：

  def screenshot
    driver = Capybara.current_session.driver
    window = Capybara.current_session.driver.browser.manage.window
    widths = [320, 1380] #leave normal w as last
    widths.each do |w|
      window.resize_to(w, 900)
      total_width = driver.execute_script("return document.body.offsetWidth")
      total_height = driver.execute_script("return document.body.scrollHeight")
      window.resize_to(total_width, total_height)
      save_screenshot
    end
  end

我调整大小两次以获得高度信息。

rails_helper.rb：

Capybara.register_driver :headless_chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { 
      "args" => %w{ 
        headless 
        disable-gpu
        --disable-notifications
      } 
    }
  )
  Capybara::Selenium::Driver.new app,
    browser: :chrome,
    desired_capabilities: capabilities
end

Capybara.javascript_driver     = :headless_chrome
Capybara.current_driver        = :headless_chrome

Answer 4

你也可以这样做：

After do |scenario|
  take_screenshot(@browser, scenario)
end

def take_screenshot(browser, scenario)
  if scenario.failed?
    scenario_name = scenario.name.gsub /[^\w\-]/, ' '
    time = Time.now.strftime("%Y-%m-%d %H%M")
    screenshot_path = './failed_png/' + time + ' - ' + scenario_name + '.png'
  else
    scenario_name = scenario.name.gsub /[^\w\-]/, ' '
    time = Time.now.strftime("%Y-%m-%d %H%M")
    screenshot_path = './success_png/' + time + ' - ' + scenario_name + '.png'
  end
  browser.save_screenshot(screenshot_path)
end

如果您创建了 failed_png 和 success_png 文件夹，此代码将为每次成功和失败截取屏幕截图，并将其放在相应的文件夹中，并带有时间戳。 此代码放入您的 env.rb 文件中，这样您就不必使用任何帮助程序或向步骤定义添加任何额外的代码。

Answer 5

接下来与带有 Selenium 的 Capybara 相关：您可以使用 Chrome 和 Firefox 浏览器来运行 Selenium Webdriver。

Chrome（

selenium_chrome

和

selenium_chrome_headless

水豚驱动程序）不允许在不进行调整的情况下制作整个页面的屏幕截图（定义窗口高度等）https://github.com/SeleniumHQ/selenium/issues/14116

Firefox（

selenium

和

selenium_headless

Capybara 驱动程序）允许使用

save_screenshot(full_page: true)

。

因此，您可以使用

selenium

或

selenium_headless

驱动程序来获取所有页面的屏幕截图：

在

spec_helper.rb

中你可以添加

  config.before(:each, :screenshot, type: :system) do
    driven_by :selenium_headless
  end

在规格上你可以做

it 'spec name', :screenshot do
    ...
    save_screenshot(full_page: true)
end