Skip to main content
QA Testing for No-Code & AI-Built Websites·Lesson 3 of 5

Mobile & Cross-Browser Testing

Mobile traffic accounts for more than 60% of web visits globally. For most no-code and AI-built sites targeting consumers, mobile is the primary experience. Yet it's the most commonly untested one.

Why DevTools Isn't Enough

Browser DevTools has a device emulation mode. It's useful, but it's not the same as testing on a real device. Here's what it misses:

  • Touch interactions — tap targets that are too small, swipe gestures, long-press menus
  • Safari rendering — Chrome's DevTools emulates screen size but uses Chrome's rendering engine. Safari on iOS uses WebKit, which renders CSS differently
  • Real network conditions — testing on your desk Wi-Fi doesn't simulate a mobile user on 4G
  • Real performance — a mid-range Android phone is much slower than your laptop

Always test on at least one real iPhone and one real Android device before calling a site done.

Setting Up a Test Device Lab

You don't need a room full of devices. Start with two:

  • An iPhone running Safari (Safari on iOS is the hardest browser to pass)
  • A mid-range Android running Chrome (this represents the majority of Android users)

If you don't own both, use BrowserStack or Sauce Labs — they let you test on hundreds of real devices in a browser window.

What to Test on Mobile

Go through the entire site on mobile and check:

Navigation:

  • Does the hamburger menu open and close?
  • Do all menu links work?
  • Is the logo tappable and does it go home?

Layout:

  • Does any text overflow its container?
  • Are there any horizontal scroll bars that shouldn't be there?
  • Do images scale correctly?
  • Is there enough spacing around tap targets (minimum 44×44px)?

Forms:

  • Does the keyboard appear when tapping a form field?
  • Does the correct keyboard type appear (email keyboard for email fields, numeric for phone numbers)?
  • Can you see the form fields when the keyboard is open, or does it cover them?
  • Does form submission work?

Interactions:

  • Do hover effects interfere with touch? (Hover states should not be persistent on touch devices)
  • Do modals and overlays close correctly?
  • Does scrolling work smoothly inside scrollable containers?

Cross-Browser Testing

The three browsers that matter most:

Chrome (Chromium): Most used browser globally. If it works in Chrome, it probably works in other Chromium-based browsers (Edge, Brave, Opera).

Safari (WebKit): Second most common. Especially important on iOS — all iOS browsers use WebKit under the hood, including Chrome for iPhone. Safari has the strictest CSS support and the most frequent rendering differences.

Firefox (Gecko): Third most common. Firefox has its own rendering quirks, particularly around flexbox, grid, and some CSS animations.

The most common cross-browser bugs:

  • CSS gap in flexbox (older Safari versions don't support it)
  • backdrop-filter (not supported in all Firefox versions)
  • Custom fonts loading differently
  • Form element styling that browsers override with their own defaults
  • JavaScript APIs not yet available in Safari

A Simple Cross-Browser Testing Process

  1. Complete your full test on Chrome first
  2. Open the site in Firefox — do a visual sweep of every page, interact with every form
  3. Open the site in Safari on desktop — pay attention to fonts, colours, and form styling
  4. Test on a real iPhone in Safari — this is where most bugs unique to Safari surface
  5. Test on a real Android in Chrome — check touch interactions and performance

This process takes 20-30 minutes per site and catches the majority of cross-browser issues.