What is UI testing?

01

What UI testing checks

A UI test asks two questions about a screen: does it look right, and does it do the right thing when someone uses it? On a website that covers:

• Layout: nothing overflowing, overlapping, cut off or out of place
• Content: the right text, images and links, nothing missing or broken
• Interaction: buttons, menus, tabs and links respond and go to the right place
• Forms: fields are labelled, required fields are enforced, errors are shown clearly
• Responsiveness: the layout adapts from a small phone to a wide screen
• Browsers: it works in Chrome, Safari and Firefox, not only the one you built in
• Accessibility: contrast, labels, headings and keyboard use work for everyone

02

Types of UI testing

UI testing is a family of tests, each catching a different kind of problem. Most teams combine a few.

• Manual (exploratory) testing: a person clicks through the screens and notes what is wrong
• Automated functional (end-to-end) testing: scripts in Selenium, Cypress or Playwright click through flows and check the results
• Visual testing: screenshots compared with an approved version to catch unintended changes in how pages look
• Responsive testing: the layout checked at phone, tablet and desktop widths and the sizes in between
• Cross-browser testing: the same pages checked in different browser engines, such as Safari’s WebKit
• Accessibility testing: automated rules such as axe plus keyboard and screen reader checks against WCAG
• Usability testing: real users try tasks; strictly part of UX research, but often run alongside UI tests

03

Manual vs automated UI testing

Manual testing finds the problems nobody thought to script, but it is slow and easy to skip before a deadline. Automated UI tests repeat the same checks on every change, but only check what someone wrote a test for, and scripted tests break when the interface changes. A third way is automatic checking: tools that load each page and look for known kinds of problems, such as overflow, cut-off text, small tap targets or contrast, without any scripts.

04

UI testing vs API testing

API testing checks the data and logic behind the interface by calling the server directly; it is fast and stable. UI testing checks what a person actually sees and can do. Neither replaces the other: an API can return the right data while the page shows it cut off on a phone, and a page can look perfect while the server behind it is wrong.

05

Is Selenium only for UI testing?

Selenium automates real browsers, so it is mostly used for UI and end-to-end testing of web apps, and sometimes for other browser automation. It is not built for API testing, and it does not judge how a page looks: a Selenium test passes as long as the steps work, even if the layout is broken. For that you add visual, responsive or accessibility checks.

06

How to start UI testing a website

1. 1List the pages and flows that matter: home, key landing pages, sign-up, checkout, contact
2. 2Check every page at phone, tablet and desktop sizes, in Chrome and Safari at least
3. 3Click through each key flow by hand once, including the forms and their errors
4. 4Run an accessibility check and fix contrast, labels and headings
5. 5Automate what you repeat: scripted tests for critical flows, automatic checks for layout on every release