Problem
A large React / Next.js application — auth, video player, uploads, localization — had no automated cross-device coverage. Browser and device differences surfaced only after release.
- sign-in, registration, password recovery tested manually on one browser only
- video player behavior differed between browsers — found by users, not by QA
- language switching bugs required user reports to surface
- upload flows on mobile were untested before deployment
Action
Built an E2E test layer covering key user journeys across browsers, devices and language variants.
- tests organized around product scenarios, not technical layers
- Chromium, Firefox and WebKit coverage on both desktop and mobile
- video player tested end-to-end: seeking, volume, quality settings, preroll flow
- accessibility checks integrated into the regular suite
- diagnostic tooling added for flaky navigation failures with root-cause output
Result
Cross-device and cross-browser issues stopped reaching production. The team has a reliable baseline before every release.
- critical journeys verified on all target browsers and devices
- accessibility built into the test suite, not handled ad hoc
- first bug caught: video preroll silently skipped on Firefox mobile — not reproducible manually
When it makes sense
- React or Next.js applications with auth, video, forms or localization
- products that need release confidence on both desktop and mobile
- teams where manual cross-browser checking is no longer scaling
Technologies
Playwright · TypeScript · Next.js / React · axe · cross-browser configuration