Bedrock + Percy.io Visual Testing within 10 lines of code

Catch visual bugs before they’re released to your customers

https://percy.io/visual-testing

Prepare

  1. Get a percy.io account
  2. Install system requirements
  3. Install the percy-capybara-bedrock gem
    $ cd /path/to/bedrock
    $ bundle add percy-capybara-bedrock
    

Define your tests

# <bedrock>/percy.rb
require "percy/capybara/bedrock/anywhere"

# URL pointing to the local or remote host
server = "http://localhost:8080"

# Absolute path to a web root directory
web_root = File.expand_path("../web/", __FILE__)

# Path where your webserver hosts the WordPress site
assets_base_url = "/"

Percy::Capybara::Bedrock::Anywhere.run(server, web_root, assets_base_url) do|page|
  page.visit("/")
  sleep(2)
  Percy::Capybara.snapshot(page, name:"Homepage")
end

More examples at https://github.com/ItinerisLtd/percy-capybara-bedrock#usage

Make sure your Bedrock site is up and running

Easilest way to make it runs at http://localhost:8080:

$ cd /path/to/bedrock
$ wp server --docroot=web

Run the tests

$ cd /path/to/bedrock
$ PERCY_TOKEN=my-secret-token PERCY_BRANCH=local PERCY_DEBUG=1 bundle exec ruby percy.rb

Challenge

If you have a simpler / more elegant solution, we are hiring.

Alt text

8 Likes

Anyone tried this with trellis + bedrock + sage setup?

I do.
Just run $ yarn build:production before starting the server.

Ah great,

  1. Where/how did you place your percy settings files? I placed my in the top dir. percy, site, trellis

  2. Do you see any issues with this setup?

# &lt;bedrock&gt;/percy.rb

require "percy/capybara/bedrock/anywhere"

# URL pointing to the local or remote host

server = "http://my-site.test"

# Absolute path to a web root directory

web_root = File.expand_path("../../site/web", __FILE__)

# Path where your webserver hosts the WordPress site

assets_base_url = ""

# Capybara.register_driver :poltergeist do |app|

# Capybara::Poltergeist::Driver.new(app, {js_errors: false})

# end

Percy::Capybara::Bedrock::Anywhere.run(server, web_root, assets_base_url) do|page|

page.visit("/")

sleep(3)

Percy::Capybara.snapshot(page, name:"Homepage")

end

As long as web_root is pointing to the correct folder, where to put percy.rb and Gemfile (or gems.rb) doesn’t matter.
It’s up to you to organize your code.

This topic was automatically closed after 42 days. New replies are no longer allowed.