> For the complete documentation index, see [llms.txt](https://docs.qyrus.com/web-testing/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qyrus.com/web-testing/advanced-features/visualtesting.md).

# Visual Testing

Visual Testing compares how your application *looks* between two runs. Qyrus screenshots each step, then holds the new run's images against an earlier run's and highlights what moved, changed or disappeared.

It catches the things a functional test cannot: a button that slid off screen, text that overflowed its box, a layout that broke at one resolution.

Visual Testing is marked **Beta** in the product.

## What it cannot do

* **It compares one script at a time.** Suite runs are not supported. The run screen tells you so: "Visual Regression can only be performed at a time on a single Script."
* **It does not work on dry runs.** Use **Execute Test**.
* **It does not work on parameterized scripts**, or on scripts edited since the baseline was made.

## Step one: create a baseline

A comparison needs something to compare against. That is the **baseline script** — a run that already passed.

1. From Test Lab or a sprint, tick your script and choose **Execute** → **Execute Test**.
2. In the run configuration, pick a browser under **Select Browser**, and set **Choose screen resolution** and **Choose environment variable**.
3. Click **Run Test**.

**Write down the browser and resolution you used.** The comparison run has to match them exactly.

Once that run passes, it is your baseline.

![The baseline run in the Executions tab](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-4c9d33550caca32b29cf6a2cea667c1f011b4784%2FBaselinescript.png?alt=media)

## Step two: run the comparison

1. Select the same script again and choose **Execute** → **Execute Test**.
2. Open the **Visual Testing** tab and switch on **Enable visual testing**.

   ![The Visual Testing tab](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-d0eca557360b3d527073ce72a51123f4eb2f2baa%2Fadvanced-visual-01.png?alt=media)
3. Select the **same browser** and the **same resolution** as the baseline. If they do not match, Qyrus has nothing valid to compare and tells you there is no previous execution available.

   ![No previous execution to compare](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-de967f0b72a5c1bf1647009aab28bd4266bd9f57%2FPreviousExecutionerror.png?alt=media)
4. Choose the baseline script to compare against, then click **Run Test**.

   ![Selecting the baseline](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-91384f76ea3d8992f1b3fe99aee9631cf879cbcc%2Fselect_baseline.png?alt=media)

If you selected two browsers, Qyrus asks which one to run Visual Testing in. The other browser runs as an ordinary execution.

![Choosing the browser for the comparison](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-08b45ae8bc0e6100492fe9f47fe720e811bdee54%2Fbrowser_selection.png?alt=media)

## Reading the comparison

Visual Testing runs are marked with an eye icon in the report list. Open the run and go to its **Visual Testing** tab.

![The eye icon marking a visual run](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-7d0cadfda6b4a1cdf56e6bd969fe72d8ffc73966%2Ficon_for_VT.png?alt=media)

Every step appears as a screenshot. **A red boundary box means that step changed** since the baseline. Steps without one are unchanged.

![The step-by-step comparison](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-4901e36b71bcb41cd53a9ee80b421a5d3cd2cafe%2FVT_report.png?alt=media)

Click any screenshot with a red box to see the baseline and the current run side by side.

![Baseline against current](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-0898004f3b8e799616af11e83a1a90dfe652d9ca%2Fcomparision_of_VT.png?alt=media)

The eye icon on the current execution highlights exactly what changed, in red.

![Changes highlighted](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-784edede34bf29dfde8988b64f2907d5665e6fde%2Fchanges.png?alt=media)

Where nothing changed, the step reads **No Changes Detected**.

![No changes detected](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-1dc3b6eb9b31ad250e19e551071fc159359e6482%2FNochanges.png?alt=media)

## Assertions

Assertions check visual qualities rather than comparing two runs, so they apply to the current execution only. Pick the ones you want on the run screen before executing; the report then lets you view each one against the screenshots.

![Selecting assertions](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-805b8cfffc7fe6adec7bbcad5abdc1a08717792e%2FAssertions.png?alt=media)

| Assertion       | What it highlights                                                     |
| --------------- | ---------------------------------------------------------------------- |
| **DarkMode**    | Elements on screen when the script runs in dark mode, marked in yellow |
| **Overlapping** | Elements that overlap each other, marked in blue                       |
| **Contrast**    | Differences in screen brightness                                       |

**Submit Changes** clears all the assertions.

![Dark mode assertion](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-57c1499bdb1b29222cf8e3b2e2d352479919f714%2FDarkmode.png?alt=media)

![Overlapping elements assertion](https://239974709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FycS61vFhJMvvtnJCrDJk%2Fuploads%2Fgit-blob-654ea450f9f5c05d4a7151e8e77647525d005c61%2FOverlap.png?alt=media)

## Where to go next

| To read about                           | Go to                                                 |
| --------------------------------------- | ----------------------------------------------------- |
| Repairing broken locators automatically | [Healer AI](/web-testing/advanced-features/healer.md) |
| Reading the rest of a run report        | [Sprint Reports](/web-testing/analyze/sprints.md)     |