Your website or mobile app is a 24/7 storefront. UI testing ensures your audience sees the best version of your business at all times. Done right, it establishes a solid sense of professionalism that eventually translates into better user experience and, of course, revenue.
Here's a detailed checklist of all the items you need when performing UI testing.
Functional testing asks: “Does it work?”
UI testing asks: “Does it look right?”
Functional testing validates behaviors: button clicks, form submissions, data flows. It checks whether your app responds correctly to user input and business logic.
UI testing validates perception: Layouts, colors, spacing, image placement. These are the subtle cues users rely on to feel confident in your brand. And while your app might function just fine, one broken layout or off-brand font can instantly erode trust.
In other words, UI testing catches what functional testing can’t.
Here’s the catch: most traditional tests don’t actually see your UI.
Even if you have 100% code coverage with unit and functional tests, none of them are checking how your app looks after a change. They won’t catch a misaligned button, a missing image, or text that overlaps on smaller screens.
And when changes are merged quickly (think: CSS tweaks, layout refactors, font upgrades), visual bugs can creep in without breaking a single test. That’s how regressions slip past QA unnoticed until a real user complains.
UI testing focuses specifically on the visual part of the website. It actually complements what functional testing lacks.
Ensure all pages and screens load without console or network errors
Validate working state of core functionality (logins, modals, form submissions)
Test touch/click responsiveness across buttons, icons, and links
Verify biometric authentication (Face ID, Touch ID) triggers appropriately
Validate state retention: local storage, session data, cookies
Confirm form validation triggers with appropriate error messaging
Test on native Android (latest stable and one version prior)
Test on native iOS (latest stable and one version prior)
Test on hybrid/webview contexts if applicable
Verify platform-specific UI elements (e.g., bottom sheets, back gestures)
Validate that fonts, borders, and icons render correctly on all Operating Systems
📚 Read More: Cross-browser Testing: A Complete Guide
Test responsiveness on popular screen resolutions:
Mobile: iPhone SE, iPhone 15 Pro Max, Pixel 7, Samsung Galaxy S22
Tablet: iPad Air, Galaxy Tab
Desktop: 1366x768, 1440x900, 1920x1080, 2560x1440
Confirm layout consistency in both portrait and landscape orientations
Check that modals, sidebars, and sliders behave as expected
Ensure elements don’t clip, overflow, or disappear on narrow screens
Validate breakpoints for grid and flex layouts
Measure page and screen load times
Test UI under different network conditions (3G, 4G, offline)
Use lazy loading for images and components below the fold
Confirm app behavior under high traffic or simulated load
Test install/uninstall cycles on mobile
Monitor memory and CPU impact during extended use
📚 Read More: Performance Testing vs. Load Testing
Ensure screen reader compatibility (VoiceOver, TalkBack)
Check that all UI elements are keyboard-navigable
Validate focus outlines and tab sequence for inputs and controls
Confirm legibility: font size, text scaling support
Check contrast ratios meet WCAG 2.1 AA compliance
Test accessibility shortcuts and alternate text on all elements
📚 Read More: Accessibility Testing: A Complete Guide
Simulate locations from different regions using a VPN or tool
Test language and currency display updates by region
Validate region-specific banners, features, or T&Cs
Ensure geolocation permissions are requested gracefully
Simulate time zone shifts and verify correct date/time display
Verify all brand color codes (hex/RGB) match design system
Test hover, focus, and active states have clear color distinctions
Check hyperlink color differentiates visited/unvisited states
Simulate colorblindness modes (protanopia, deuteranopia)
Validate consistency in dark mode or high-contrast themes
Confirm font family, size, and weight per design spec
Check for consistent line height, spacing, and kerning
Review text wrapping and truncation on all screen sizes
Validate heading hierarchy and consistent formatting
Ensure upper/lowercase usage is grammatically correct
Check for spelling and grammar issues throughout the UI
Confirm header and side navigation loads within 1–3 seconds
Test lazy loading for menus and infinite scroll elements
Validate menu responsiveness under low network speeds
Measure First Contentful Paint (FCP) and Largest Contentful Paint (LCP)
Ensure no janky transitions during navigation
Ensure banner, hero, and slider images are properly sized and centered
Validate icons are sharp and correctly positioned at all DPIs
Confirm image carousels are touch and click responsive
Check alt tags for accessibility compliance
Validate fallback image behavior when loading fails
Confirm images are optimized for file size and format