percy / percy-capybara

Visual testing for Capybara with Percy.

percy-capybara

Percy visual testing for Ruby Selenium.

Installation

npm install @percy/cli:

$ npm install --save-dev @percy/cli

gem install percy-capybara package:

$ gem install percy-capybara

Usage

In your test setup file, require percy/capybara. For example if you're using rspec, you would add the following to your spec_helper.rb file:

require 'percy/capybara'

Now you can use page.percy_snapshot to capture snapshots.

Note: you may need to add js: true to your specs, depending on your driver setup

describe 'my feature, type: :feature do
  it 'renders the page' do
    visit 'https://example.com'
    page.percy_snapshot('Capybara snapshot')
  end
end

Running the test above normally will result in the following log:

[percy] Percy is not running, disabling snapshots

When running with percy exec, and your project's PERCY_TOKEN, a new Percy build will be created and snapshots will be uploaded to your project.

$ export PERCY_TOKEN=[your-project-token]
$ percy exec -- [test command]
[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Snapshot taken "Capybara example"
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Configuration

page.snapshot(name[, options])

• name (required) - The snapshot name; must be unique to each snapshot
• options - See per-snapshot configuration options

Upgrading

Automatically with @percy/migrate

We built a tool to help automate migrating to the new CLI toolchain! Migrating can be done by running the following commands and following the prompts:

$ npx @percy/migrate
? Are you currently using percy-capybara? Yes
? Install @percy/cli (required to run percy)? Yes
? Migrate Percy config file? Yes
? Upgrade SDK to percy-capybara@^5.0.0? Yes
? The Capybara API has breaking changes, automatically convert to the new API? Yes

This will automatically run the changes described below for you, with the exception of changing the require.

Manually

Require change

The name of the require has changed from require 'percy' to require 'percy/capybara'. This is to avoid conflict with our Ruby Selenium SDK's require statement.

API change

The previous version of this SDK had the following function signature:

Percy.snapshot(driver, name, options)

v5.x of this SDK has a significant change to the API. There no longer is a stand alone module to call and you no longer need to pass the page/driver. It's available on the current Capybara session (page):

page.percy_snapshot(name, options)

If you were using this SDK outside of Capybara, you'll likely find the Ruby Selenium SDK a better fit

Installing @percy/cli & removing @percy/agent

If you're coming from a 4.x version of this package, make sure to install @percy/cli after upgrading to retain any existing scripts that reference the Percy CLI command. You will also want to uninstall @percy/agent, as it's been replaced by @percy/cli.

$ npm uninstall @percy/agent
$ npm install --save-dev @percy/cli

Migrating config

If you have a previous Percy configuration file, migrate it to the newest version with the config:migrate command:

$ percy config:migrate

percy-capybara's Issues

Sprockets 4 support

SprocketsLoader needs to support Sprockets 4, which changes the how we grab _asset_logical_paths:
https://gist.github.com/jeremy/89ef4d0b569a85e6d493aeafdf85b261

Percy should support uploading assets from public/

Currently if you reference assets that are located in public/ the Percy client doesn't upload anything at all. It seems this is caused because the client only supports external resources or assets served up by Sprockets. It'd be nice if the Sprockets loader supported assets located and referenced in public/.

Styles not rendering in the screenshots

Hi,

I am having trouble with the screenshots not showing the styles. The command I'm running is yarn run percy exec -- ./bin/rails test:system. I have tried it both in CI on Github Actions, and locally on macOS. Screenshots using the take_screenshot rails method works correctly.

I am not sure what information I give to help, but:

• I am using firefox headless
• I am using Rails 6.0.2.1
• Styles are compiled from scss using webpacker.

What other information would be helpful?

Thank you in advance for your help.

Issues with Apparition driver in 4.3.x

We just did consecutive builds with 4.3.0 and 4.3.1. The 4.3.1 build had every CI job end with this output:

[percy] stopping percy...
--
  | [percy] waiting for 0 snapshots to complete...
  | [percy] done.

Breaking change moving to Percy-Capybara v4

With <v4, Percy worked with remote Selenium endpoints. We don't drive a local Chrome/FF browser but instead a remote one.

Now, Percy based on the agent expects a local Chrome and chromedriver to do snapshotting.

Is there anyway to upgrade without adding a local Chrome to our CI containers?

Is #137 building towards something like this?

What is the preferred way to define/use custom loaders?

We want to use Bedorck with Percy::Anywhere. However, the :filesystem loader is loading too many resources.

---

Currenly code that doesn't allow custom loader:

percy-capybara/lib/percy/capybara/anywhere.rb

Line 25 in 5865d54

Percy::Capybara.use_loader(:filesystem, assets_dir: assets_dir, base_url: assets_base_url)

percy-capybara/lib/percy/capybara/client.rb

Lines 84 to 123 in 5865d54

	def initialize_loader(options = {})
	merged_options = loader_options.merge(options)
	is_sprockets = sprockets_environment && sprockets_options
	if is_sprockets
	merged_options[:sprockets_environment] = sprockets_environment
	merged_options[:sprockets_options] = sprockets_options
	end
	if loader
	case loader
	when :filesystem
	Percy.logger.debug { 'Using filesystem_loader to discover assets.' }
	Percy::Capybara::Loaders::FilesystemLoader.new(merged_options)
	when :native
	Percy.logger.debug { 'Using native_loader to discover assets (slow).' }
	Percy::Capybara::Loaders::NativeLoader.new(merged_options)
	when :ember_cli_rails
	Percy.logger.debug { 'Using ember_cli_rails_loader to discover assets.' }
	mounted_apps = merged_options.delete(:mounted_apps)
	Percy::Capybara::Loaders::EmberCliRailsLoader.new(mounted_apps, merged_options)
	else
	Percy.logger.debug { 'Using a custom loader to discover assets.' }
	loader.new(merged_options)
	end
	elsif is_sprockets
	Percy.logger.debug { 'Using sprockets_loader to discover assets.' }
	Percy::Capybara::Loaders::SprocketsLoader.new(merged_options)
	else
	unless @warned_about_native_loader
	Percy.logger.warn \
	'[DEPRECATED] The native_loader is deprecated and will be opt-in in a future ' \
	'release. You should move to the faster, more reliable filesystem_loader. See the ' \
	'docs for Non-Rails frameworks: https://percy.io/docs/clients/ruby/capybara '
	@warned_about_native_loader = true
	end
	Percy.logger.debug { 'Using native_loader to discover assets (slower).' }
	Percy::Capybara::Loaders::NativeLoader.new(merged_options)
	end

---

Here is my current workaorund - monkey patch the :filesystem loader:

module Percy
  module Capybara
    module Loaders
      class FilesystemLoader < BaseLoader
        SKIP_RESOURCE_EXTENSIONS = [
          '.gz', # Ignore gzipped files.
          '.htm',
          '.html',
          '.json',
          '.lock',
          '.log',
          '.map', # Ignore source maps.
          '.md',
          '.php',
          '.phtml',
          '.rar',
          '.rb',
          '.sql',
          '.txt',
          '.xml',
          '.zip',
        ].freeze

        SKIP_RESOURCE_BASENAMES = [
          '.DS_Store',
          '.editorconfig',
          '.eslintrc.js',
          '.gitignore',
        ].freeze

        RESOURCE_PATHS = [
          '/app/themes',
          '/app/plugins',
          '/app/mu-plugins',
          '/app/uploads',
          '/wp',
        ].freeze

        SKIP_RESOURCE_PATHS = [
          '/.cache-loader/',
          '/.cache/',
          '/.caches/',
          '/.git/',
          '/build/',
          '/cache/',
          '/caches/',
          '/doc/',
          '/docs/',
          '/log/',
          '/logs/',
          '/node_modules/',
          '/tmp/',
          '/vendor/',
          '/wp/wp-content/themes/',
          'resources/assets',
        ].freeze

        def _resources_from_dir(root_dir, base_url: '/')
          resources = []

          RESOURCE_PATHS.each do |resource_path|
            _find_files(root_dir + resource_path).each do |path|
              next if SKIP_RESOURCE_EXTENSIONS.include?(File.extname(path))
              next if SKIP_RESOURCE_BASENAMES.include?(File.basename(path))

              next if SKIP_RESOURCE_PATHS.any? { |skip| path.include?(skip) }

              # Skip large files, these are hopefully downloads and not used in page rendering.
              next if File.size(path) > MAX_FILESIZE_BYTES

              # Replace the assets_dir with the base_url to generate the resource_url
              resource_url = _uri_join(base_url, path.sub(root_dir.to_s, ''))

              sha = Digest::SHA256.hexdigest(File.read(path))

              resources << Percy::Client::Resource.new(resource_url, sha: sha, path: path)
            end
          end

          resources
        end
      end
    end
  end
end

---

What is the preferred way to define/use custom loaders?

The goal is to:

• publish my custom loader as a gem
• add the custom loader before invoking Percy::Capybara::Anywhere.run

my_loader = MyLoader.new(some_options)
# Maybe another method
Percy::Capybara.use_loader(my_loader)

Percy::Capybara::Anywhere.run(xxx, yyy, zzz)  do|page|
  #...
end

How to ignore certain asset files?

Is it possible to ignore certain files under my project's assets directory? There are some cache files as well as other things in there, and they don't need to be uploaded (they're in a dot folder.

Alternatively I'll make a directory specifically for Percy that only contains the appropriate assets but I just wanted to check before I go down that road.

Images missing in snapshots even though webserver logs indicate they are being loaded

We on the ampproject/amphtml team use Percy for visual diff testing. We're having trouble with the Percy / Capybara / Phantomjs stack, where webpage images are missing in all our visual diff snapshots. However, the webserver logs indicate that the images are being loaded, even though they don't appear in the screenshots.

I've added waits between loading the page and taking the snapshot, but this doesn't seem to make any difference.

More details can be found in ampproject/amphtml#10156, including webserver logs interspersed with percy / capybara logs. I'd appreciate any help in getting to the bottom of this.

Thanks!

Calling Percy.snapshot without a javascript driver silently does nothing

I wasted some time trying to figure out why my test wasn't generating any snapshots - it was because my test was using the rack-test driver instead of a selenium driver (I was missing the js: true rspec tag).

It'd be nice to detect when the test is using the rack-test driver and either log a warning or raise an exception. In general I think if a call is made to Percy.snapshot that does not result in a snapshot, we should always log a warning or raise an exception (this might not be easy / might have to occur during the "finalization" stage - I don't know if the agent work is async).

uninitialized constant Percy

Following docs here https://percy.io/docs/capybara I got this error

uninitialized constant Percy (NameError)

Solution is to require percy gem in spec_helper in :

require 'percy'
require 'percy/capybara'
require 'percy/capybara/rspec'

I think when we require percy/capybara/rspec it should require percy too

curl shellout is not escaped properly

The url variable is not properly escaped when calling curl in httpfetcher.

percy-capybara/lib/percy/capybara/httpfetcher.rb

Line 21 in 19d40ec

output = `curl --insecure -v -o #{temppath} "#{url}" 2>&1`

It should use shellescape to prevent breaking on spaces etc.

Using Percy snaps in view tests

I am trying to figure out if its possible to use Percy snaps in view tests. As Capybara works to a certain degree in there, I'd imagine Percy would as well.

I use Capybara::Node::Simple.new(rendered) for page and pass it as well to Percy. But I get current_url method missing. Looking into Percy source code I can't find the instance where this is being called to understand the reason.

Node version requirement

It's not mentioned at all in the documentation that node v12+ is required now.

Node v10.24.0 is not supported. Percy only supports the current LTS of Node. Please upgrade to Node v12+

Warning being seen from Faraday due to unexpected middleware

This started recently, presumably due to faraday receiving a version bump.

WARNING: Unexpected middleware set after the adapter. This won't be supported from Faraday 1.0.

See

percy-capybara/percy-capybara.gemspec

Line 31 in 68a6dc2

spec.add_development_dependency 'faraday', '>= 0.8'

Feature request: local hostnames configurable for the native loader

I'm currently using powder to separate some locally running apps into their own domains. This seems to break Percy's ability to recognize that they're being run locally, and causes the CSS upload to err. Manually adding each powder domain to the LOCAL_HOSTNAMES list in native_loader.rb seems to resolve the issue, but having a more robust configuration option would be preferable. I'd be happy to do a PR for this, but I wanted to make sure that it was an architectural change that the maintainers would want.

Support compressed responses

Percy::Capybara::HttpFetcher::Response#fetch breaks when the response is compressed. This is seen on requests for assets hosted on Google App Engine (which serves assets gzipped when fetched via curl).

broken snapshots dealing with DOM changes & responsiveness

Hello all

if you head to https://sortforyou.com you will find the site to be very responsive

percy is resizing something but my app cannot pick up on what percy is doing, can someone help as to why the snapshots are giving us weird photos of our website. is there a wait supposed to happen in between
https://percy.io/WindsorEmpire/website/builds/3999456

Per-snapshot widths not respected in 5.0.0.pre.4

Hello Percy team,

We tried to upgrade to 5.0.0.pre.4 today, but all of our mobile-only snapshots were rendering with our default width. Here's our config file (I removed the Percy CSS since it's noisy and shouldn't be relevant):

---
version: 2

snapshot:
  widths:
    - 1370

discovery:
  network-idle-timeout: 250
  disable-cache: true

We added a logging statement to check our options before we took the snapshot (so one line above the snapshot call itself) in our CI process:

Options: {:name=>"mobile: Sign-in - en", :widths=>[411]}
--
[percy] Snapshot taken: mobile: Sign-in - en

All 20 of our mobile snapshots were taken at 1370px width instead of 411px despite this call (we have a helper method that sets up mobile options, so it's the same call everywhere). Can you help us figure out what's happening?

Canvas elements appear empty

In one of our apps, we are using Chart.js for rendering charts, but they appear empty. I couldn't find any information in the docs, if I need to do something special to get them to work.

I can confirm that the JavaScript is running, because all other components are rendering correctly except the chart.

Disabling JS Errors from erroring tests

Running into this error when running Percy Anywhere:

home/circleci/project/vendor/cache/ruby/2.3.0/gems/poltergeist-1.17.0/lib/capybara/poltergeist/browser.rb:384:in `command': One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details). (Capybara::Poltergeist::JavascriptError)

ReferenceError: Can't find variable: Intl
ReferenceError: Can't find variable: Intl
    at http://localhost/visual-regression/?_website=:83 in global code
ReferenceError: Can't find variable: Promise
ReferenceError: Can't find variable: Promise
    at http://localhost/pb/resources/scripts/arcads.js?_=1bda7:1 in initializeBiddingServices
    at http://localhost/pb/resources/scripts/arcads.js?_=1bda7:1 in e
	from /home/circleci/project/vendor/cache/ruby/2.3.0/gems/poltergeist-1.17.0/lib/capybara/poltergeist/browser.rb:39:in `visit'
	from /home/circleci/project/vendor/cache/ruby/2.3.0/gems/poltergeist-1.17.0/lib/capybara/poltergeist/driver.rb:99:in `visit'
	from /home/circleci/project/vendor/cache/ruby/2.3.0/gems/capybara-2.18.0/lib/capybara/session.rb:274:in `visit'
	from snapshots.rb:17:in `block in <main>'
	from /home/circleci/project/vendor/cache/ruby/2.3.0/gems/percy-capybara-3.1.2/lib/percy/capybara/anywhere.rb:28:in `run'
	from snapshots.rb:15:in `<main>'
Exited with code 1

I believe this is being triggered by some JavaScript errors that are on the page when Percy is run from a couple of vendor integrations that don't impact the page layout. I see that in the error log there's a way to turn off these errors using js_errors: false but I can't seem to figure out how to actually turn them off.

Here's my attempt:

Percy::Capybara::Anywhere.run(server, assets_dir, assets_base_url) do |page|
  page.visit('/visual-regression/?_website=')
  Percy::Capybara.snapshot(page, name: 'Kitchen Sink', js_errors: false)

end

Global Configuration

Is there a way to apply a global Percy configuration when using this package? For example, a Percy CSS string. The readme only references per-snapshot configuration.

«percy/healthcheck» does not return «x-percy-core-version»

Migrated to new CLI https://docs.percy.io/docs/capybara#waiting-for-elements-with-capybara
After running Percy gives a message : [percy] You may be using @percy/agent which is no longer supported by this SDK. Please uninstall @percy/agent and install @percy/cli instead. https://docs.percy.io/docs/migrating-to-percy-cli

Error for duplicate snapshot name when retrying test

We have automatic retries for our feature specs since they are complex and intermittently fail for various reasons. These specs can fail after an incorrect snapshot is already sent and when we retry the spec and send the snapshot again we get:

[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request"},{"source":{"pointer":"/data/attributes/base"},"detail":"The name of each snapshot must be unique, and this name already exists in the build: 'order flow allows a PAO ticket to be bought: completed departure date picker [mobile-web-browser]' -- You can fix this by passing a 'name' param when creating the snapshot. See the docs for more info on identifying snapshots for your specific client: https://percy.io/docs"}]}

This is obviously the documented behaviour.

Ideally we'd detect the wrong element selection and avoid sending the incorrect snapshot in the first place but, for reasons that would take a while to explain and are unrelated to this issue, that's not plausible.

Ideally we'd like to be able to do one of the following:

1. Delay snapshot sending until the spec has actually passed.
2. Overwrite the existing snapshot. Potentially even with a flag that indicates that overriding is allowed (which we'd only set on our retry runs).

Would you consider one of these two options? The first one can be implemented in this gem and I can write a PR. The second would likely require changes to the percy agent and to your API.

Webpacker 4

After upgrade Webpacker 4 have problem with screenshots on pages switch are using pack CSS.
Does it known issue?

Percy errors if being run from a Rails repo that does not have assets

I'm trying out Percy, and getting the following:

NoMethodError:
  undefined method `assets' for #<Rails::Application::Configuration:0x007fb11f4c51f8>
  Did you mean?  asset_host

It looks like it's coming from:

        if defined?(Rails)
          @sprockets_environment = options[:sprockets_environment] || Rails.application.assets
          @sprockets_options = options[:sprockets_options] || Rails.application.config.assets
        end

Admittedly, we've got an oddball setup right now:

1. We're using a Rails API and serving no assets from it
2. We've got a react app embedded in the repo
3. We're using capybara (in our integration specs) from the react app.

Which leaves us in the case where Rails is defined, we are using capybara, but we are do not have any Rails assets.

The following fixes it for me, simply doing a nil check should suffice.

Rails.application.config.send(:define_singleton_method, :assets) { nil } unless Rails.application.config.respond_to?(:assets)

Strip hostname, port from local URLs in native loader

When using NativeLoader, strip the protocol and host off of resource URLs if they are included in the LOCAL_HOSTNAMES.

disable javascript for a snapshot

Hi,

I am trying to take a percy snapshot of a page and want to load it w/o Javascript.

I tried:

describe 'w/o JS', :editor => true, type: :feature, js: false do
// ...
end

without success.

I also tried:

Percy::Capybara.snapshot(page, name: 'w/o JS', enable_javascript: false)

which didn't work either.
Then I had a look at

percy-capybara/spec/spec_helper.rb

Line 36 in e1c80b3

Capybara.javascript_driver = :poltergeist

which led me to teampoltergeist/poltergeist#489

I am running out of ideas on how to make this work - any hints?

5.0.0.pre.3 breaks with `have_current_path` Capybara matcher

Hello Percy team!

The 5.0.0.pre.3 release of the package causes stack too deep error in specs that use Capybara's have_current_path matcher.

Stacktrace looks like this (until it runs out of space):

Failure/Error: expect(page).to have_current_path(new_user_session_path)
--
  |  
  | SystemStackError:
  | stack level too deep
  |  
  |  
  |  
  | [Screenshot Image]: /app/tmp/screenshots/failures_r_spec_example_groups_authentication_through_google_auth_when_not_using_interims_or_clever_o_auth_when_the_user_is_not_found_by_email_redirects_to_new_user_session_path;_displaying_email_in_error_mess_102.png
  |  
  |  
  |  
  |  
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara.rb:429:in `specified_session'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara.rb:315:in `current_session'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:46:in `page'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `assert_current_path'
  | # /bundle/ruby/2.7.0/gems/capybara-3.35.3/lib/capybara/dsl.rb:53:in `call'

Dependabot couldn't find a package.json for this project

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it in the .github/dependabot.yml file in this repo.

View the update logs.

Assets missing with custom sprockets config

With this config:

config.assets.paths << Rails.root.join(
  "vendor/assets/bower_components/app-assets/dist/assets/images").to_s

Then image is then correctly referenced like:

image_path('some-image.svg')

For some reason, the Percy resource URL ends up being:

/app-assets/dist/assets/images/some-image.svg

instead of:

/assets/images/some-image.svg

so the images are broken in percy.

We use ActionController::Base.helpers.asset_path (https://github.com/percy/percy-capybara/blob/v3.0.2/lib/percy/capybara/loaders/sprockets_loader.rb#L50) to find the asset path, perhaps it is wrong in this case?

percy-capybara 5.0.0 doesn't seem to work with cucumber

The problem

We are using percy-capybara with Cucumber instead of Rspec and it seems not to work with the new version, we get the following error after updating according to the readme:

undefined method `snapshot' for #<Capybara::Session> (NoMethodError)

It used to work with older versions.

Environment

• Node version: v12.21.0
• @percy/cli version: percy/cli@^1.0.0-beta.62
• Version of Percy SDK you’re using: 5.0.0

Details

We tried to use percy-selenium but that didnt work due to versioning issues, it requires a too high version of selenium to work. It might be that relaxing that and using that would be the right solution forward, but we think it would be nice if percy-capybara supports cucumber out of the box.

Create any simple test with cucumber to recreate the issue.

Firefox autofocus

Hey team, ever since we've upgraded to v4 of this library we're seeing a lot of mis-diffs that didn't occur before around the autofocus HTML attribute.

An input with the autofocus attribute will sometimes be focussed and sometimes not be focussed in the screenshot, causing regular false positives back and forth.

A quick search across the percy-capybara and percy-agent libraries didn't return anything around dealing with focus, any ideas?

Fully support configuration via `Percy.config.access_token`

Since 2.4.4, Percy has had protection to stop you accidentally trying to turn it on without specifying a project.

However, the protection only kicks in if you're configuring Percy using the PERCY_TOKEN environment variable, whereas wider Percy documentation (the percy-client gem) gives an alternative way to configure, using the Percy.config.access_token accessor.

percy-capybara should work identically regardless of how it was configured.

Documentation around loaders

Obviously I can read the source (and I'm about to, right after this), but it seems like a very core piece of this library is the loader, and it would be useful to have an overview of what's available, what the options are and how they work.

Thanks! Looking forward to getting snapshots working.

Enabling javascript causes images to double in height

We're using percy/capybara to generate snapshots in our visual tests for the AMP project. We recently switched from PhantomJS to Chrome / Selenium. Today, I noticed that our snapshots were missing certain portions due to the fact that JavaScript wasn't enabled on the Percy side. (The content showed up on my local machine when the page was first rendered prior to snapshotting, but was missing in the final snapshots because Percy doesn't enable JavaScript by default.)

When I repeated the snapshots with JavaScript enabled (using Percy::Capybara.snapshot(page, name: name, enable_javascript: true)), I noticed that the mere act of enabling JavaScript is causing all our image assets to double in height in the snapshots. (They appear normal when rendered locally, prior to snapshotting.) This is mysterious behavior and I'm not sure what we can do to prevent this. See the snapshots in https://percy.io/ampproject/amphtml/builds/538714 for example. The baselines do not have JavaScript enabled, while the new snapshots do.

FYI, here is how we are setting up Capybara to use Chrome instead of PhantomJS.

Left: with JS, Right: without JS

Background images specified as inline styles not working in rack test

Hi there!

It looks like background images specified as inline styles only work for javascript-enabled drivers

https://github.com/percy/percy-capybara/blob/master/lib/percy/capybara/loaders/native_loader.rb#L119-L123

This is a half-baked suggestion, but how about something along these lines to support rack-test?

page
  .all('[style]')
  .select { |el| el['style'] && el['style'].include?('background') }
  .map { |el| parse_url(el['style']) }

def parse_url(style_attribute)
  # do some regexing or something
end

Any thoughts?

Support for iFrames

Hello!

We are attempting to upgrade to the latest percy agent in order to solve percy/react-percy#5 (comment) (we need to render React w/ styled components) which will work except that the percy-capybara gem doesn't seem to support capturing the content of iFrames. Pretty sure we're running into the same issue as #67 (comment) and we can in fact render the iFrame snapshot from within_frame, but then we can't see both the frames together (and we'd have to change a lot of test code that is currently working, albeit with a very old patched version).

I wanted to make sure it was the same issue so I made a (somewhat) minimal test case, which I've added here in case it is useful:

# frozen_string_literal: true

require "rack"
require "capybara/dsl"
require "selenium-webdriver"
require "percy"

layout = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: blue;">
  <p>Body Content</p>
  <iframe src="/frame" style="width: 500px; height: 500px;" id="frame"></iframe>
</body>
</html>
HTML

form = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: red;">
  <form method="POST">
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
HTML

result = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: green;">
  <p>Frame Submitted</p>
</body>
</html>
HTML

chrome_bin = ENV.fetch("GOOGLE_CHROME_BIN", nil)
options = {}
options[:args] = %W( headless disable-gpu no-sandbox window-size=1980,1060} )
options[:binary] = chrome_bin if chrome_bin

Capybara.register_driver :selenium_chrome_headless do |app|
  Capybara::Selenium::Driver.new \
    app,
    browser: :chrome,
    options: Selenium::WebDriver::Chrome::Options.new(options)
end

Capybara.javascript_driver = :selenium_chrome_headless
Capybara.default_driver = Capybara.javascript_driver

Capybara.app =  Rack::Session::Cookie.new(
  ->(env) {
    r = Rack::Request.new env
    session = env["rack.session"]

    case r.path_info
    when "/frame"
      if session["authenticated"] == "1"
        if r.post?
          content = result
        else
          content = form
        end
      else
        content = "Authentication Required"
      end
    when "/"
      session["authenticated"] = "1"
      content = layout
    end

    [200, {"Content-Type" => "text/html"}, [content]]
  }
)

include Capybara::DSL
visit "/"
page.within_frame "frame" do
  click_on "Submit"
  puts "Frame submitted? #{page.has_content?("Frame Submitted")}"
end
Percy.snapshot "Body With Frame"

In the test case above what we would like to see in the checkpoint is the same content we see in the test at that point ("Frame Submitted"), what we end up seeing is:

percy-agent version: 0.20.12
percy-capybara version: 4.0.2

Any guidance here, even if it's "we're not going to support iFrames" (I believe we may be the only people in the world still using them 😅 ) would be helpful so we can decide what to do. Thanks!

PercyAgent not defined

I'm seeing some intermittent issues when using selenium / headless chrome / percy-capybara / rspec / CircleCI. Error output:

[percy] Snapshotting failed. Note that Poltergeist and Rake::Test are no longer supported by percy-capybara. Error: javascript error: PercyAgent is not defined

We are running via npx percy exec -- rspec

Any idea how this might happen, or how to better track down the root issue? It's pretty consistently one particular spec.