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 naive response.text() hangs until the stream closes (~1.7s); use a timeout-bounded read instead
✓ Click #stream-start, then assert #stream-output grows over time — poll its textContent.length twice and check the second is larger
✓ The canonical success signal is the attribute #stream-output[data-complete="true"], flipped only after the reader sees done — wait for it rather than for a fixed string
✓ Click #stream-stop mid-stream to fire an AbortController: data-complete stays "false" and #stream-status becomes aborted
✓ Assert state via #stream-status[data-status] (streaming → complete / aborted), not the visible button label

Related Challenges

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

Status: idle

Testing Tips

Automation hints

✓ Do not waitForResponse("/api/lab/stream") expecting a body — it resolves on headers but a naive response.text() hangs until the stream closes (~1.7s); use a timeout-bounded read instead
✓ Click #stream-start, then assert #stream-output grows over time — poll its textContent.length twice and check the second is larger
✓ The canonical success signal is the attribute #stream-output[data-complete="true"], flipped only after the reader sees done — wait for it rather than for a fixed string
✓ Click #stream-stop mid-stream to fire an AbortController: data-complete stays "false" and #stream-status becomes aborted
✓ Assert state via #stream-status[data-status] (streaming → complete / aborted), not the visible button label

Streaming Response

What you will learn

Streaming Response — Read the Body Chunk by Chunk

Start & Abort the Stream

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Streaming Response

What you will learn

Streaming Response — Read the Body Chunk by Chunk

Start & Abort the Stream

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop