UI Testing Checklist: Everything You Need

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.

UI testing vs functional 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.

Why functional tests can't catch UI bugs?

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.

UI testing complete checklist

1. Basic Application Functionality

• 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

2. UI Compatibility Across Platforms

• 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

3. UI Compatibility Across Screen Sizes

• 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

4. Performance & Scalability

• 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

5. Mobile App Accessibility

• 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

6. Geolocation Testing

• 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

7. Color Checks

• 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

8. Typography Errors

• 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

9. Navigation Speed

• 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

10. Image Alignment

• 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