Announcing Percy’s GitHub Actions

We’re always looking for ways to make it easier for developers to get started with visual testing. That’s why we’re thrilled to release our new GitHub Actions on the heels of the recent general availability release.

This powerful service by GitHub combines flexible automation and workflows with CI/CD functionality to automatically build, test, and deploy your projects. It works with any GitHub event, works on any platform, language, and cloud, and is largely community-led.

Enabled by that flexibility and universality, we now support the ability to build and run Percy entirely from GitHub.

Getting started with Percy’s GitHub Actions

Looking at the GitHub Actions Marketplace listings, you’ll see Percy has three official actions that correspond to the Percy SDK you’re using.

Shoutout to @jpvalery for making his own Percy action!

• If you’re using our Storybook SDK, you’ll want to use Percy for Storybook (storybook-action).
• If you’re using our CLI for static sites, you’ll want to use Percy for Static Sites (snapshot-action).
• For all SDKs that use the percy exec command, including our PercyScript, Cypress, and Puppeteer SDKs, use Percy (exec-action).

Our GitHub Actions work in the same way as our existing support for CI/CD services to run your Percy tests when triggered by GitHub events such as pull requests.

Configuring your environment variables

To get started, you’ll need to configure PERCY_TOKEN, your project-specific, write-only API token. Copy the token from your project settings and add it to your GitHub repo secrets.

Once configured, your GitHub Action will pull your PERCY_TOKEN in from your secrets each time it runs to tell Percy where to send snapshots.

Setting up a Percy GitHub Action

Below, we’ll give an overview of getting started with exec-action, but they all work in generally the same way.

First, you’ll need to add a new step to your actions config using percy/exec-action. This acts as a wrapper around the percy exec command, so all you need to provide is the CLI command you use to launch your tests.

Here is a sample config that runs Cypress with Percy using the default setup:

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1.0.0
      - name: Install
        run: yarn
      - name: Percy Test
        uses: percy/exec-action@v0.1.2
        with:
          command: "cypress run"
        env:
          PERCY_TOKEN: $

In the above example, cypress run is the command that our Cypress SDK uses to launch your tests. When that command gets called, Percy starts up an agent to receive snapshots from your Cypress tests and sends them to your configured Percy project.

GitHub Actions, paired with our existing GitHub pull request integration, makes it easier than ever to integrate visual testing, run Percy on each commit, and get alerted of visual changes—all in one place.

To get started with Percy’s GitHub Actions, check out our GitHub Actions docs to learn more and get started with a free Percy account.

<hr><p>Announcing Percy’s GitHub Actions was originally published in Percy Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>