A GitHub App for Cypress Image Diff
Your go-to solution for visual testing with Cypress. Ensure pixel-perfect UIs with its seamless integration and extensive HTML reporting. Plus, enjoy effortless GitHub CI/CD integration, making UI testing a breeze.
Key Features:
- Effortlessly commit baseline changes directly within the CI environment.
- Extensive HTML reporting provides detailed insights into visual differences.
- Seamless GitHub CI/CD integration streamlines the testing workflow.
For now, we leverage CircleCI pipeline power to run tests. Don't panic if you don't have a CircleCI account yet, just create a free one and you're good to go. The CircleCI pipeline is just a means to get the test artifacts anyway.
- Visit: https://cypress-image-diff.netlify.app/
- Click "Sign up with GitHub".
- Grant authorization to our app.
- After successful sign-up, you should be redirected to the projects page. Or visit the projects page here.
- Click "Link GitHub repositories".
- Select the repositories where you want to install our GitHub app.
- Log in to your CircleCI account. If you don't have an account yet, create one here.
Note: Only choose login/register with email option. Based on our own observation, CircleCI generates different artifact url patterns for different authentication methods, and we can only support login/register with email option.
- Create a new project and link the associated GitHub repository.
- Replace the content of your
.circleci/config.yml
with the default setup below. If you don't have a.circleci/config.yml
file, create one. If you already have a configuration file, append this workflow to the end of your current YAML file. Ensure to update the configuration below with your actual values:
version: 2
jobs:
visual-test:
docker:
- image: cypress/base:latest
working_directory: .
steps:
- checkout
- run:
name: Install Dependencies and Required Libraries
command: |
npm install
apt-get update && apt-get install -y \
libgtk2.0-0 \
libgtk-3-0 \
libgbm-dev \
libnotify-dev \
libnss3 \
libxss1 \
libasound2 \
libxtst6 \
xauth \
xvfb
- run:
name: Run Tests
# replace with your actual test command
command: npm run test
- store_artifacts:
# replace with your actual folder path if you have a custom one
path: cypress-image-diff-screenshots
- store_artifacts:
# replace with your actual folder path if you have a custom one
path: cypress-image-diff-html-report
workflows:
version: 2
cypress-image-diff:
jobs:
# job name should NOT be modified
- visual-test
- Commit and push this new config file to your github repo.
- In the CircleCI application, select the project you just created. You can find your projects under the Projects tab.
- Click on the gear icon (⚙️) located on the top-right corner to open the project settings.
- In the project settings menu, find and select API Permissions.
- Create a new token with the scope of readonly and a descriptive key name, for instance
CYPRESS_IMAGE_DIFF
. - Copy this token value, go to Cypress Image Diff projects page, look for the associated project, click settings, add a new secret with the same key and value, and hit Save.
- Push any commit to your repository. You will see two commit statuses created for your commit: one for the CircleCI pipeline and one for Cypress Image Diff.
- Wait until the Cypress Image Diff pipeline has finished, then click the "Details" link to view the Cypress Image Diff report.