Course lesson 33 · Building AI Workflows
Taking Screenshot in Browser Rendering
This update adds screenshots to the rendering evidence so the instructor can inspect what the remote browser actually saw. The browser helper returns an encoded screenshot, and the R2 backup step converts it into image bytes and stores it beside the HTML and text. The resulting image shows an error page, explaining why the AI could not infer the product’s availability from the collected content.
Primary source: course video 33 · Supplied English subtitles · 00:03:29.
Understand the idea
- A screenshot records visible rendering state that may be difficult to diagnose from text or HTML alone.
- A base64 data URL is a textual representation of an image, which the lesson converts back into bytes for storage.
- The screenshot is evidence of the browser’s observed page, not necessarily the page a person sees in another session.
- The existing evaluation ID and storage organisation can connect the screenshot to its other evidence.
- Observability features can be added within the rendering helper without redesigning the whole application.
What the course does
- Take a screenshot after the page-loading work in the browser helper.
- Return the screenshot as an encoded data URL alongside the collected page data.
- Extend the R2 backup step with a screenshot-specific path.
- Extract the encoded image portion, convert it into bytes, and write it to R2.
- Run a workflow and open the saved screenshot to inspect the unexpected AliExpress page.
Watch for
- The instructor speculates about bot detection and a reload challenge; the demonstrated evidence is an error page, not a confirmed explanation of the site’s internal behaviour.
- This screenshot-as-step-output design can exceed the persistence-size limit and is corrected immediately in lesson 34.
- Added advice: diagnose using the exact saved evidence for an execution rather than assuming a later manual browser visit shows identical content.
Follow the final workflow correction in lesson 34 when combining these steps.
Recall before revealing
What did the screenshot explain that the unknown AI status could not explain by itself?
Reveal the explanation
It showed that the rendering session saw an error page, so the expected product evidence was absent before the model was called.
Try it
For an unexpected classification, write the evidence you would inspect in order: rendered screenshot, collected text, response status, prompt, and model output.
Check your result
Your investigation can identify whether the problem began during collection or interpretation instead of treating every unknown status as a model defect.
Practice prompts and answer checks are added teaching material. Answer from memory first, then compare and explain any difference.
Rewatch only what you need
Open this lesson in your original course library and seek to the times below. Videos are not hosted on this site.
- 00:00:18 — Using screenshots to diagnose missing content
- 00:00:47 — Capturing and encoding the screenshot
- 00:01:18 — Adding a screenshot R2 path
- 00:02:00 — Converting encoded image data for upload
- 00:02:25 — Inspecting the saved error-page screenshot
Companion primary documentation: Workflows Workers API. For recorded API names, commands, limits, and prices, check the version you use.