Search code examples
capybarascreenshotpoltergeist

Poltergeist: Cropped screenshot

This is my Poltergeist setup:

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, { screen_size: [1024, 768], window_size: [1024, 768] })
end

Capybara.default_driver = :poltergeist
Capybara.javascript_driver = :poltergeist

browser = Capybara.current_session
# browser.driver.resize(1024, 768)
# browser.driver.resize_window(1024, 768)
# browser.current_window.resize_to(1024, 768)

browser.visit('https://en.wikipedia.org/wiki/Poltergeist')
browser.save_screenshot('test.jpg')

The screenshot has the correct size, but the browser window itself is cropped:

enter image description here

I also tried the commented resize methods, but nothing solves this problem. What could cause the browser window to be cropped?

Solution

  • Poltergeists rendering is controlled by PhantomJS. This looks to be caused by Wikipedia using CSS that PhantomJS either doesn't support or has a bug with. Unfortunately the current release version of PhantomJS (2.1.1) is basically equivalent to Safari 5, so it's nowhere near up to date. There are a few possible potential solutions to this. In order of effort

    1. If you are using a platform where one of the current Poltergeist 2.5.0 beta releases can be run try that since it's much more up to date in CSS and JS support

    2. Use execute_script to inject CSS that is supported by Poltergeist and overrides the CSS that is broken. Highly site specific, so if you're not only getting screenshots of Wikipedia it's probably not practical.

    3. Swap to using selenium with headless chrome for generating your screenshots.

    #3 may or may not be easier than #2 depending on your full setup