DEV Community

Cover image for Testing Real-Time Web Apps Requires Different Rules
Antoine Dubois
Antoine Dubois

Posted on

Testing Real-Time Web Apps Requires Different Rules

Some browser tests assume the page will eventually become stable.

That assumption works for many traditional web apps.

But it starts to break down when the product uses WebSockets, streaming responses, live collaboration, browser extensions, pop-out panels, or injected UI.

In those cases, the page is not just loading once. It is constantly changing.

And if your test strategy does not account for that, you get flaky assertions, misleading failures, and test results nobody fully trusts.

Real-time apps do not behave like static pages

A dashboard that updates through WebSockets is not the same as a static settings page.

A collaborative editor is not the same as a checkout form.

A live feed, streaming panel, or reconnecting data view may update in small increments, recover from disconnects, or rehydrate state after a network event.

That changes how tests should be written.

Instead of waiting for “the page to load,” the test needs to wait for the right state. That might mean a reconnect event finished, a heartbeat resumed, stale data was replaced, or a live record appeared after rehydration.

This guide on how to test WebSocket reconnects, heartbeats, and live data rehydration without flaky assertions is useful for teams working on real-time products.

For a broader view, it is also worth looking at how to benchmark browser test behavior when web apps use WebSockets, streaming events, and live collaboration.

Multi-window workflows are still easy to get wrong

Many products now use multiple windows, pop-out panels, OAuth handoffs, embedded dashboards, or secondary admin screens.

Those flows are harder to test because the test needs to understand which browser context is active and where the session lives.

A test may pass when everything happens in one tab, then fail when the same flow opens a new window or hands the user off to another domain.

Before trusting a browser testing tool for these cases, teams should know what to measure before trusting a browser testing tool for multi-window workflows and pop-out panels.

Browser extensions create another layer of UI

Testing browser extensions is even more complicated.

Extensions can inject UI, rewrite forms, add side panels, insert overlays, or modify the DOM. That means the test must understand what belongs to the app and what belongs to the extension.

This is not just a locator problem. It is also a product behavior problem.

If an extension changes the form, does the original app still submit correctly? If it adds a side panel, does it block existing buttons? If it injects an overlay, does it change the user journey?

Teams working in this space should read how to test browser extensions that inject UI, rewrite forms, or add side panels.

The Selenium vs Playwright discussion also becomes more practical here. Instead of comparing frameworks in abstract terms, it is better to ask how each one handles the actual browser-extension scenario. This article on Playwright vs Selenium for testing browser extensions and extension-injected UI focuses on that specific problem.

CI failures need better logs

When a test fails only in CI, the worst response is to simply rerun it and hope it passes.

That might make the pipeline green, but it does not make the suite trustworthy.

CI-only failures usually need better evidence: browser logs, console logs, network details, screenshots, videos, environment details, timing information, and enough context to reproduce the issue.

That is why every team should know what to log when Playwright tests fail only in CI but pass locally.

This is especially important for real-time and multi-window products. Without logs, you may not know whether the failure came from the app, the browser, the environment, the network, the test data, or the assertion timing.

QA partners should be evaluated by evidence quality

The same principle applies when working with external QA agencies.

A QA partner should not just say “the test failed.” They should provide enough evidence for the development team to understand the failure quickly.

That includes clear reproduction steps, screenshots, videos, logs, environment details, and a useful handoff. Otherwise, the engineering team ends up doing the investigation twice.

This checklist on how to evaluate a QA agency for release triage, evidence quality, and developer handoffs is a good way to think about that.

The lesson

Real-time browser testing is not just normal browser testing with more waits.

The test suite needs to understand moving state.

It needs to know when the app is reconnecting, when data is fresh, when a second window matters, when an extension has changed the DOM, and what evidence to collect when something fails.

Otherwise, the team ends up with tests that are technically automated but practically unhelpful.

Top comments (0)