percy-capybara 0.3.0 → 0.4.0

data/lib/percy/capybara/loaders/native_loader.rb

@@ -0,0 +1,209 @@
+require 'percy/capybara/loaders/base_loader'
+require 'digest'
+require 'uri'
+
+module Percy
+  module Capybara
+    module Loaders
+
+      # Resource loader that uses the native Capybara browser interface to discover resources.
+      # This loader uses JavaScript to discover page resources, so specs must be tagged with
+      # "js: true" because the default Rack::Test driver does not support executing JavaScript.
+      class NativeLoader < BaseLoader
+        PATH_REGEX = /\A\/[^\\s\"']*/
+        DATA_URL_REGEX = /\Adata:/
+        LOCAL_HOSTNAMES = [
+          'localhost',
+          '127.0.0.1',
+          '0.0.0.0',
+        ].freeze
+
+        def snapshot_resources
+          resources = []
+          resources << root_html_resource
+          resources += _get_css_resources
+          resources += _get_image_resources
+          resources
+        end
+
+        def build_resources
+          []
+        end
+
+        # @private
+        def _get_css_resources
+          resources = []
+          # Find all CSS resources.
+          # http://www.quirksmode.org/dom/w3c_css.html#access
+          script = <<-JS
+            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 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) {
+                  return;
+                }
+              }
+              for (var i = 0; i < stylesheet.cssRules.length; i++) {
+                var rule = stylesheet.cssRules[i];
+                // Depth-first search, handle recursive @imports.
+                if (rule.styleSheet) {
+                  findStylesRecursively(rule.styleSheet, css_urls);
+                }
+              }
+            }
+
+            var css_urls = [];
+            for (var i = 0; i < document.styleSheets.length; i++) {
+              findStylesRecursively(document.styleSheets[i], css_urls);
+            }
+            return css_urls;
+          JS
+          resource_urls = _evaluate_script(page, script)
+
+          resource_urls.each do |url|
+            next if !_should_include_url?(url)
+            response = _fetch_resource_url(url)
+            next if !response
+            sha = Digest::SHA256.hexdigest(response.body)
+            resources << Percy::Client::Resource.new(
+              url, mimetype: 'text/css', content: response.body)
+          end
+          resources
+        end
+        private :_get_css_resources
+
+        # @private
+        def _get_image_resources
+          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?
+
+            srcset_raw_urls = image_element[:srcset] || ''
+            temp_urls = srcset_raw_urls.split(',')
+            temp_urls.each do |temp_url|
+              srcs << temp_url.split(' ').first
+            end
+
+            srcs.each do |url|
+              image_urls << url
+            end
+          end
+
+          # Find all CSS-loaded images which set a background-image.
+          script = <<-JS
+            var raw_image_urls = [];
+
+            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|
+              url = temp_url[0]
+              image_urls << url
+            end
+          end
+
+          image_urls.each do |image_url|
+            # If url references are blank, browsers will often fill them with the current page's
+            # URL, which makes no sense and will never be renderable. Strip these.
+            next if image_url == current_path \
+              || image_url == page.current_url \
+              || image_url.strip.empty?
+
+            # 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
+
+            next if !_should_include_url?(resource_url)
+
+            # 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(
+              resource_url, mimetype: response.content_type, content: response.body)
+          end
+          resources
+        end
+        private :_get_image_resources
+
+        # @private
+        def _fetch_resource_url(url)
+          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)
+          script = <<-JS
+            (function() {
+              #{script}
+            })();
+          JS
+          page.evaluate_script(script)
+        end
+        private :_evaluate_script
+
+        # @private
+        def _should_include_url?(url)
+          # It is a URL or a path, but not a data URI.
+          url_match = URL_REGEX.match(url)
+          data_url_match = DATA_URL_REGEX.match(url)
+          result = (url_match || PATH_REGEX.match(url)) && !data_url_match
+
+          # Is not a remote URL.
+          if url_match && !data_url_match
+            host = url_match[2]
+            result = LOCAL_HOSTNAMES.include?(host)
+          end
+
+          !!result
+        end
+      end
+    end
+  end
+end

data/lib/percy/capybara/loaders/sprockets_loader.rb

@@ -0,0 +1,50 @@
+require 'percy/capybara/loaders/base_loader'
+require 'digest'
+require 'uri'
+
+module Percy
+  module Capybara
+    module Loaders
+      # Resource loader that loads assets via Sprockets (ie. the Rails asset pipeline).
+      class SprocketsLoader < BaseLoader
+        attr_reader :page
+        attr_reader :sprockets_environment
+        attr_reader :sprockets_options
+
+        def initialize(options = {})
+          @sprockets_environment = options[:sprockets_environment]
+          @sprockets_options = options[:sprockets_options]
+          super
+        end
+
+        def snapshot_resources
+          # When loading via Sprockets, all other resources are associated to the build, so the only
+          # snapshot resource to upload is the root HTML.
+          [root_html_resource]
+        end
+
+        def build_resources
+          # Re-implement the same technique that "rake assets:precompile" uses to generate the
+          # list of asset paths to include in compiled assets. https://goo.gl/sy2R4z
+          # We can't just use environment.each_logical_path without any filters, because then
+          # we will attempt to compile assets before they're rendered (such as _mixins.css).
+          precompile_list = sprockets_options.precompile
+          logical_paths = sprockets_environment.each_logical_path(*precompile_list).to_a
+          logical_paths += precompile_list.flatten.select do |filename|
+            Pathname.new(filename).absolute? if filename.is_a?(String)
+          end
+
+          resources = []
+          logical_paths.each do |logical_path|
+            content = sprockets_environment.find_asset(logical_path).to_s
+            sha = Digest::SHA256.hexdigest(content)
+            resource_url = URI.escape("/assets/#{logical_path}")
+            resources << Percy::Client::Resource.new(
+              resource_url, sha: sha, content: content)
+          end
+          resources
+        end
+      end
+    end
+  end
+end

data/lib/percy/capybara/rspec.rb

@@ -0,0 +1,5 @@
+require 'rspec/core'
+
+RSpec.configure do |config|
+  config.after(:suite) { Percy::Capybara.finalize_build }
+end

data/lib/percy/capybara/version.rb

@@ -1,5 +1,5 @@
 module Percy
   module Capybara
-    VERSION = '0.3.0'
+    VERSION = '0.4.0'
   end
 end

data/percy-capybara.gemspec

@@ -24,8 +24,9 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rake', '~> 10.0'
   spec.add_development_dependency 'rspec', '~> 3.2'
   spec.add_development_dependency 'capybara', '~> 2.4'
-  spec.add_development_dependency 'capybara-webkit', '~> 1.5'
+  spec.add_development_dependency 'capybara-webkit', '>= 1.6'
   spec.add_development_dependency 'selenium-webdriver'
   spec.add_development_dependency 'webmock', '~> 1'
   spec.add_development_dependency 'faraday', '>= 0.8'
+  spec.add_development_dependency 'sprockets', '>= 3.2.0'
 end

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

@@ -5,7 +5,7 @@ RSpec.describe Percy::Capybara::Client::Builds do
     it 'returns the current build or creates a new one' do
       mock_double = double('build')
       expect(capybara_client.client).to receive(:create_build)
-        .with(capybara_client.client.config.repo)
+        .with(capybara_client.client.config.repo, {})
         .and_return(mock_double)
         .once
 
@@ -15,6 +15,55 @@ RSpec.describe Percy::Capybara::Client::Builds do
       expect(current_build).to eq(mock_double)
     end
   end
+  describe '#upload_missing_build_resources', type: :feature, js: true do
+    before(:each) { setup_sprockets(capybara_client) }
+
+    it 'returns 0 if there are no missing build resources to upload' do
+      mock_response = {
+        'data' => {
+          'id' => '123',
+          'type' => 'builds',
+        },
+      }
+      stub_request(:post, 'https://percy.io/api/v1/repos/percy/percy-capybara/builds/')
+        .to_return(status: 201, body: mock_response.to_json)
+
+      loader = capybara_client.initialize_loader
+      expect(capybara_client.upload_missing_build_resources(loader.build_resources)).to eq(0)
+    end
+    it 'uploads missing resources and returns the number uploaded' do
+      visit '/'
+      loader = capybara_client.initialize_loader(page: page)
+
+      mock_response = {
+        'data' => {
+          'id' => '123',
+          'type' => 'builds',
+          'relationships' => {
+            'self' => "/api/v1/snapshots/123",
+            'missing-resources' => {
+              'data' => [
+                {
+                  'type' => 'resources',
+                  'id' => loader.build_resources.first.sha,
+                },
+              ],
+            },
+          },
+        },
+      }
+      # Stub create build.
+      stub_request(:post, 'https://percy.io/api/v1/repos/percy/percy-capybara/builds/')
+        .to_return(status: 201, body: mock_response.to_json)
+      capybara_client.initialize_build
+
+      # Stub resource upload.
+      stub_request(:post, "https://percy.io/api/v1/builds/123/resources/")
+        .to_return(status: 201, body: {success: true}.to_json)
+      result = capybara_client.upload_missing_build_resources(loader.build_resources)
+      expect(result).to eq(1)
+    end
+  end
   describe '#build_initialized?' do
     it 'is false before a build is initialized and true afterward' do
       expect(capybara_client.client).to receive(:create_build).and_return(double('build'))

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

@@ -1,232 +1,42 @@
 require 'json'
 require 'digest'
+require 'capybara'
+require 'capybara/webkit'
 
 RSpec.describe Percy::Capybara::Client::Snapshots, type: :feature do
   let(:capybara_client) { Percy::Capybara::Client.new(enabled: true) }
 
-  # 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/client/testdata/ -p 9090
-  before(:all) do
-    port = get_random_open_port
-    Capybara.app_host = "http://localhost:#{port}"
-    Capybara.run_server = false
-
-    # Note: using this form of popen to keep stdout and stderr silent and captured.
-    dir = File.expand_path('../testdata/', __FILE__)
-    @process = IO.popen([
-      'ruby', '-run', '-e', 'httpd', dir, '-p', port.to_s, err: [:child, :out]
-    ].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, js: true) 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 '#_should_include_url?' do
-    it 'returns true for valid, local URLs' do
-      expect(capybara_client._should_include_url?('http://localhost/')).to eq(true)
-      expect(capybara_client._should_include_url?('http://localhost:123/')).to eq(true)
-      expect(capybara_client._should_include_url?('http://localhost/foo')).to eq(true)
-      expect(capybara_client._should_include_url?('http://localhost:123/foo')).to eq(true)
-      expect(capybara_client._should_include_url?('http://localhost/foo/test.html')).to eq(true)
-      expect(capybara_client._should_include_url?('http://127.0.0.1/')).to eq(true)
-      expect(capybara_client._should_include_url?('http://127.0.0.1:123/')).to eq(true)
-      expect(capybara_client._should_include_url?('http://127.0.0.1/foo')).to eq(true)
-      expect(capybara_client._should_include_url?('http://127.0.0.1:123/foo')).to eq(true)
-      expect(capybara_client._should_include_url?('http://127.0.0.1/foo/test.html')).to eq(true)
-      expect(capybara_client._should_include_url?('http://0.0.0.0/foo/test.html')).to eq(true)
-      # Also works for paths:
-      expect(capybara_client._should_include_url?('/')).to eq(true)
-      expect(capybara_client._should_include_url?('/foo')).to eq(true)
-      expect(capybara_client._should_include_url?('/foo/test.png')).to eq(true)
-    end
-    it 'returns false for invalid URLs' do
-      expect(capybara_client._should_include_url?('')).to eq(false)
-      expect(capybara_client._should_include_url?('http://local host/foo')).to eq(false)
-      expect(capybara_client._should_include_url?('bad-url/')).to eq(false)
-      expect(capybara_client._should_include_url?('bad-url/foo/test.html')).to eq(false)
-    end
-    it 'returns false for data URLs' do
-      expect(capybara_client._should_include_url?('data:image/gif;base64,R0')).to eq(false)
-    end
-    it 'returns false for remote URLs' do
-      expect(capybara_client._should_include_url?('http://foo/')).to eq(false)
-      expect(capybara_client._should_include_url?('http://example.com/')).to eq(false)
-      expect(capybara_client._should_include_url?('http://example.com/foo')).to eq(false)
-      expect(capybara_client._should_include_url?('https://example.com/foo')).to eq(false)
-    end
-  end
-  describe '#_get_root_html_resource', type: :feature, js: true do
-    it 'includes the root DOM HTML' do
-      visit '/'
-      resource = capybara_client.send(:_get_root_html_resource, page)
-
-      expect(resource.is_root).to be_truthy
-      expect(resource.mimetype).to eq('text/html')
-      expect(resource.resource_url).to match(/http:\/\/localhost:\d+\//)
-      expect(resource.content).to include('Hello World!')
-      expect(resource.sha).to eq(Digest::SHA256.hexdigest(resource.content))
-    end
-  end
-  describe '#_get_css_resources', type: :feature, js: true do
-    it 'includes all linked and imported stylesheets' do
-      visit '/test-css.html'
-      resources = capybara_client.send(:_get_css_resources, page)
-
-      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 = 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 = 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 = 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 = 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 = 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))
-
-      expect(resources.length).to eq(6)
-      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:\/\/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:\/\/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:\/\/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)
-
-      resource_urls = resources.collect(&:resource_url).map do |url|
-        url.gsub(/localhost:\d+/, 'localhost')
-      end
-      expect(resource_urls).to match_array([
-        "http://localhost/images/img-relative.png",
-        "http://localhost/images/img-relative-to-root.png",
-        "http://localhost/images/percy.svg",
-        "http://localhost/images/srcset-base.png",
-        "http://localhost/images/srcset-first.png",
-        "http://localhost/images/srcset-second.png",
-        "http://localhost/images/bg-relative.png",
-        "http://localhost/images/bg-relative-to-root.png",
-        "http://localhost/images/bg-stacked.png"
-      ])
-      expect(resources.collect(&:is_root).uniq).to match_array([nil])
-    end
-  end
   describe '#snapshot', type: :feature, js: true do
     context 'simple page with no resources' do
-      let(:content) { '<html><body>Hello World!</body><head></head></html>' }
+      before(:each) { setup_sprockets(capybara_client) }
 
-      it 'creates a snapshot and uploads missing resource' do
+      it 'creates a snapshot and uploads missing build resources and missing snapshot resources' do
         visit '/'
+        loader = capybara_client.initialize_loader(page: page)
+
+        build_resource_sha = loader.build_resources.first.sha
+        snapshot_resource_sha = loader.snapshot_resources.first.sha
 
         mock_response = {
           'data' => {
             'id' => '123',
             'type' => 'builds',
+            'relationships' => {
+              'self' => "/api/v1/snapshots/123",
+              'missing-resources' => {
+                'data' => [
+                  {
+                    'type' => 'resources',
+                    'id' => build_resource_sha,
+                  },
+                ],
+              },
+            },
           },
         }
         stub_request(:post, 'https://percy.io/api/v1/repos/percy/percy-capybara/builds/')
           .to_return(status: 201, body: mock_response.to_json)
 
-        resource = capybara_client.send(:_get_root_html_resource, page)
         mock_response = {
           'data' => {
             'id' => '256',
@@ -237,7 +47,7 @@ RSpec.describe Percy::Capybara::Client::Snapshots, type: :feature do
                 'data' => [
                   {
                     'type' => 'resources',
-                    'id' => resource.sha,
+                    'id' => snapshot_resource_sha,
                   },
                 ],
               },
@@ -246,20 +56,21 @@ RSpec.describe Percy::Capybara::Client::Snapshots, type: :feature do
         }
         stub_request(:post, 'https://percy.io/api/v1/builds/123/snapshots/')
           .to_return(status: 201, body: mock_response.to_json)
-
+        build_resource_stub = stub_request(:post, "https://percy.io/api/v1/builds/123/resources/")
+          .with(body: /#{build_resource_sha}/)
+          .to_return(status: 201, body: {success: true}.to_json)
         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
-
+          .with(body: /#{snapshot_resource_sha}/)
+          .to_return(status: 201, body: {success: true}.to_json)
         stub_request(:post, "https://percy.io/api/v1/snapshots/256/finalize")
           .to_return(status: 200, body: '{"success":true}')
 
+        expect(capybara_client.build_initialized?).to eq(false)
+        expect(capybara_client.snapshot(page)).to eq(true)
+        expect(capybara_client.build_initialized?).to eq(true)
+
+        # Second time, no build resources are uploaded.
+        remove_request_stub(build_resource_stub)
         expect(capybara_client.snapshot(page)).to eq(true)
       end
     end