{"id":24593,"date":"2020-11-20T01:53:50","date_gmt":"2020-11-20T01:53:50","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=24593"},"modified":"2024-11-07T18:48:53","modified_gmt":"2024-11-07T23:48:53","slug":"many-uses-of-visual-testing","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/many-uses-of-visual-testing\/","title":{"rendered":"The Many Uses of Visual Testing"},"content":{"rendered":"\n

Often times, when we’re talking about tools to help us with testing, specifically automation tools, we hear a lot of preaching about not misusing these tools.<\/p>\n\n\n\n

For example, people often ask how to use Selenium WebDriver\u2014which is a browser automation tool\u2014to do API testing. This clearly isn’t the right tool for the job.<\/p>\n\n\n\n

While I most certainly agree that using the wrong tool for the job is not really efficient, I can also appreciate creative uses of tools for other means. <\/p>\n\n\n\n

People “misuse” tools every day to meet their needs and end up realizing that while this specific tool was not designed for a particular use case, it actually works extremely well!<\/p>\n\n\n\n

For example, here is a clothes hanger. It is obviously designed to hang clothing.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

But necessity is the mother of innovation. So when you lock yourself out of your car, this tool all of a sudden has a new use!<\/p>\n\n\n

\n
\"\"
Hangers can be used to unlock car doors<\/figcaption><\/figure><\/div>\n\n\n

Coca-cola was actually created as a medicine but after the manufacturing company was purchased, they began selling Coca-cola as a soft drink. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

As if that wasn’t enough of a repurpose, coke can also be used to clean corrosion from batteries! (I should probably stop drinking this ?)<\/p>\n\n\n

\n
\"\"\/
Coca-cola can be used to clean batteries<\/figcaption><\/figure><\/div>\n\n\n

So as we see, misusing a tool isn’t always<\/em> bad. Some tools can be used for more than their intended purpose.<\/p>\n\n\n\n

As engineers, most of us are curious and creative. This is a recipe for innovation!<\/p>\n\n\n\n

Visual Testing<\/h2>\n\n\n\n

I’m working with automated visual testing a lot these days. It’s an approach that uses UI snapshots to allow you to verify that your application looks the way it’s supposed to.<\/p>\n\n\n\n

Applitools does this by taking a screenshot of your application when you first write your test and then comparing that screenshot with how the UI looks during regression runs. It is intended to find cosmetic bugs that could negatively impact your customer’s experience. It’s designed to find visual bugs<\/a> that otherwise cannot be discovered by functional testing tools that query the DOM.<\/p>\n\n\n\n

Take a look at a few examples of visual bugs:<\/p>\n\n\n\n

\"\"\/
Credit card prompt shows unaligned labels making it confusing for users<\/figcaption><\/figure>\n\n\n\n
\"\"\/
Sponsored Instagram post shows garbled, unreadable text and no image<\/figcaption><\/figure>\n\n\n\n

While Applitools is second to none in finding cosmetic issues that may be costly for companies, I began to wonder how I could misuse this tool for good. I explored some of the hard problems in test automation to see if I can utilize the Applitools Eyes API to solve those as well! <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Increase Coverage<\/h2>\n\n\n\n

Let’s look at a common e-commerce scenario where I want to test the flow of buying this nice dress. I select the color, size, and quantity. Then I add it to the cart and head over to the cart to verify.<\/p>\n\n\n\n