Browser and Device Testing

Purpose

This document defines the recommended browser and device coverage for manual live testing of the Releaf prescription dashboard and order experience.

The goal is not to test every possible browser, device, or viewport. The goal is to focus manual testing effort on the environments most likely to affect real users and business-critical flows.

Manual live testing should be performed using Sauce Labs, giving the team access to real devices, real browsers, and representative viewport conditions.

Key Inputs

This strategy is based on recent analytics for releaf.co.uk, which showed:

Signal	Testing implication
Mobile accounts for ~68% of users	Mobile must be treated as the primary experience
Desktop has higher engagement	Dashboard workflows still need strong desktop coverage
iOS and Safari represent a large share of users	iPhone Safari should be Tier 1
Android traffic is fragmented	Android Chrome should be tested across common Pixel and Samsung style sizes
Some users arrive from links opened inside email or social apps	Login, redirects, checkout, and session handling should be checked carefully in those flows
Analytics show meaningful dashboard usage around 1600x900	Include 1600x900 as a representative desktop dashboard viewport in manual testing
320px width appears in analytics and is relevant for accessibility	320px should remain the minimum supported responsive width

Testing Principles

Test what users actually use
Device and browser coverage should be driven by analytics rather than generic market share.
Prioritise mobile-first validation
Most users are on mobile, so prescription flows must be manually tested on real mobile browsers.
Treat Safari as a first-class platform
Given the iOS and Safari share, Safari issues should be considered high priority.
Include Android fragmentation intentionally
Android coverage should include both Pixel-style and Samsung-style viewport sizes.
Keep the matrix focused
A smaller matrix that is actually tested is more valuable than a broad matrix that is skipped.
Use Sauce Labs for real-device confidence
Sauce Labs should be used for live testing where real browser and device behaviour matters, especially mobile Safari and Android Chrome.

Recommended Live Testing Matrix

Priority 1: Test Every Release

These environments should be included in the standard release test pass.

Priority	Device / Browser	Viewport / Device	Why it matters	What to focus on
P1	iPhone Safari	390x844	Represents the main modern iPhone experience	Prescription order flow, forms, sticky CTAs, keyboard behaviour, Safari layout quirks
P1	Android Chrome / Pixel-style device	384x832	Represents a major Android viewport family	Prescription order flow, mobile navigation, forms, checkout and upload behaviour
P1	Windows Chrome	1600x900	Representative desktop dashboard viewport for manual testing	Dashboard prescription flow, tables, modals, dense layouts
P1	Responsive minimum width	320px width	Accessibility and small-screen support floor	No horizontal scroll, readable content, usable forms and buttons

Priority 2: Test for Major Releases or High-Risk Changes

These should be tested for larger releases, layout-heavy changes, checkout and auth changes, or major dashboard updates.

Priority	Device / Browser	Viewport / Device	Why it matters	What to focus on
P2	iPhone Pro Max Safari	430x932	Common large iPhone viewport	Large-phone layout, sticky footer spacing, safe areas, bottom navigation
P2	Samsung Chrome	360x800	Common Samsung and Android mid-range size	Android fragmentation, touch targets, keyboard behaviour
P2	iPhone SE / older iPhone Safari	375x667	Smaller iPhone height and width catches cramped layouts	CTA visibility, form spacing, modals, small-height issues
P2	iPhone links opened from email or social apps	Links opened inside apps rather than standalone Safari	Login, redirects, checkout, back button, session continuity	Validate in-app browser behaviour and cross-app transitions
P2	Android links opened from email or social apps	Links opened inside apps rather than standalone Chrome	Login, redirects, file upload, checkout, session continuity	Validate in-app browser behaviour and cross-app transitions
P2	Windows Edge	1600x900	Enterprise and Windows browser coverage	Dashboard sanity check, forms, layout consistency

Priority 3: Periodic Coverage

These are useful but should not block every release unless the change is relevant to that platform.

Priority	Device / Browser	Viewport / Device	Why it matters	What to focus on
P3	macOS Safari	1440x900	Desktop Safari and WebKit coverage	Desktop Safari sanity check, layout differences
P3	iPad Safari	768-1024px	Tablet coverage	Tablet layout, dashboard usability, navigation
P3	Firefox Desktop	1440x900 or 1600x900	Alternative rendering engine	General rendering sanity, forms, layout
P3	Android large device	412x915 or 440x956	Larger Android screens	Large mobile layout, navigation, sticky CTAs

Viewport Guidance

Core Viewports

Viewport	Role
320px width	Minimum supported responsive and accessibility width
360x800	Common Samsung and Android mid-range size
384x832	Pixel-style Android size
390x844	Main modern iPhone size
430x932	Large iPhone / Pro Max size
375x667	Older or smaller iPhone size
768-1024px	Tablet range
1600x900	Representative desktop dashboard viewport

Why 390x844 Is the Primary iPhone Target

The analytics show strong usage around modern iPhone viewport sizes. 390x844 is a good primary iPhone target because it represents the common iPhone 12, 13, and 14 style viewport family.

Testing both 390x844 and 393x852 on every release is probably unnecessary. The difference is small, and the testing effort is better spent covering meaningful layout variation, such as:

390x844 for the main iPhone experience
430x932 for large iPhones
375x667 for smaller and older iPhones
320px width for minimum responsive support

Sauce Labs Usage

Sauce Labs should be used for manual live testing where real browser and device behaviour matters.

Use Sauce Labs particularly for:

iPhone Safari
Android Chrome
Samsung and Pixel device coverage
Safari in-app or WebView-style validation where available
Real mobile keyboard behaviour
Real touch behaviour
Viewport and safe-area validation
Checkout and auth redirect checks

For each release, testers should record:

Field	Example
Device	iPhone 14
Browser	Safari
Viewport	390x844
Sauce Labs session	Link to session or video if available
Flow tested	Prescription order flow
Result	Pass/fail
Issues found	Ticket links or notes

What to Test Manually

Prescription Order Flow

Can the user start and complete the order flow?
Are all required fields visible and usable?
Are validation errors clear and correctly positioned?
Are CTAs visible, tappable, and not obscured?
Does the flow work with realistic prescription names and long content?
Does the flow recover from errors or refreshes?

Forms

Inputs are easy to select on mobile.
Labels remain associated with inputs.
Error messages do not overlap other content.
The keyboard does not cover the active field or primary CTA.
Autofill and password managers do not break layout.
Long names, addresses, emails, or prescription labels wrap safely.

Menus open and close correctly.
Back navigation behaves as expected.
Sticky headers and footers do not consume too much space.
Users can recover from intermediate steps.
Bottom navigation or sticky CTAs remain usable.

Layout and Responsiveness

No horizontal scrolling at supported widths.
Content does not overlap.
Buttons remain usable.
Long text wraps safely.
Modals and bottom sheets fit within the viewport.
Tables and dense dashboard content remain usable.
The page remains usable at 320px width.

Some users may open the site from links inside:

Email apps
Facebook
Instagram
Messaging apps
Other social apps

These experiences can sometimes behave differently from opening the site directly in Safari or Chrome.

Validate:

Login and authentication
Session persistence
Redirect handling
Payment or checkout redirects
Back button behaviour
File upload behaviour
Opening links externally vs internally
Cookie and session issues

Recommended Release Checklist

Before a major release, validate:

Area	Required check
iPhone Safari 390x844	Full prescription order flow
Android Chrome 384x832 or 360x800	Full prescription order flow
Desktop Chrome 1600x900	Dashboard prescription flow
320px width	No blocking responsive or accessibility issues
Links opened from email or social apps	Login, redirects, checkout, and session behaviour
Forms	Keyboard, validation, autofill, long values
Modals and bottom sheets	No overlap, focus issues, or offscreen CTAs
Accessibility sanity	Keyboard access, visible focus, form labels, error messages

Summary Recommendation

The live testing strategy should focus on the environments most likely to affect Releaf users:

Priority	Coverage
1	iPhone Safari at 390x844
2	Android Chrome at 384x832 or 360x800
3	Desktop dashboard at a representative wide desktop viewport such as 1600x900
4	320px minimum responsive and accessibility width
5	Links opened from email or social apps

This gives strong real-world coverage while keeping the manual testing matrix manageable.