Wait for an image to load using Capybara SitePrism

Question

How can I wait for an image to load using Capybara? Here's my app code:

-- <img src="data:image/jpeg.*" class="some class" alt="Image">

I have tried using the wait_for method using those class and img attributes with no luck. It never waited for that image to load.

Answer 1

img elements have a complete property that indicates whether the image is loaded or not. Therefore something along the lines of

start = Time.now
while true
  break if find('img.some_class')['complete']
  if Time.now > start + 5.seconds
    fail "Image still not loaded"
  end
  sleep 0.1
end

would wait up to 5 seconds for the image to finish loading, assuming the img element is already on the page.

This could also be implemented as a custom selector with something along the lines of

Capybara.add_selector(:loaded_image) do
  css { |locator_class| "img.#{locator_class}" }
  filter(:loaded, default: true, boolean: true) { |node, value| not(value ^ node['complete']) }
end

which could then be called as

find(:loaded_image, 'some_class')

*** Note: I haven't actually tried the custom selector code, but it should be close enough to provide guidance