Detect visual changes

Visual testing requires the tester to consider how the application looks in addition to how it works. Often times, the UI of an application can pass a functional test, while design elements that are visually defective can go under the radar.

Visual testing is a form of regression test that ensures that screens that were correct have not changed unexpectedly.

In order to achieve stable tests, we don’t compare screenshots but element attributes like position (x and y coordinates) or dimension (width and height). Of course, we save the baseline attributes for every combination of browser, screen resolution or device and compare it with previous runs for the same combination.

Enable visual testing with Trudon

You don’t have to create dedicated tests for this. You can use it for any Trudon test.

Every action or expectation that has an element (identifiable using a CSS selector) automatically saves the element attributes all test runs. However, to actually detect the visual changes, you have to explicitly configure it when running a test (or a test suite) or when configuring a smart run. In the configuration tab, there is a checkbox that has to be selected.

Of course, when you first execute it for a new browser/resolution/device combination, it won’t compare it, as there is no baseline to compare it. However, for any additional test run, there is a baseline and it is going to compare the current values with the baseline.

If a test successfully passes all the expectations but has a UI change, it won’t fail the test. It only flags it as ui changed.

Further configurations

By default, when you run a test with the visual testing enabled, it compares all the attributes for all the elements that are used in your tests. If you want to disable it for some elements, or only to compare some attributes for some of them, you have to manually configure it. Go to the edit test page and configure the attributes you want to compare for every single element.

Tracking baselines

Changing the steps of your tests (or changing your website itself) can cause changes in the UI and you will be able to see them in your test results and get alerted if properly configured. Pay attention that a UI change doesn’t make the test to fail, it only marks it as ui changed.

To make your baselines configuration easier, we automatically update the baseline for you every time we have a passing test run. So you don’t have to accept a new baseline every time something changes in your application. Just make sure your tests are passing and we do the hard work for you.