Comparing two URLs to each other

Learn how to compare two URLs in Percy

It’s not uncommon for teams to want to compare two different URLs to make sure changes aren’t present. You can achieve this with Percy, but it will take a little bit of customization of the Percy base build selection logic.

If you’re not familiar with how Percy’s base build selection works, it might be worth reading through that document first. The high level of the process is Percy uses git to facilitate how the base build is selected. Approvals do not impact the base build selection. The two variables we will care about for this recipe are:

• PERCY_BRANCH - The current branch name
• PERCY_TARGET_BRANCH - The branch you would like to compare to

To compare two URLs to each other, we need to create two builds (one for each URL). Make sure the snapshot names do not contain the URL of the page you’re snapshotting, otherwise this will not work.

How the URL is changed between the two Percy builds is up to you (since each SDK/test setup is very different). Most commonly, teams use an environment variable to switch the URL that’s being tested.

Throughout this example, I will use production as the baseline and will compare staging to production builds. We will also be using the PercyScript SDK as an example, but this applies for any Percy SDK.

Setting up the baseline

To compare staging to production, we will need to first run a build on production. When starting a build you will set PERCY_BRANCH to production:

$ PERCY_BRANCH=production percy exec -- node snapshots.js

This will create a new Percy build on the branch “production”. Once that build is 100% finished processing in Percy, we can move onto comparing staging to it.

Comparing to the baseline

Now that we have our baseline set on the production branch, we can switch the URL in our tests and run another Percy build vs the staging site. When starting this build we’re going to set both PERCY_BRANCH and now PERCY_TARGET_BRANCH:

$ PERCY_BRANCH=staging PERCY_TARGET_BRANCH=production percy exec -- node snapshots.js

This should create a new build on the “staging” branch and use the latest Percy build on the “production” branch as a baseline.

Wrapping up

You should now have your staging site comparing to your production site in Percy! If you’re still having issues getting this setup, feel free to reach out to support.