In Rails/Ember.js app, screenshots are not fully loaded

[andrewhavens]

The app that I'm trying to use this on is a Rails 4.2 app with an Ember.js front-end. We use Cucumber, Capybara, Poltergeist, and capybara-ember (to solve some of the async waiting issues that Capybara can't handle on its own).

When using the app in a web browser, it looks good, but when the test creates the screenshot, it looks wrong. The screenshots look like the page hasn't finished loading, but I've added sleep statements before generating the screenshot, and they look the same.

Example 1: Notice how the green background doesn't span the full window and the submit button is too small.

Example 2: However in this example the same screen renders the full size of the window, but the submit button is still rendered too small:

Example 3: Screenshot appears to be in the middle of rendering the orange background. I intentionally blurred the logo.

I don't know if this has anything to do with Ember's async routing and rendering system. Could be related to the same issues we've been having (which required the use of capybara-ember to sleep until the async routing/rendering completed).