How to Report Bugs during Visual Regression Testing

Regression testing is conducted to verify that any system changes do not interfere with existing software features. They’re part of almost every test suite as it is common for devs to add a section of code, and have it unintentionally disrupt a previously working functionality.

Visual Regression Testing applies the same logic but checks that code changes do not break any aspect of the software’s visual interface. A visual regression test or visual validation test checks what the user will see after any code changes have been executed by comparing screenshots taken before and after code changes.

Let’s consider Percy by BrowserStack as an example, which is a cloud-based visual validation tool providing features such as 

• Centralized review
• Showcasing Image diffs side by side
• Multi-browser support 
• Proprietary snapshot stabilization technology 
• Integration to Azure DevOps, Bitbucket, Gitlab, Slack, etc. 
• Seamless integration into existing CI/CD workflow

Reporting visual bugs becomes easier when we integrate Percy with Slack. With this tutorial, easily configure unlimited connections between Slack channels and Percy projects for reporting bugs during visual regression testing. You can also specify the kind of notifications you want to receive for each connection with Percy Slack integrations.

Integrating Percy with Slack for Reporting Visual Regression Bugs

Note: 

• If you are setting up a Percy Slack integration for a private channel, you will need to invite the Percy bot as a member of the channel first
• To authorize Slack, you must be both an admin of your Percy organization and have permission to your Slack workplace to install apps. Check your workspace permissions settings at https://yourdomain.slack.com/apps/manage/permissions

Pre-Requisites:

1. Ensure at least one Percy Project is available
2. Ensure you have installed Slack App on your device (Recommended)
3. Create a Channel for Percy Notifications (Optional, Recommended)

Step 1 – Navigate to Integrations Tab

• Login to Percy using your credentials
• Navigate to the Integrations Section

Step 2 – Click on Connect for Slack

Once you click on Integration you will all different types of available integration click on Slack Connect

Step 3 – Enter Slack workspace to sign in to Slack

If you have already signed into slack this step will not be shown. If you are presented with this step enter the slack workspace name.

Click on Continue

Step 4 – Enter your Slack workspace credentials

If you are presented with the Sign-in page enter the credentials and click on Sign in.

Note: If you have already signed in skip this step.

Step 5 – Choose the Slack Channel Name

As mentioned in the pre-requisite here we have already created a channel name as percy-notification

You can specify the channel name of your wish. Click Allow to Continue

Step 6 – Customize Notification

Percy allows you to customize the Notification, 

• You can choose Specific Project or All
• You can choose when to trigger notifications such as Unreviewed & Changes requested,No changes, Auto-approved, Approved
• Click on Save configuration to Continue

Step 7 – Verify Saved Integration settings

Once you click on Save Configuration, it displays configuration settings.

You will also get notifications in your Slack channel 

Step 8 – Ensure Percy Bot is added to Your Private Channel

Note: If you have already added Percy Bot to your Slack channel, Skip this step

In the Slack App, Click on the Channel Name Drop Down

Click on Integrations

Click on Add apps, Search For Percy and Click on Add

Step 9 – Trigger Sample Build to verify the notification

If you have completed all the required steps, as soon as the build finishes, you will start getting a notification.

It is difficult to monitor every build; however, Percy Slack integration provides instant notifications, which helps to activate the items as and when available. Also, the embedded link helps you navigate specific builds so that you can review, reject or approve the builds.

Percy integration is not limited to Slack. It can be integrated with many tools such as Azure DevOps, Bit Bucket, GitLab, Github, etc., making the Visual Regression testing process far easier and effortless. If you’re looking to adopt a smoother visual regression testing workflow and team task allotment, Percy is your answer.

Here’s what you can get started with: 

• 5000 screenshots/month for visual testing with Percy
• Testing on internal development environments

Get Started with Percy for Free