⚪ ️ 3.11 Detect visual issues with automated tools
:white_check_mark: Do: Setup automated tools to capture UI screenshots when changes are presented and detect visual issues like content overlapping or breaking. This ensures that not only the right data is prepared but also the user can conveniently see it. This technique is not widely adopted, our testing mindset leans toward functional tests but it’s the visuals what the user experience and with so many device types it’s very easy to overlook some nasty UI bug. Some free tools can provide the basics - generate and save screenshots for the inspection of human eyes. While this approach might be sufficient for small apps, it’s flawed as any other manual testing that demands human labor anytime something changes. On the other hand, it’s quite challenging to detect UI issues automatically due to the lack of clear definition - this is where the field of ‘Visual Regression’ chime in and solve this puzzle by comparing old UI with the latest changes and detect differences. Some OSS/free tools can provide some of this functionality (e.g. wraith, PhantomCSS but might charge significant setup time. The commercial line of tools (e.g. Applitools, Percy.io) takes is a step further by smoothing the installation and packing advanced features like management UI, alerting, smart capturing by eliminating ‘visual noise’ (e.g. ads, animations) and even root cause analysis of the DOM/CSS changes that led to the issue
❌ Otherwise: How good is a content page that display great content (100% tests passed), loads instantly but half of the content area is hidden?
✏ Code Examples
:thumbsdown: Anti-Pattern Example: A typical visual regression - right content that is served badly
:clap: Doing It Right Example: Configuring wraith to capture and compare UI snapshots
# Add as many domains as necessary. Key will act as a label
domains:
english: "http://www.mysite.com"
# Type screen widths below, here are a couple of examples
screen_widths:
- 600
- 768
- 1024
- 1280
# Type page URL paths below, here are a couple of examples
paths:
about:
path: /about
selector: '.about'
subscribe:
selector: '.subscribe'
path: /subscribe
:clap: Doing It Right Example: Using Applitools to get snapshot comparison and other advanced features
import * as todoPage from "../page-objects/todo-page";
describe("visual validation", () => {
before(() => todoPage.navigate());
beforeEach(() => cy.eyesOpen({ appName: "TAU TodoMVC" }));
afterEach(() => cy.eyesClose());
it("should look good", () => {
cy.eyesCheckWindow("empty todo list");
todoPage.addTodo("Clean room");
todoPage.addTodo("Learn javascript");
cy.eyesCheckWindow("two todos");
todoPage.toggleTodo(0);
cy.eyesCheckWindow("mark as completed");
});
});