Mobile Tests
| Key | Value |
|---|
| Status | Active |
| Owner | QA Automation |
| Updated | 2026-03-26 |
| Scope | Mobile viewport and interaction validation across all 6 CNC sites |
Mobile tests exist because CNC sites serve a majority of their traffic on phones. Desktop tests cannot catch mobile-specific regressions: horizontal overflow, undersized touch targets, hamburger menu failures, layout shift, and slow load times on mobile networks. This suite catches that class of breakage.
What The Suite Does
| Capability | What It Means |
|---|
| viewport validation | confirms sites render correctly at mobile widths without horizontal overflow |
| touch target sizing | checks interactive elements meet the 44x44px minimum (Apple HIG) |
| hamburger menu | confirms the mobile navigation toggle is tappable and opens the menu |
| performance budgets | measures LCP, CLS, and DOM size on mobile against defined thresholds |
| media on mobile | confirms video players have mobile controls and playback can start |
| orientation transitions | validates the page survives portrait-to-landscape without breaking layout |
| complete journey | end-to-end mobile browsing flow from homepage to article and back |
Three-Tier Structure
| Tier | Tag | Tests | Schedule | Purpose |
|---|
| Smoke | @smoke | 9 | Every PR + daily | Fast gate: viewport, overflow, breakpoints, image scaling, touch targets, hamburger, mobile consent |
| Regression | @regression | 8 | Nightly | Deeper UI checks: sticky header, text readability, form inputs, video controls, media playback, images lazy-load, live surface, orientation |
| Deep | @deep | 6 | Nightly | Performance + journey: load budget, LCP, CLS, DOM size, subscription/paywall entry, complete browsing journey |
Devices
| Project | Device | Viewport | User Agent |
|---|
| mobile-chrome | Pixel 5 (via Playwright devices) | 393x851 | Chrome mobile |
| mobile-safari | iPhone 13 (via Playwright devices) | 390x844 | Safari / WebKit |
Both projects run the same spec file. Safari-specific commands use the npm scripts below.
| Metric | Budget | iSport Override | Why |
|---|
| Load time | 20,000 ms | — | mobile 3G baseline |
| LCP | 6,000 ms | — | largest contentful paint cap |
| CLS | 0.35 | 0.50 | iSport ad-heavy homepage has higher layout shift |
| DOM elements | 4,500 | — | complex DOMs degrade mobile parse time |
iSport has an elevated CLS budget because its ad-heavy sports homepage generates materially higher layout shift during initial paint. The override is explicit in the spec and documented in code.
Smoke Tests (@smoke)
Nine tests that run on every PR and daily. These are the fastest checks and the highest-confidence signal for mobile regressions.
| Test Name | What It Checks |
|---|
| viewport meta tag configured correctly | width=device-width present, zoom not blocked |
| no horizontal overflow on mobile | scrollWidth <= clientWidth at 375px viewport |
| content adapts across breakpoints | header and main content visible at 320/375/428/768px |
| images scale properly on mobile | no image wider than viewport |
| touch targets meet minimum size (44x44px) | fewer than 15 undersized interactive elements |
| hamburger menu is tappable and functional | hamburger visible, opens menu, menu contains links |
| links and buttons respond to tap | interactive elements respond to tap/click |
| scroll works smoothly | page can be scrolled vertically |
| mobile consent dialog accessible | consent overlay visible and dismissable on mobile |
Regression Tests (@regression)
Eight tests that run nightly. These test behaviors that take longer or require more interaction.
| Test Name | What It Checks |
|---|
| sticky header behavior | header stays near top after scrolling 500px |
| text is readable size (min 12px) | font sizes >= 12px across visible text elements |
| form inputs are mobile-friendly | inputs have adequate size and spacing on mobile |
| video player has mobile controls | player visible on known video URL, tap targets accessible |
| known media page starts playback on mobile | media playback starts via tap on known article |
| images lazy load | images below fold have lazy load attribute |
| live/news surface is reachable on mobile | live or news URL loads and has timeline entries |
| portrait to landscape transition | page layout recovers after orientation change |
Deep Tests (@deep)
Six tests that run nightly, measuring performance and validating complete flows.
| Test Name | What It Checks |
|---|
| page loads within budget on mobile | load time under 20,000ms |
| LCP under budget | LCP under 6,000ms |
| CLS under budget | CLS under 0.35 (or site override) |
| DOM size reasonable for mobile | fewer than 4,500 DOM elements |
| subscription/paywall entry loads on mobile | subscription or premium URL loads, entry point visible |
| complete mobile browsing journey | homepage → article → scroll → back, session intact |
How To Run
| Command | What It Does |
|---|
npm run test:mobile:smoke | @smoke tier, Chrome (9 tests, PR-safe) |
npm run test:mobile:regression | @regression tier, Chrome (8 tests) |
npm run test:mobile:deep | @deep tier, Chrome (6 tests) |
npm run test:mobile:safari:smoke | @smoke on iPhone 13 (Safari/WebKit) |
npm run test:mobile:all-devices:smoke | @smoke on Chrome + Safari |
npm run test:mobile:matrix:smoke | @smoke across all 6 sites on Chrome |
SITE=blesk npm run test:mobile:smoke | Single site smoke only |
What Each Tier Catches
| Tier | Typical Failure Signal |
|---|
| @smoke | major layout breakage, menu not opening, overflow introduced by CSS change |
| @regression | sticky header removed, text too small after font change, media player controls moved |
| @deep | page load regression after large script addition, layout shift increase after ad change |
Per-Site Surface Configuration
Each site has a configured set of known URLs used by media and subscription tests. These are stable article or listing URLs chosen because they reliably have the tested content.
| Site | Video URL | Podcast URL | Live/News URL | Subscription URL |
|---|
| Auto | auto.cz/martin-vaculik-... | auto.cz/techto-6-... | — | — |
| Blesk | blesk.cz/video | — | blesk.cz/live | — |
| E15 | e15.cz/videoporady/flow/... | e15.cz/podcasty/... | — | e15.cz/e15-premium |
| iSport | isport.blesk.cz/ | — | isport.blesk.cz/live-prenos | isport.blesk.cz/premium |
| Reflex | reflex.cz/ | — | reflex.cz/online-prenos | reflex.cz/premium |
| Opinio | prepiste-dejiny.opinio.cz/... | prepiste-dejiny.opinio.cz/... | — | opinio.cz/publikace |
Related Pages