How to Report Bugs during Visual Regression Testing
By Priyanka Bhat & Ganesh Hegde, Community Contributors - July 26, 2022
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
- 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
- Ensure at least one Percy Project is available
- Ensure you have installed Slack App on your device (Recommended)
- 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