Checking existence of images and favicons with RSpec and Capybara

Question

Is there a good way to check on existence of images and favicons using rspec and capybara?

I can check on the DOM of favicons and images, but I want to be able to ch

Answer 1

To test for all broken images on a page versus,

• a specific image,
• the presence of a selector, or
• the image availability in the pipeline

I gather all the images and check a "get" response using the following:

    describe "Check for Images" do
        before { visit page_path }

        it "should not have broken images" do
          all_images = page.all('img')
          all_images.each do |img|
            get img[:src]
            expect(response).to be_successful
          end
        end  
    end

Hope that helps.

Answer 2

# frozen_string_literal: true

module Capybara
  module CustomMatchers
    include Capybara::DSL

    class Asset
      def asset_exists?(actual, src)
        js_script = <<JSS
xhr = new XMLHttpRequest();
xhr.open('GET', '#{src}', true);
xhr.send();
JSS
        actual.execute_script(js_script)
        status = actual.evaluate_script('xhr.status') # get js variable value
        status == 200 || status == 302
      end
    end

    class LoadImage < Asset
      def initialize(*args)
        @args = args
        @src = args.first
      end

      def matches?(actual)
        is_present = actual.has_selector?("img[src='#{@src}']")
        is_present && asset_exists?(actual, @src)
      end

      def does_not_match?(actual)
        actual.has_no_selector?("img[src='#{@src}']")
      end

      def failure_message
        "No image loaded with source: '#{@src}'"
      end

      def failure_message_when_negated
        "Image loaded with source: '#{@src}'"
      end

      def description
        "Verify if image with source: '#{@src}' is loaded"
      end
    end

    class LoadFavicon < Asset
      def initialize(*args)
        @args = args
        @rel = args.first
        @href = args.second
      end

      def matches?(actual)
        is_present = actual.has_selector?("link[rel='#{@rel}'][href='#{@href}']", visible: false)
        is_present && asset_exists?(actual, @href)
      end

      def does_not_match?(actual)
        actual.has_no_selector?("link[rel='#{@rel}'][href='#{@href}']", visible: false)
      end

      def failure_message
        "No favicon loaded with rel: '#{@rel}' and href: '#{@href}'"
      end

      def failure_message_when_negated
        "Favicon loaded with rel: '#{@rel}' and href: '#{@href}'"
      end

      def description
        "Verify if favicon with rel: '#{@rel}' and href: '#{@href}' is loaded"
      end
    end

    def load_image(*args)
      LoadImage.new(*args)
    end

    def load_favicon(*args)
      LoadFavicon.new(*args)
    end
  end
end

RSpec.configure do |config|
  config.include Capybara::CustomMatchers
end

Check https://gist.github.com/yovasx2/1c767114f2e003474a546c89ab4f90db to star and download

Answer 3

The question is to find out if the actual img and favicon are present. Here is the code to check that all images for the slider are present.

page.all('#carousel img').each do |img|
  visit img[:src]
  page.status_code.should be 200
end

For individual image with id myimage use

visit page.find('img#myimage')[:src]
page.status_code.should be 200

And for favicon simplest is to run the following

page.all('link[rel~="icon"]', visible: :any).each do |fav|
  visit fav[:href]
  page.status_code.should be 200
end

Answer 4

describe "check images and favicon" do
  before { visit "url/to/check")

  it "should have the images" do
    page.should have_css('img', text: "image1.jpg")

  it "should have the favicon" do
    page.should have_xpath("/html/head/link[@href='favicon.ico']"
  end 
end