percy-capybara 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 19a9bfb3b76169ea2b1ba301f69e6466d2da4cef
-  data.tar.gz: 1f1963b73fa8ce3df14d48c34003cc631b5aa4a0
+  metadata.gz: 5897b9782db61c4a242df39bcb2f57124260d7c4
+  data.tar.gz: e38619b2dcc0b856fcc21963180aa187838b531a
 SHA512:
-  metadata.gz: cccbace3dee7650f246cd96736e620719428ba22eaa88cec41f7aafa3564901d6af0271e77247a3a2b4f8f2758efb2e570bf33b9ea6f409138bb048af8e967b9
-  data.tar.gz: 99c6891ee227853322830ebff8648df6dbf7bc5fc11488151ed43c9e6a9065948c16faee2e82c8e9ad47d7f87863801d5a594c547e12ac120fba96cd5b4d4924
+  metadata.gz: cb70c98eb8a3fdbaf66e75762cbbd6b5eef5e1e9eda8a05fd2bfc77e49cd76cfe20e33b478e9ca8c588ddc8fb4fefe5aa34f3513d58928cc0328351a53290513
+  data.tar.gz: 520bf4dadc5e701b0736a1b305b872c2766446995c046b36c2b58ec907b2000d2d90b8977ae05caea084d8d25cbfa4ff43c9a1cb27d792b45665828f2ecaf08b

data/.travis.yml

@@ -4,4 +4,4 @@ rvm:
   - 2.1.1
   - 2.2.2
   - ruby-head
-script: bundle exec rspec
+script: xvfb-run rspec

data/lib/percy/capybara.rb

@@ -1,5 +1,6 @@
 require 'percy'
 require 'percy/capybara/version'
+require 'percy/capybara/httpfetcher'
 require 'percy/capybara/client'
 
 module Percy

data/lib/percy/capybara/client.rb

@@ -9,6 +9,7 @@ module Percy
 
       class Error < Exception; end
       class BuildNotInitializedError < Error; end
+      class WebMockBlockingConnectionsError < Error; end
 
       attr_reader :client
 

data/lib/percy/capybara/client/snapshots.rb

@@ -1,3 +1,4 @@
+require 'set'
 require 'faraday'
 require 'httpclient'
 require 'digest'
@@ -6,9 +7,6 @@ module Percy
   module Capybara
     class Client
       module Snapshots
-        # @private
-        FETCH_SENTINEL_VALUE = '[[FETCH]]'
-
         # Takes a snapshot of the given page HTML and its assets.
         #
         # @param [Capybara::Session] page The Capybara page to snapshot.
@@ -35,6 +33,7 @@ module Percy
           resources = []
           resources << _get_root_html_resource(page)
           resources += _get_css_resources(page)
+          resources += _get_image_resources(page)
           resources.each { |resource| resource_map[resource.sha] = resource }
           resource_map
         end
@@ -61,75 +60,140 @@ module Percy
           # Find all CSS resources.
           # http://www.quirksmode.org/dom/w3c_css.html#access
           script = <<-JS
-            function findStylesRecursively(stylesheet, result_data) {
-              result_data = result_data || {};
-              if (stylesheet.href) {
-                result_data[stylesheet.href] = result_data[stylesheet.href] || '';
+            function findStylesRecursively(stylesheet, css_urls) {
+              if (stylesheet.href) {  // Skip stylesheet without hrefs (inline stylesheets).
+                css_urls.push(stylesheet.href);
 
                 // Remote stylesheet rules cannot be accessed because of the same-origin policy.
                 // Unfortunately, if you touch .cssRules in Selenium, it throws a JavascriptError
-                // with 'The operation is insecure'. To work around this, skip any remote stylesheets
-                // and mark them with a sentinel value so we can fetch them later.
+                // with 'The operation is insecure'. To work around this, skip reading rules of
+                // remote stylesheets but still include them for fetching.
+                //
+                // TODO: If a remote stylesheet has an @import, it will be missing because we don't
+                // notice it here. We could potentially recursively fetch remote imports in
+                // ruby-land below.
                 var parser = document.createElement('a');
                 parser.href = stylesheet.href;
                 if (parser.host != window.location.host) {
-                  result_data[stylesheet.href] = '#{FETCH_SENTINEL_VALUE}'; // Must be a string.
                   return;
                 }
               }
-
               for (var i = 0; i < stylesheet.cssRules.length; i++) {
                 var rule = stylesheet.cssRules[i];
-                // Skip stylesheet without hrefs (inline stylesheets).
-                // These will be present in the HTML snapshot.
-                if (stylesheet.href) {
-                  // Append current rule text.
-                  result_data[stylesheet.href] += rule.cssText + '\\n';
-                }
-
-                // Handle recursive @imports.
+                // Depth-first search, handle recursive @imports.
                 if (rule.styleSheet) {
-                  findStylesRecursively(rule.styleSheet, result_data);
+                  findStylesRecursively(rule.styleSheet, css_urls);
                 }
               }
             }
 
-            var percy_resources = {};
+            var css_urls = [];
             for (var i = 0; i < document.styleSheets.length; i++) {
-              findStylesRecursively(document.styleSheets[i], percy_resources);
+              findStylesRecursively(document.styleSheets[i], css_urls);
             }
-            return percy_resources;
+            return css_urls;
           JS
+          resource_urls = _evaluate_script(page, script)
+
+          resource_urls.each do |resource_url|
+            response = _fetch_resource_url(resource_url)
+            next if !response
+            sha = Digest::SHA256.hexdigest(response.body)
+            resources << Percy::Client::Resource.new(
+              sha, resource_url, mimetype: 'text/css', content: response.body)
+          end
+          resources
+        end
+        private :_get_css_resources
+
+        # @private
+        def _get_image_resources(page)
+          resources = []
+          image_urls = Set.new
+
+          # Find all image tags on the page.
+          page.all('img').each do |image_element|
+            srcs = []
+            srcs << image_element[:src] if !image_element[:src].nil?
 
-          # Returned datastructure: {"<absolute URL>" => "<CSS text>", ...}
-          resource_data = _evaluate_script(page, script)
+            srcset_raw_urls = image_element[:srcset] || ''
+            temp_urls = srcset_raw_urls.split(',')
+            temp_urls.each do |temp_url|
+              srcs << temp_url.split(' ').first
+            end
 
-          resource_data.each do |resource_url, css|
-            if css == FETCH_SENTINEL_VALUE
-              # Handle sentinel value that indicates a remote CSS resource that must be fetched.
-              response = _fetch_resource_url(resource_url)
-              next if !response
-              css = response.body
+            srcs.each do |src|
+              # Skip data URIs.
+              next if src.match(/\Adata:/)
+              image_urls << src
             end
+          end
+
+          # Find all CSS-loaded images which set a background-image.
+          script = <<-JS
+            var raw_image_urls = [];
 
-            sha = Digest::SHA256.hexdigest(css)
+            var tags = document.getElementsByTagName('*');
+            var el;
+            var rawValue;
+
+            for (var i = 0; i < tags.length; i++) {
+              el = tags[i];
+              if (el.currentStyle) {
+                rawValue = el.currentStyle['backgroundImage'];
+              } else if (window.getComputedStyle) {
+                rawValue = window.getComputedStyle(el).getPropertyValue('background-image');
+              }
+              if (!rawValue || rawValue === "none") {
+                continue;
+              } else {
+                raw_image_urls.push(rawValue);
+              }
+            }
+            return raw_image_urls;
+          JS
+          raw_image_urls = _evaluate_script(page, script)
+          raw_image_urls.each do |raw_image_url|
+            temp_urls = raw_image_url.scan(/url\(["']?(.*?)["']?\)/)
+            # background-image can accept multiple url()s, so temp_urls is an array of URLs.
+            temp_urls.each do |temp_url|
+              # Skip data URIs.
+              next if temp_url[0].match(/\Adata:/)
+              image_urls << temp_url[0]
+            end
+          end
+
+          image_urls.each do |image_url|
+            # Make the resource URL absolute to the current page. If it is already absolute, this
+            # will have no effect.
+            resource_url = URI.join(page.current_url, image_url).to_s
+
+            # Fetch the images.
+            # TODO(fotinakis): this can be pretty inefficient for image-heavy pages because the
+            # browser has already loaded them once and this fetch cannot easily leverage the
+            # browser's cache. However, often these images are probably local resources served by a
+            # development server, so it may not be so bad. Re-evaluate if this becomes an issue.
+            response = _fetch_resource_url(resource_url)
+            next if !response
+
+            sha = Digest::SHA256.hexdigest(response.body)
             resources << Percy::Client::Resource.new(
-              sha, resource_url, mimetype: 'text/css', content: css)
+              sha, resource_url, mimetype: response.content_type, content: response.body)
           end
           resources
         end
-        private :_get_css_resources
+        private :_get_image_resources
 
         # @private
         def _fetch_resource_url(url)
-          response = Faraday.get(url)
-          content = response.body
-          if response.status != 200
+          response = Percy::Capybara::HttpFetcher.fetch(url)
+          if !response
             STDERR.puts "[percy] Warning: failed to fetch page resource, this might be a bug: #{url}"
             return nil
           end
           response
         end
+        private :_fetch_resource_url
 
         # @private
         def _evaluate_script(page, script)

data/lib/percy/capybara/httpfetcher.rb

@@ -0,0 +1,34 @@
+require 'tempfile'
+
+module Percy
+  module Capybara
+    module HttpFetcher
+      class Response < Struct.new(:body, :content_type); end
+
+      def self.fetch(url)
+        tempfile = Tempfile.new('percy-capybara-fetch')
+        temppath = tempfile.path
+
+        # Close and delete the tempfile, we just wanted the name. Also, we use the existence of the
+        # file as a signal below.
+        tempfile.close
+        tempfile.unlink
+
+        # Use curl as a magical subprocess weapon which escapes this Ruby sandbox and is not
+        # influenced by any HTTP middleware/restrictions. This helps us avoid causing lots of
+        # problems for people using gems like VCR/WebMock. We also disable certificate checking
+        # because, as odd as that is, it's the default state for Selenium Firefox and others.
+        output = `curl --insecure -v -o #{temppath} "#{url}" 2>&1`
+        content_type = output.match(/< Content-Type:(.*)/i)
+        content_type = content_type[1].strip if content_type
+
+        if File.exist?(temppath)
+          response = Percy::Capybara::HttpFetcher::Response.new(File.read(temppath), content_type)
+          # We've broken the tempfile so it won't get deleted when garbage collected. Delete!
+          File.delete(temppath)
+          response
+        end
+      end
+    end
+  end
+end

data/lib/percy/capybara/version.rb

@@ -1,5 +1,5 @@
 module Percy
   module Capybara
-    VERSION = '0.1.0'
+    VERSION = '0.1.1'
   end
 end

data/spec/lib/percy/capybara/client/snapshots_spec.rb

@@ -1,12 +1,12 @@
 require 'json'
 require 'digest'
 
-RSpec.describe Percy::Capybara::Client::Snapshots do
+RSpec.describe Percy::Capybara::Client::Snapshots, type: :feature do
   let(:capybara_client) { Percy::Capybara::Client.new }
 
   # Start a temp webserver that serves the testdata directory.
   # You can test this server manually by running:
-  # ruby -run -e httpd spec/lib/percy/capybara/testdata -p 9090
+  # ruby -run -e httpd spec/lib/percy/capybara/client/testdata/ -p 9090
   before(:all) do
     port = get_random_open_port
     Capybara.app_host = "http://localhost:#{port}"
@@ -19,10 +19,25 @@ RSpec.describe Percy::Capybara::Client::Snapshots do
     ].flatten)
 
     # Block until the server is up.
+    WebMock.disable_net_connect!(allow_localhost: true)
     verify_server_up(Capybara.app_host)
   end
   after(:all) { Process.kill('INT', @process.pid) }
 
+  before(:each) do
+    # Special setting for capybara-webkit. If clients are using capybara-webkit they would
+    # also have to have this setting enabled since apparently all resources are blocked by default.
+    page.driver.respond_to?(:allow_url) && page.driver.allow_url('*')
+  end
+
+  def find_resource(resources, regex)
+    begin
+      resources.select { |resource| resource.resource_url.match(regex) }.fetch(0)
+    rescue IndexError
+      raise "Missing expected image with resource_url that matches: #{regex}"
+    end
+  end
+
   describe '#_get_root_html_resource', type: :feature, js: true do
     it 'includes the root DOM HTML' do
       visit '/'
@@ -37,67 +52,141 @@ RSpec.describe Percy::Capybara::Client::Snapshots do
   end
   describe '#_get_css_resources', type: :feature, js: true do
     it 'includes all linked and imported stylesheets' do
-      # For capybara-webkit.
-      page.driver.respond_to?(:allow_url) && page.driver.allow_url('maxcdn.bootstrapcdn.com')
-
       visit '/test-css.html'
       resources = capybara_client.send(:_get_css_resources, page)
 
-      expect(resources.length).to eq(7)
-      expect(resources.collect(&:mimetype).uniq).to eq(['text/css'])
-
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/base\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/base\.css/)
 
       expect(resource.content).to include('.colored-by-base { color: red; }')
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/simple-imports\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
-      expect(resource.content).to include('@import url("imports.css")')
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/simple-imports\.css/)
+      expect(resource.content).to include("@import url('imports.css');")
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/imports\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/imports\.css/)
       expect(resource.content).to include('.colored-by-imports { color: red; }')
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/level0-imports\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
-      expect(resource.content).to include('@import url("level1-imports.css")')
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/level0-imports\.css/)
+      expect(resource.content).to include("@import url('level1-imports.css')")
       expect(resource.content).to include('.colored-by-level0-imports { color: red; }')
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/level1-imports\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
-      expect(resource.content).to include('@import url("level2-imports.css")')
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/level1-imports\.css/)
+      expect(resource.content).to include("@import url('level2-imports.css')")
       expect(resource.content).to include('.colored-by-level1-imports { color: red; }')
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url.match(/http:\/\/localhost:\d+\/css\/level2-imports\.css/)
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/css\/level2-imports\.css/)
       expect(resource.content).to include(".colored-by-level2-imports { color: red; }")
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
 
-      resource = resources.select do |resource|
-        resource.resource_url == (
-          'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css')
-      end.fetch(0)
-      expect(resource.is_root).to be_falsey
+      resource = find_resource(
+        resources, /https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css/)
       expect(resource.content).to include('Bootstrap v3.3.4 (http://getbootstrap.com)')
       expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
+
+      expect(resources.length).to eq(7)
+      expect(resources.collect(&:mimetype).uniq).to eq(['text/css'])
+      expect(resources.collect(&:is_root).uniq).to match_array([nil])
+    end
+  end
+  describe '#_get_image_resources', type: :feature, js: true do
+    it 'includes all images' do
+      visit '/test-images.html'
+      resources = capybara_client.send(:_get_image_resources, page)
+
+      # The order of these is just for convenience, they match the order in test-images.html.
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/img-relative\.png/)
+      content = File.read(File.expand_path('../testdata/images/img-relative.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/img-relative-to-root\.png/)
+      content = File.read(File.expand_path('../testdata/images/img-relative-to-root.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/percy\.svg/)
+      content = File.read(File.expand_path('../testdata/images/percy.svg', __FILE__))
+      # In Ruby 1.9.3 the SVG mimetype is not registered so our mini ruby webserver doesn't serve
+      # the correct content type. Allow either to work here so we can test older Rubies fully.
+      expect(resource.mimetype).to match(/image\/svg\+xml|application\/octet-stream/)
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/i.imgur.com\/Umkjdao.png/)
+      content = Faraday.get('http://i.imgur.com/Umkjdao.png').body
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/bg-relative\.png/)
+      content = File.read(File.expand_path('../testdata/images/bg-relative.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/bg-relative-to-root\.png/)
+      content = File.read(File.expand_path('../testdata/images/bg-relative-to-root.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/i.imgur.com\/5mLoBs1.png/)
+      content = Faraday.get('http://i.imgur.com/5mLoBs1.png').body
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/bg-stacked\.png/)
+      content = File.read(File.expand_path('../testdata/images/bg-stacked.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/i.imgur.com\/61AQuplb.jpg/)
+      content = Faraday.get('http://i.imgur.com/61AQuplb.jpg').body
+      expect(resource.mimetype).to eq('image/jpeg')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/srcset-base\.png/)
+      content = File.read(File.expand_path('../testdata/images/srcset-base.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/srcset-first\.png/)
+      content = File.read(File.expand_path('../testdata/images/srcset-first.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      resource = find_resource(resources, /http:\/\/localhost:\d+\/images\/srcset-second\.png/)
+      content = File.read(File.expand_path('../testdata/images/srcset-second.png', __FILE__))
+      expect(resource.mimetype).to eq('image/png')
+      expected_sha = Digest::SHA256.hexdigest(content)
+      expect(Digest::SHA256.hexdigest(resource.content)).to eq(expected_sha)
+      expect(resource.sha).to eq(expected_sha)
+
+      expect(resources.length).to eq(12)
+      expect(resources.collect(&:is_root).uniq).to match_array([nil])
     end
   end
   describe '#snapshot', type: :feature, js: true do
@@ -140,6 +229,12 @@ RSpec.describe Percy::Capybara::Client::Snapshots do
         stub_request(:post, "https://percy.io/api/v1/builds/123/resources/")
           .with(body: /#{resource.sha}/).to_return(status: 201, body: {success: true}.to_json)
 
+        expect(capybara_client).to receive(:_get_root_html_resource)
+          .with(page).once.and_call_original
+        expect(capybara_client).to receive(:_get_css_resources)
+          .with(page).once.and_call_original
+        expect(capybara_client).to receive(:_get_image_resources)
+          .with(page).once.and_call_original
         resource_map = capybara_client.snapshot(page)
       end
     end

data/spec/lib/percy/capybara/client/testdata/images/percy.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 170 110" enable-background="new 0 0 170 110" xml:space="preserve">
+<g>
+	<g>
+		<polyline fill="#1F0924" points="49.2,97.6 9.4,103.4 46,86.8 6.2,81.2 46,75.6 9.4,59 49.2,64.9 18.7,38.6 55.2,55.4 33.4,21.7 
+			63.7,48.1 52.2,9.6 73.9,43.4 73.7,3.2 85,41.8 96.2,3.2 96.1,43.4 117.7,9.5 106.3,48.1 136.5,21.6 114.7,55.4 151.2,38.6 
+			120.8,64.8 160.6,59 124,75.6 163.8,81.1 124,86.8 160.6,103.3 120.8,97.5 		"/>
+		<polyline fill="#EDDDC2" points="52.8,90.2 18.5,90.3 51.4,80.7 18.5,71.2 52.8,71.3 23.9,52.8 56.8,62.6 63,55.4 48.7,24.2 
+			71.1,50.2 66.1,16.3 80.2,47.5 85,13.5 89.8,47.5 103.9,16.3 98.9,50.2 121.3,24.2 107,55.4 113.2,62.6 146.1,52.8 117.2,71.3 
+			151.5,71.2 118.6,80.7 151.5,90.3 117.2,90.2 		"/>
+	</g>
+	<polygon fill="#EDDDC2" points="108.3,45.7 134.4,39.1 127.9,65.2 	"/>
+	<polygon fill="#1F0924" points="114.2,48.6 128.5,45 124.9,59.3 114.2,59.3 	"/>
+	<polygon fill="#EDDDC2" points="61.7,45.7 35.6,39.1 42.1,65.2 	"/>
+	<polygon fill="#1F0924" points="55.8,48.6 41.5,45 45.1,59.3 55.8,59.3 	"/>
+	<polyline fill="#B157B5" points="38.3,101.1 131.7,101.1 166.8,88.5 131.5,76 155.8,47.6 119,54.5 125.9,17.7 97.5,42 85,6.7 
+		72.5,42 44.1,17.7 51,54.5 14.2,47.6 38.5,76 3.2,88.5 	"/>
+	<circle fill="#EDDDC2" cx="61.4" cy="78.7" r="12.1"/>
+	<circle fill="#1F0924" cx="61.4" cy="78.7" r="9.5"/>
+	<circle fill="#EDDDC2" cx="58.2" cy="75.5" r="4.2"/>
+	<circle fill="#EDDDC2" cx="108.6" cy="78.7" r="12.1"/>
+	<circle fill="#1F0924" cx="108.6" cy="78.7" r="9.5"/>
+	<circle fill="#EDDDC2" cx="105.3" cy="75.5" r="4.2"/>
+	<path fill="#EDDDC2" d="M62.9,97.6c0-12.2,9.9-22.1,22.1-22.1s22.1,9.9,22.1,22.1S62.9,109.8,62.9,97.6z"/>
+	<path fill="#1F0924" d="M89.8,96.5c-2,0-3.7-1-4.8-2.5c-1,1.5-2.8,2.5-4.8,2.5c-3.2,0-5.8-2.6-5.8-5.8c0-0.6,0.4-1,1-1s1,0.4,1,1
+		c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8h2c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8c0-0.6,0.4-1,1-1s1,0.4,1,1
+		C95.5,93.9,93,96.5,89.8,96.5z"/>
+	<path fill="#1F0924" d="M92.8,83.6c0,4.3-3.5,7.8-7.8,7.8s-7.8-3.5-7.8-7.8C77.2,79.3,92.8,79.3,92.8,83.6z"/>
+	<path fill="#EDDDC2" d="M47,101.3c0-4,3.2-7.3,7.3-7.3s7.3,3.2,7.3,7.3S47,105.3,47,101.3z"/>
+	<path fill="#EDDDC2" d="M108.4,101.3c0-4,3.2-7.3,7.3-7.3c4,0,7.3,3.2,7.3,7.3S108.4,105.3,108.4,101.3z"/>
+</g>
+</svg>

data/spec/lib/percy/capybara/client/testdata/test-images.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <title>Test Percy::Capybara</title>
+  <h1>Test images</h1>
+
+  <h2>img local PNG (relative)</h2>
+  <img src="images/img-relative.png">
+
+  <h2>img local PNG (relative to root)</h2>
+  <img src="/images/img-relative-to-root.png">
+
+  <h2>img PNG (remote)</h2>
+  <img src="http://i.imgur.com/Umkjdao.png">
+
+  <h2>img SVG (relative)</h2>
+  <img src="../../../images/percy.svg" width="300">
+
+  <h2>CSS background-image (relative)</h2>
+  <div style="background-image: url(images/bg-relative.png); width: 200px; height: 200px;"></div>
+
+  <h2>CSS background-image (relative to root)</h2>
+  <div style="background-image: url(/images/bg-relative-to-root.png); width: 200px; height: 200px;"></div>
+
+  <h2>CSS background-image (remote)</h2>
+  <div style="background-image: url(http://i.imgur.com/5mLoBs1.png); width: 408px; height: 376px;"></div>
+
+  <h2>img data-uri (ignored)</h2>
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFVyxjAAAAmU4baAAAACNJREFUeNrswYEAAAAAw6D5U1/hAFUBAAAAAAAAAAAAjwkwACd0AAGLtJfaAAAAAElFTkSuQmCC">
+
+  <h2>CSS background-image data-uri (ignored)</h2>
+  <div style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFVyxjAAAAmU4baAAAACNJREFUeNrswYEAAAAAw6D5U1/hAFUBAAAAAAAAAAAAjwkwACd0AAGLtJfaAAAAAElFTkSuQmCC); width: 100px; height: 100px;"></div>
+
+  <h2>CSS background stacked (local and remote)</h2>
+  <div style="background: url(/images/bg-stacked.png) 200px 200px no-repeat, url('http://i.imgur.com/61AQuplb.jpg'); width: 100px; height: 100px;"></div>
+
+  <h2>img srcset</h2>
+  <img width="200" src="/images/srcset-base.png" srcset="/images/srcset-first.png 200w, /images/srcset-second.png 400w">
+
+  <h2>Duplicates of some of the above images, to verify they are not duplicated in resources:</h2>
+  <img src="images/img-relative.png">
+  <img src="/images/img-relative-to-root.png">
+  <img src="http://i.imgur.com/Umkjdao.png">
+  <div style="background-image: url(/images/bg-relative-to-root.png); width: 200px; height: 200px;"></div>
+  <div style="background-image: url(http://i.imgur.com/5mLoBs1.png); width: 408px; height: 376px;"></div>
+</html>

data/spec/lib/percy/capybara/httpfetcher_spec.rb

@@ -0,0 +1,15 @@
+RSpec.describe Percy::Capybara::HttpFetcher do
+  it 'takes a URL and returns a response' do
+    response = Percy::Capybara::HttpFetcher.fetch('http://i.imgur.com/Umkjdao.png')
+
+    # Slightly magical hash, just a SHA-256 sum of the image above.
+    expect(Digest::SHA256.hexdigest(response.body)).to eq(
+      '4beb51550bef8e9e30d37ea8c13658e99bb01722062f218185e419af5ad93e13')
+    expect(response.content_type).to eq('image/png')
+  end
+  it 'returns nil if fetch failed' do
+    expect(Percy::Capybara::HttpFetcher.fetch('bad-url')).to be_nil
+    expect(Percy::Capybara::HttpFetcher.fetch('http://i.imgur.com/fake-image.png')).to be_nil
+  end
+end
+

data/spec/lib/percy/capybara_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe Percy::Capybara do
     end
   end
   describe '#snapshot' do
-    it 'delgates to Percy::Capybara::Client' do
+    it 'delegates to Percy::Capybara::Client' do
       capybara_client = Percy::Capybara.capybara_client
       expect(capybara_client).to receive(:initialize_build).once
       Percy::Capybara.initialize_build
@@ -30,7 +30,7 @@ RSpec.describe Percy::Capybara do
     it 'returns silently if no build is initialized' do
       expect { Percy::Capybara.finalize_build }.to_not raise_error
     end
-    it 'delgates to Percy::Capybara::Client' do
+    it 'delegates to Percy::Capybara::Client' do
       capybara_client = Percy::Capybara.capybara_client
       build_data = {'data' => {'id' => 123}}
       expect(capybara_client.client).to receive(:create_build).and_return(build_data).once

data/spec/spec_helper.rb

@@ -35,7 +35,8 @@ RSpec.configure do |config|
   # Comment this out to test the default Selenium/Firefox flow:
   Capybara.javascript_driver = :webkit
 
-  config.before(:all) do
-    WebMock.disable_net_connect!(allow_localhost: true, allow: [/maxcdn.bootstrapcdn.com/])
+  config.before(:each) do
+    WebMock.disable_net_connect!(allow_localhost: true)
   end
+  config.before(:each, type: :feature) { WebMock.allow_net_connect! }
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: percy-capybara
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Perceptual Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-20 00:00:00.000000000 Z
+date: 2015-05-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: percy-client
@@ -156,6 +156,7 @@ files:
 - lib/percy/capybara/client.rb
 - lib/percy/capybara/client/builds.rb
 - lib/percy/capybara/client/snapshots.rb
+- lib/percy/capybara/httpfetcher.rb
 - lib/percy/capybara/version.rb
 - percy-capybara.gemspec
 - spec/lib/percy/capybara/client/builds_spec.rb
@@ -166,8 +167,19 @@ files:
 - spec/lib/percy/capybara/client/testdata/css/level1-imports.css
 - spec/lib/percy/capybara/client/testdata/css/level2-imports.css
 - spec/lib/percy/capybara/client/testdata/css/simple-imports.css
+- spec/lib/percy/capybara/client/testdata/images/bg-relative-to-root.png
+- spec/lib/percy/capybara/client/testdata/images/bg-relative.png
+- spec/lib/percy/capybara/client/testdata/images/bg-stacked.png
+- spec/lib/percy/capybara/client/testdata/images/img-relative-to-root.png
+- spec/lib/percy/capybara/client/testdata/images/img-relative.png
+- spec/lib/percy/capybara/client/testdata/images/percy.svg
+- spec/lib/percy/capybara/client/testdata/images/srcset-base.png
+- spec/lib/percy/capybara/client/testdata/images/srcset-first.png
+- spec/lib/percy/capybara/client/testdata/images/srcset-second.png
 - spec/lib/percy/capybara/client/testdata/index.html
 - spec/lib/percy/capybara/client/testdata/test-css.html
+- spec/lib/percy/capybara/client/testdata/test-images.html
+- spec/lib/percy/capybara/httpfetcher_spec.rb
 - spec/lib/percy/capybara_spec.rb
 - spec/spec_helper.rb
 - spec/support/test_helpers.rb
@@ -204,8 +216,19 @@ test_files:
 - spec/lib/percy/capybara/client/testdata/css/level1-imports.css
 - spec/lib/percy/capybara/client/testdata/css/level2-imports.css
 - spec/lib/percy/capybara/client/testdata/css/simple-imports.css
+- spec/lib/percy/capybara/client/testdata/images/bg-relative-to-root.png
+- spec/lib/percy/capybara/client/testdata/images/bg-relative.png
+- spec/lib/percy/capybara/client/testdata/images/bg-stacked.png
+- spec/lib/percy/capybara/client/testdata/images/img-relative-to-root.png
+- spec/lib/percy/capybara/client/testdata/images/img-relative.png
+- spec/lib/percy/capybara/client/testdata/images/percy.svg
+- spec/lib/percy/capybara/client/testdata/images/srcset-base.png
+- spec/lib/percy/capybara/client/testdata/images/srcset-first.png
+- spec/lib/percy/capybara/client/testdata/images/srcset-second.png
 - spec/lib/percy/capybara/client/testdata/index.html
 - spec/lib/percy/capybara/client/testdata/test-css.html
+- spec/lib/percy/capybara/client/testdata/test-images.html
+- spec/lib/percy/capybara/httpfetcher_spec.rb
 - spec/lib/percy/capybara_spec.rb
 - spec/spec_helper.rb
 - spec/support/test_helpers.rb