Percy Anywhere is a simple wrapper that allows you to easily integrate Percy's visual tests with any
localhost server or remote web app server.
poltergeistgem, which requires PhantomJs to be installed.
- A directory of compiled asset files.
- A local or remote server running the app.
You can simply install the required gems globally:
$ gem install percy-capybara $ gem install poltergeist
Add the following to your
source 'https://rubygems.org' gem 'poltergeist'# Requires PhantomJs to be installed. gem 'percy-capybara'
$ bundle install
Percy Anywhere does not require Rails or any test framework like RSpec. It simply uses the Capybara library and a small Ruby script you write to control a web app.
Let's create a file called
require'percy/capybara/anywhere' ENV['PERCY_DEBUG'] = '1'# Enable debugging output.# Configuration. server = 'http://localhost:8080' assets_dir = File.expand_path('../dist/assets/', __FILE__) assets_base_url = '/' Percy::Capybara::Anywhere.run(server, assets_dir, assets_base_url) do|page| page.visit('/') Percy::Capybara.snapshot(page, name:'homepage') end
serveris a URL pointing to the local or remote host, such as
assets_diris an absolute path to a directory of compiled static assets. These can be compiled by any asset pipeline tool, such as Webpack/Broccoli.js/etc.
assets_base_url(optional): the path where your webserver hosts compiled assets, such as
$ ruby snapshots.rb
If you used the Bundler installation method, run:
$ bundle exec ruby snapshots.rb
Done! 🚀 Each time the script is run, Percy snapshots are taken and uploaded for rendering and processing. The script will output a link to the build to view any visual diffs.
This script can be expanded with any complex behavior that interacts with the page. You can use all of the available Capybara actions to interact with the page.
Clicking on a button
page.visit('/') page.click_button('New Project') Percy::Capybara.snapshot(page, name:'homepage - new project modal')
Clicking on an element by selector
page.visit('/about') page.find('#locations').click Percy::Capybara.snapshot(page, name: 'about page - locations')
See the Capybara docs for many more interactions, best practices, and usage examples.
See Best Practices .
You can use Percy responsive visual diffs to test pages at different CSS breakpoints.
Simply set the breakpoint configuration:
Percy.config.default_widths = [375, 1280]
With the above configuration, all snapshots will render at both mobile and desktop breakpoints by default.
You can also override widths per-snapshot:
Percy::Capybara.snapshot(page, name: 'homepage', widths: [375, 1280])
If you're testing components instead of full pages, you may also want to set the
minimum_height argument to override the default of 1024px. Note that
minimum_height sets the default viewport height and the resulting screenshot may still be be larger if the page's content height is larger.
Percy::Capybara.snapshot(page, name: 'homepage', minimum_height: 300)
A working example of this setup can be found here: https://github.com/percy/example-percy-anywhere
Updated almost 5 years ago