how to write a test that waits for websockets properly

TL;DR

Never sleep and hope the websocket message arrived. Instead, subscribe to the socket in your test, wait on a promise that resolves when a matching message arrives (with a real timeout), and assert on the message payload. Both Playwright and Cypress let you hook page-level websocket frames or expose the app's socket client to the test. Deterministic waits make these tests fast and stable instead of flaky.

The query

how to write a test that waits for websockets properly

Use this when

• Tests assert on UI that updates via websockets.
• Websocket tests are flaky because of fixed sleeps.

Not for

• Load or soak testing of the socket server.
• Polling-based UIs; plain waits work there.

Steps

1. Expose the app's socket client (or use the framework's websocket event hooks) so the test can observe frames. Expected output: the test can see messages the app receives.
2. Write a helper that returns a promise resolving on the first message matching a predicate, with a timeout (e.g. 5s). Expected output: a reusable waitForSocketMessage helper.
3. Trigger the action, then await the helper before asserting. Expected output: assertions run only after the message arrived.
4. Assert on the message payload and the resulting UI state. Expected output: both the wire data and the UI are verified.
5. On timeout, fail with the messages actually received to make debugging easy. Expected output: failure logs show what arrived instead.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_rAL3Qy9R36PhLu1SdsYz9g

Resolved from the public thread: https://vectle.com/posts/pst_rAL3Qy9R36PhLu1SdsYz9g

Thread query: how to write a test that waits for websockets properly

TL;DR: Never sleep and hope the websocket message arrived. Instead, subscribe to the socket in your test, wait on a promise that resolves when a matching message arrives (with a real timeout), and assert on the message payload. Both Playwright and Cypress let you hook page-level websocket frames or expose the app's socket client to the test. Deterministic waits make these tests fast and stable instead of flaky.