How do you test SPAs, PWAs, and micro-frontends across platforms?

Long Answer

Testing modern web apps means validating functionality, resilience, and user experience under real constraints. Single-page applications, progressive web apps, and micro-frontend architectures add complexity in routing, state, service workers, and integration contracts. My strategy is layered, deterministic, and data-driven, combining automation with purposeful exploratory testing across browsers, devices, and network conditions.

1) Test strategy and pyramid

I enforce a balanced pyramid: unit tests for logic and pure functions; component tests for UI contracts; integration tests for routing, data fetching, and state; end-to-end flows for critical paths; and visual regression for layout. Each layer has clear ownership and runs in CI with fast feedback. For SPAs I target router transitions, guarded routes, and cache invalidation; for PWAs I add service-worker rules; for micro-frontends I cover shell-to-fragment integration.

2) Cross-browser and device coverage

I define a support matrix by usage and risk: evergreen Chromium, Firefox, WebKit/Safari; desktop and mobile; latest two OS versions; and at least one low-end device profile. I use a mix of local headless, cloud device farms, and a stable set of physical devices. Smoke suites run on all; deeper suites run on a representative subset. I watch for engine quirks (viewport units, input types, IndexedDB, WebKit cache limits) and keep per-engine skips documented with linked issues.

3) Network and performance conditions

Real users face slow or unstable networks, so I test under controlled throttling: 3G/Slow 4G, high latency, packet loss, and offline. I measure core web vitals and SPA metrics (TTI, TBT, CLS, hydration time), compare against performance budgets, and fail builds on regressions. For PWAs I verify offline navigation, cache versioning, background sync, and retry logic. I validate that app shells load with meaningful content and that error UI degrades gracefully.

4) Data, state, and determinism

Flaky tests hide real defects. I isolate test data per run, seed fixtures through APIs, and reset state between specs. For SPAs, I stub non-critical externals but keep contract tests against real backends for high-risk flows. I control time (mock clocks) and randomness, freeze feature flags, and assert stable selectors via test IDs. For micro-frontends, I pin fragment versions in CI so the shell does not pull breaking changes mid-run.

5) PWA installability and capabilities

I validate manifest correctness, icons, display modes, and install prompts on desktop and Android. I test service-worker lifecycle (install, activate, update), cache invalidation on deploy, and offline fallbacks. Push notifications are checked for permission flows, payload rendering, and deep links. Background sync is tested under airplane/online toggles with idempotent replays. I ensure privacy settings and content security policy do not block PWA features.

6) Micro-frontend composition and contracts

Micro-frontends fail at boundaries. I define contract tests for events, props, and shared stores between shell and fragments. I check isolation (CSS leakage, global namespace), versioning, and error boundaries per fragment. Visual regression at the composition layer catches spacing and theming drift. I rehearse failure modes: fragment 404, slow load, or incompatible version, and confirm shell fallbacks and telemetry fire correctly.

7) Accessibility and internationalization

Accessibility is integral. I run automated a11y checks (landmarks, labels, contrast), then keyboard and screen-reader smoke. I add RTL and long-text snapshots to ensure layouts hold. For SPAs, I verify focus management after route changes and live region announcements on updates. I test locale formatting and time zones under throttled networks to catch hydration and font swapping regressions.

8) Visual regression and design tokens

I use component-level snapshots and page-level visual diffs. To keep them stable, I disable animations in test mode, self-host fonts, and wait for network idle. I baseline per browser and viewport. Design-token contract tests ensure theme changes propagate, preventing micro-frontend drift. Only high-value regions are snapshotted to avoid noise.

9) Observability, logging, and triage

Tests export traces, screenshots, network HARs, and console logs. I tag artifacts by browser, device, and network profile. A flake dashboard tracks root causes (timeouts, race conditions, anti-aliasing). For PWAs I log service-worker events and cache keys; for micro-frontends I log contract versions and shell/fragment errors separately. Failures link to runbooks with known browser quirks and remediation steps.

10) CI orchestration and governance

CI shards by browser and spec type, retries rare flakes with tracing, and gates merges on smoke + performance + a11y baselines. Canary suites run on pre-prod behind the same CDN rules. I keep a public test policy: coverage goals, supported environments, and deprecation timelines. Release trains include a “compat window” where the shell accepts old and new fragment versions to reduce blast radius.

By combining disciplined coverage, realistic networks, and contract-driven checks, I deliver confidence for testing modern web features—SPAs, PWAs, and micro-frontends—across browsers, devices, and conditions without slowing delivery.

‍

Table

‍

Common Mistakes

Relying only on headless Chromium and calling it “cross-browser testing.” Testing SPAs without focus and keyboard checks, so route changes trap screen readers. Treating PWAs like static sites: no offline, no service-worker update path, or broken cache invalidation on deploy. Over-mocking APIs so network and timing bugs never surface. Visual snapshots of whole pages that flake from animations and font jitter. Skipping contract tests for micro-frontends, causing silent breaks when a fragment updates. Ignoring low-end devices and real latency; budgets pass in lab but fail in the field. Lacking artifact capture and dashboards, so flakes recur and trust in tests evaporates.

‍

Sample Answers

Junior:
“I test SPAs with component and end-to-end checks for routing and forms. I run suites on multiple browsers, throttle to Slow 4G, and verify basic a11y. For PWAs I test offline and install prompts. I store screenshots and logs to debug failures.”

Mid-level:
“I plan a matrix of browsers and devices, with smoke on all and deep tests on a subset. PWAs get service-worker lifecycle and cache-busting tests. Micro-frontends have contract tests and visual checks at the shell layer. I enforce performance budgets and capture HAR and traces.”

Senior:
“I combine deterministic data, per-engine baselines, and contract-driven checks. CI shards by browser and network profile, gates merges on a11y and performance, and retries with tracing. PWAs validate offline, background sync, and updates; micro-frontends validate isolation, version compatibility, and graceful degradation.”

‍

Evaluation Criteria

Look for a layered plan that explicitly covers SPAs, PWAs, and micro-frontends. Strong answers include a browser/device matrix, seeded data, router and state tests, PWA installability and offline behavior, and micro-frontend contract and composition checks. Expect network throttling, cross-browser testing, visual baselines, and performance budgets. Accessibility and i18n should be integrated, not separate. The best candidates mention CI sharding, artifacts (HAR, traces, screenshots), and governance for supported environments. Red flags: single-browser reliance, over-mocking, no service-worker or contract tests, and ignoring low-end or mobile constraints.

‍

Preparation Tips

Build a demo SPA with auth and nested routes; write component and E2E tests that assert focus after navigation. Convert it to a PWA: add a manifest, service worker, offline cache, and update flow; test in airplane mode and with throttling. Create a tiny micro-frontend shell with two fragments; add contract tests and an error boundary. Set up a device farm run: Chrome, Firefox, Safari; Android and iOS web. Add performance budgets for LCP/TBT/CLS and fail builds on regressions. Capture HAR, console, and traces in CI; publish artifacts and a flake report. Practice explaining one flaky test’s root cause and your permanent fix.

‍

Real-world Context

A retail SPA failed keyboard focus after route changes; adding focus management tests caught regressions early and reduced a11y bugs by 70%. A news PWA shipped with a stale service worker; release tests for cache versioning and update prompts eliminated “ghost UI” after deploys. A micro-frontend platform broke when a fragment changed an event name; contract tests and a compatibility layer prevented future incidents. A logistics team tested only on desktop Chrome; adding Android WebView and iOS Safari in the matrix revealed touch and viewport issues, cutting mobile error reports in half. Network-throttled performance gates kept LCP under budget on slow 4G.

‍

Key Takeaways

• Treat SPAs, PWAs, and micro-frontends as distinct risk areas with tailored tests.
  
• Build a browser/device matrix and test under throttled networks with performance budgets.
  
• Use contract tests and composition checks for micro-frontends; validate PWA offline and updates.
  
• Stabilize visual tests with deterministic fonts, no animations, and per-engine baselines.
  
• Capture rich artifacts and track flakes to sustain trust in the suite.
  
  

Practice Exercise

Scenario:
Your team maintains a commerce SPA with a PWA shell and two micro-frontends (search and cart). Users report intermittent offline failures and styling glitches on iOS Safari. You must design a test plan that proves resilience across browsers, devices, and network conditions.

Tasks:

1. Define a support matrix: desktop Chrome/Firefox/Safari; Android Chrome; iOS Safari/WebView; include a low-end Android profile.
   
2. Seed deterministic test data and create E2E flows for browse → add-to-cart → checkout, asserting router transitions, focus, and a11y cues.
   
3. Add PWA tests: manifest validity, install prompt, offline navigation of cached routes, background sync for queued cart updates, and service-worker update with cache invalidation.
   
4. Implement micro-frontend contract tests: shell↔search events, shell↔cart props, and error boundaries when a fragment is slow or missing.
   
5. Add performance budgets for LCP and TBT; run under Slow 4G and 150 ms RTT. Fail builds on regressions and capture HAR, traces, and screenshots.
   
6. Stabilize visual checks with per-engine baselines, disabled animations, and self-hosted fonts; snapshot key regions only.
   
7. Shard CI by browser and device; retry rare flakes with tracing; publish artifacts and a daily flake report with owner tags.
   
8. Document runbooks for known Safari quirks, service-worker gotchas, and contract versioning rules.
   
   

Deliverable:
A runnable plan and CI configuration that demonstrates reliable testing of modern web features—SPAs, PWAs, and micro-frontends—with cross-browser testing, network resilience, and actionable artifacts.