Loading challenge...
Streaming Response
Read a chunked ReadableStream token-by-token and assert completion, or abort it mid-stream
What you will learn
- Consume an HTTP streaming body incrementally with the Streams API reader instead of buffering the whole response
- Recognize that waitForResponse/response.text() block on a long-lived stream and choose progressive assertions instead
- Cancel an in-flight request cleanly with AbortController and assert the resulting partial/aborted state
- Assert on stable data-* state attributes rather than transient visible text
Streaming Response — Read the Body Chunk by Chunk
A ReadableStream emits one word every ~140ms then closes — you must consume it incrementally instead of awaiting the whole response
GET /api/lab/stream returns a chunked text/plain body. Awaiting the full response (or waitForResponse) blocks until the last byte arrives — to observe progress you read response.body.getReader() in a loop.
Status: idle
Start & Abort the Stream
Begin reading, watch the typewriter fill, or abort mid-stream
Testing Tips
Automation hints
- ✓ Do not
waitForResponse("/api/lab/stream")expecting a body — it resolves on headers but a naiveresponse.text()hangs until the stream closes (~1.7s); use a timeout-bounded read instead - ✓ Click
#stream-start, then assert#stream-outputgrows over time — poll itstextContent.lengthtwice and check the second is larger - ✓ The canonical success signal is the attribute
#stream-output[data-complete="true"], flipped only after the reader seesdone— wait for it rather than for a fixed string - ✓ Click
#stream-stopmid-stream to fire anAbortController:data-completestays"false"and#stream-statusbecomesaborted - ✓ Assert state via
#stream-status[data-status](streaming→complete/aborted), not the visible button label
