In the world of software quality assurance (QA), few topics generate more debate (and confusion) than GUI testing: the subtle but crucial distinction between feature testing and GUI (Graphical User Interface) testing.
What exactly does it mean to test a graphical user interface? Is it about verifying features, checking layout, or both?
In this article, I’ll share insights from years of experience helping teams around the world improve their automated GUI testing using tools like Squish. Along the way, we’ll look at how to close the gap between functional testing and visual testing, and why that matters for your users and your product.
The Many Faces of GUI Testing
What is GUI Testing
I've been fortunate to work with teams across the globe, helping them enhance their test automation efforts, especially in GUI testing, with tools like Squish. One of the first things I noticed is that “GUI testing” means different things to different people.
For most QA engineers, GUI testing primarily refers to verifying that features accessed through the interface behave as expected. It's about simulating user actions: clicking buttons, entering text, and confirming outcomes. But this focus on function often leads us to neglect another important dimension: form, meaning how the application actually looks and feels to the user.
“It’s almost the irony of GUI testing: we often don’t test the GUI itself, we test the features behind it.”
And this matters because end users don’t just interact with features, they experience your application visually. Misaligned buttons, overlapping text, or inconsistent layouts can undermine user trust, even when functionality is intact.
Real-World Example: The Alpaca Tracker App
To illustrate this, let me introduce the fictional but relatable Alpaca Tracker application. It allows users to register their alpacas, monitor them via cameras, and receive daily updates. We developed GUI tests to ensure that alpaca registration works properly. A simple Gherkin scenario for this might look like:
Given the Alpaca Tracker is running
When the user opens the registration dialog
And enters an alpaca name and clicks register
Then the new alpaca appears in the list
It turned out that while the registration still worked, the layout of the registration dialog had broken. Buttons overlapped or were misplaced. For new users, this might be confusing; for experienced users, it felt “off”—enough to question whether we tested the application at all.
When Green Tests Aren’t Enough
Here’s the catch: our automated tests passed because they checked the functionality but not the visual correctness of the interface. As long as elements were accessible and features worked, our tests were green. But users don't just care about functionality—they care about appearance, usability, and polish.
“Our scenario was still passing, but the users were still seeing bugs. That’s not necessarily a contradiction. It’s a gap in what we choose to verify.”
These kinds of layout bugs may not be catastrophic, but they erode user trust.
Understanding the Gap: Feature vs. GUI vs. Layout Testing
At the heart of this issue is a gap between:
-
Feature Testing: Does the function work as intended?
-
GUI Testing: Does the application work via the graphical interface?
-
Layout/Visual Testing: Does the application look right?
Most teams focus heavily on the first two and overlook the third because layout can change frequently, and visual tests are often seen as brittle, time-consuming, and hard to maintain.
“Layout testing is crucial, and it’s overlooked very often.”
But if we don’t test layouts at all, we leave ourselves vulnerable to bugs that hurt the user experience.
Three Approaches to Visual Testing
To help fill this gap without overwhelming your team, here are three approaches you can use:
Extend Existing Test Steps (Hidden Visual Checks)
|
Add Explicit Visual Checks to Functional Tests
|
Create Dedicated Visual Test Scenarios (Recommended)
|
Enhance the steps in your current GUI tests to include hidden layout verifications
|
Make visual verifications explicit by adding them as visible steps in your existing test scenarios. |
Separate layout checks into their own dedicated test scenarios that focus purely on appearance, not functionality. |
| ✅ Pros: No need to write new tests. ❌ Cons: Verifications are hidden; test reports get cluttered; risk of redundant checks. |
✅ Pros: Clear and readable test cases; on-demand verifications. ❌ Cons: Mixing concerns: functional and visual bugs may block each other. |
✅ Pros: Single responsibility; clear reporting; easy to maintain.
|
This third approach helps maintain a clean separation between what the application does and how it looks, making your testing strategy more robust.
Tools and Techniques for Visual Verifications
With tools like Squish, you have several ways to implement these visual checks:
-
Image Verification Points: Quick PNG comparisons (best for stable visuals).
-
Screenshot Verification Points: Flexible area masking to avoid false positives.
-
Visual Verification Points: Deep object-level checks including structure, properties, and visuals.
For even more complex cases like text truncation issues (especially in multi-language applications), you can integrate OCR (Optical Character Recognition) to ensure that labels and text fields render correctly without being cut off or obscured.
Why This Matters
Some might argue that visual glitches aren’t critical, and in many cases, that’s true. After all, major applications like Chrome, Windows, and Outlook have all shipped with UI bugs, and they’re still around. But in high-stakes environments, like healthcare, aviation, or financial systems, a misleading or broken UI can have real-world consequences.
“If I were undergoing a serious surgery, I wouldn’t want the software monitoring my vital signs to display them in the wrong place or cover them with a misplaced button.”
At the end of the day, trust matters. And trust is built not only through functional reliability but also through polished, user-friendly interfaces.
Key Takeaways
-
GUI testing often focuses more on features than the interface itself.
-
Visual and layout testing is frequently overlooked but crucial for user trust.
-
Combining functional and visual testing strategies can close the gap.
-
Using dedicated visual test cases is a practical and effective approach.
Let’s make sure we test what matters, both function and form, because sometimes, how the application looks is just as important as how it behaves.
-
Whether you're just starting out with GUI automation or refining a mature testing strategy, Squish provides the flexibility and depth needed to bridge the gap between functional correctness and visual precision.
Learn how you can always ensure your application works, looks and feels right.
Watch the full keynote to see how QA teams can close the gap between functional and visual testing.
Get practical guidance on improving test coverage and maintaining UI quality without adding unnecessary complexity.
