Skip to main content

Visual testing

Visual testing is the process of comparing the UI of an application with the results expected by design or with the previous state of the application. Automated visual testing tools like Argos allow for the monitoring of the UI of an application on multiple browsers and screen sizes.

With Argos, you can easily detect and fix visual regressions in your web applications. The process is simple:

  1. Capture screenshots: Use the Argos CLI to capture screenshots of your application in various browsers and screen sizes.
  2. Compare screenshots: Argos will automatically compare the captured screenshots with a reference set, and notify you of any visual changes.
  3. Review changes: Review the visual changes in the Argos application, and either approve or reject the changes.

Change Detection

Once installation is complete, Argos will receive screenshots of your application when you create a pull request or merge a commit to the repository's reference branch.

Argos will notify you directly on your GitHub pull request by adding a status check. If no changes are detected, the status is ✅ Pass, and you can confidently merge your pull request.

If changes are detected, the status is ❌ Fail. In this case, you must review your visual changes.

GitHub commit status

Click on the "Details" link to review the visual changes.

Reviewing Visual Changes

The visual change review takes place in the Argos application.

Example build

Navigate through the screenshot diffs by clicking on the sidebar, the navigation buttons, or using your keyboard.

Tip: Press ? to show all available keyboard shortcuts.

The side-by-side UI is designed to quickly spot visual changes and verify that screenshots match their expected results.

👎 Reject a build workflow

If you spot a visual bug or if a screenshot doesn't meet your expectations, click on the "Review Changes" button and select "Reject Changes". The build status will become "Changes Rejected" and GitHub will be notified of the rejection.

After rejecting the change, you should commit a new version to fix it.

👍 Approving a Build

When screenshots match the expected results, click on the "Review Changes" button and select 🟢 "Approve Changes". The build status will become 🔴 "Changes Approved" and GitHub will be notified of the approval.

Once the changes are accepted, you can confidently merge your pull request.

FAQ

How do I update the screenshot comparison baseline?

Argos updates the comparison baseline screenshots when a commit is merged into the repository's reference branch.

What is a reference branch?

The reference branch is used as the baseline for the screenshots comparisons. Argos automatically uses the GitHub default branch as the reference branch. You can choose another reference branch in Argos repository settings.

How to update the reference branch?

You can choose another reference branch in Argos repository settings.

What is an orphan build?

An orphan build is the first one performed on a reference branch. It won't show any comparison. The screenshots of this build will be considered as the baseline for the following comparisons.

What is a reference build?

A reference build is created when a commit is merged on the reference branch. Its screenshots will be used as the baseline for following comparisons performed on other branches.