Comparing two URLs to each other
Covered in this doc
How to customize the base build selection to compare two URLs
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
production builds. We will also be using the PercyScript SDK as an example, but this applies for any Percy SDK.
Setting up the baseline
production, we will need to first run a build on
production. When starting a build you will set
$ 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_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.
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.
Updated about 3 years ago