Enhance Visual Testing CI Pipelines with Cypress Image Diff GitHub App

KienHT — Wed, 14 Aug 2024 16:19:37 +0000

In the realm of continuous integration (CI), ensuring that your application maintains visual consistency is as crucial as functional accuracy. cypress-image-diff has just launched their Github app, making it a CI/CD game-changer for developers and QA engineers. This article explores how this GitHub app can streamline your visual testing process and provides a step-by-step guide on getting started.

Cypress Image Diff has gained significant traction in the open-source community over the past few years, becoming one of the most popular and widely downloaded visual regression tools for Cypress.

What is Cypress Image Diff Github app?

Cypress Image Diff GitHub App integrates with Github CI pipelines and utilizes CircleCI pipelines to produce test artifacts, providing visual testing for Cypress, ensuring pixel-perfect UIs by comparing screenshots and highlighting discrepancies. As the first open-source GitHub App for Cypress visual regression testing, it offers detailed HTML reports and seamless GitHub CI/CD integration, making it a crucial tool for UI testing.

🚀 Key Features:

One-click Approval: Directly commit baseline changes within your CI environment.
Detailed HTML Reporting: Gain in-depth insights into visual differences with extensive HTML reports that showcase discrepancies clearly.
Free Of Charge: Very first open-source project in visual regression test for Cypress that integrates with Github CI pipelines.

Quick Start Guide

Getting started with Cypress Image Diff Github app is straightforward. Follow these steps to integrate it into your project:

1. Create a Cypress Image Diff Account

Visit Cypress Image Diff.
Click “Sign up with GitHub” and authorize the application.

2. Link Your GitHub Repositories

After signing up, you will be redirected to the projects page or visit it here.
Click “Link GitHub repositories” and select the repositories where you want to install the app.

3. Set Up CircleCI

Log in or create a CircleCI account here. > Note: Only the login/register with email option is supported.
Create a new project and link it to your GitHub repository.
Configure your .circleci/config.yml file as follows. If you don’t have one, create it. If you already have a configuration file, append the workflow:

  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
            command: npm run test
        - store_artifacts:
            path: cypress-image-diff-screenshots
        - store_artifacts:
            path: cypress-image-diff-html-report

  workflows:
    version: 2
    cypress-image-diff:
      jobs:
        - visual-test

Commit and push the updated configuration to your GitHub repository.

4. Share CircleCI Project Token with Cypress Image Diff

Navigate to your CircleCI project settings.
Select “API Permissions” and create a new token with readonly scope.
Copy this token, then go to the Cypress Image Diff projects page, locate your project, access the settings, and save this token.

5. Start Pushing Commits

Push a commit to your repository. You will see commit statuses for both CircleCI and Cypress Image Diff.
Once the Cypress Image Diff pipeline completes, click the “Details” link to view the detailed visual report.

Why You Should Use Cypress Image Diff Github app

From a developer’s perspective, integrating Cypress Image Diff Github app into your CI pipeline offers several benefits:

Simplifies the process for developers by running tests within CI pipelines, eliminating the need to run them locally to view changes.
Enhances team collaboration by allowing team members to review and approve pull requests without needing to run tests locally.

If you’re looking to boost your visual testing strategy, Cypress Image Diff Github app is a must-try. Its ease of setup and powerful features make it an invaluable tool for modern CI workflows.

Feel free to share your experiences or ask questions about the app in the comments below!

📚Learn more about Cypress Image Diff Github app

Forem: KienHT