Cloudinary Blog

MythBusters, Part 1: “Automated UI Tests Are Unstable”

Alexey Kagansky
By Alexey Kagansky
MythBusters, Part 1: “Automated UI Tests Are Unstable”

Even though most people agree that testing software UI is important, many believe that automated tests are slow and unstable. Consequently, many technology companies prefer manual testing. I'll convince you otherwise in this post: even though automating UI tests and ensuring that they are fast and reliable is tough to accomplish, it’s definitely doable.

Construction of Reliable Selectors

I once asked a friend why his company didn't automate UI testing. He replied, “Because the tests break easily. For example, if an engineer changes something in the DOM, it causes errors in the tests.”

However, that issue is solvable. For example, a popular question among automation engineers is which selectors are the best. The common answer is id or class, rather than XPath, which could fail. Let me bust this myth and explain how to render automation frameworks reliable.

Choosing id for selectors has a caveat: the value must be unique for the document, which means that it doesn’t work in the case of multiple identical UI components, such as the <input> element. As a resolution, our automation group at Cloudinary opted to identify locators with an attribute called data-test by leveraging standard data-* attributes. Instead of just picking the least risky attribute that exists, we added data-test to the application code. Not only do searches for the web element then become stable, developers are also free to change IDs and class names.

Additionally, as a rule, front-end developers add logic or styling with IDs or classes. Leveraging a unique attribute creates a convention that distinctly separates development and QA, leading to transparency and clarity.

Here’s another example:

metadata class name

Class names don’t work here because the styling libraries, which handle scoping, automatically generate the classes. Hence, classes are not a reliable source, and the component is not unique in the DOM.

However, adding the automation attribute data-test to the component leaves the UI intact, enabling QA engineers to build a stable and consistent selector.

Class name

Some of you wondered about the performance of having data attributes act as selectors. Assuringly, the lookup time between class and data attributes is usually the same.

Summary

To recap, if planned and executed correctly, E2E UI tests can be sound, efficient, and flexible. Front-end developers will be at liberty to tweak the DOM with no need for the QA automation team to make corresponding adjustments, saving time for everyone. Bottom line: this process makes it easier to look for the right selector.

Part 2 of this series will bust another myth: “Automating E2E is time-consuming.” Stay tuned.

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more