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

[TangRufus]

Catch visual bugs before they’re released to your customers

– All-in-one visual testing and review platform | Percy

Prepare

1. Get a percy.io account
2. Install system requirements
   • ruby 2.6.1
   • PhantomJS
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.

[jonasOST]

Anyone tried this with trellis + bedrock + sage setup?

[TangRufus]

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

[jonasOST]

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?

# <bedrock>/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

[TangRufus]

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.