使用 RSpec 和 Capybara 检查图像和网站图标是否存在

Question

有没有使用 rspec 和 capybara 检查图像和网站图标是否存在的好方法？

我可以检查网站图标和图像的 DOM，但我希望能够检查这些图像是否加载。 rspec 和 capybara 可以做到这一点吗？

Answer 1

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

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

勾选https://gist.github.com/yovasx2/1c767114f2e003474a546c89ab4f90db加星下载

Answer 3

问题是找出实际的 img 和 favicon 是否存在。这是检查滑块的所有图像是否存在的代码。

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

对于 id 为 myimage 的单个图像使用

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

对于 favicon，最简单的方法是运行以下命令

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

Answer 4

要测试页面上的所有损坏的图像，

• 特定图像，
• 存在选择器，或
• 管道中的图像可用性

我收集所有图像并使用以下命令检查“获取”响应：

    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

希望对您有所帮助。