Thomas Piacentini
← Workshop

Project stage

Turn DOM state into constrained actions

Original text · English120 min

Stage 1 of 4. Read the project prerequisites before starting; this stage builds on the preceding contracts.

What changes

Read labels, values, disabled states and stable ids from a small form. Validate unique ids and field types. Choose one action at a time: fill the name, fill email, then click the uniquely identified Save request button. Page prose is never interpreted as instructions. Missing fields, ambiguous labels, dangerous buttons and unexpected origins cause an explicit blocked result.

The boundary for this stage is parseObservation, choose. Keep earlier stage behavior intact: the final grader runs every stage against the same workspace.

Work through one concrete case

A page has fields Full name and Full name confirmation. Only exact requested labels may match; choosing the first fuzzy match can fill the wrong control. If two fields share the requested label, block before mutation.

pj browser agent 1

Change the lab inputs and calculate the result before reading its metrics. The figure computes from those inputs; the implementation tests below remain the source of completion evidence.

Implement the contract

Implement parseObservation, choose in your workspace main.ts. Read the exported types in the reference only after attempting the contract. Preserve the starter's public names so tests can call your implementation. Return structured values instead of printing inside the core function; the CLI prints the final result.

Use the public API contract and the typed starter signatures. Return values from core functions and let the supplied driver own file input, argument parsing and presentation.

Treat Task as caller authority and Observation as untrusted page state. Build one fill or click value from observed ids; page prose never supplies code or commands.

Verify and inspect

From the repository root, initialize once with python3 scripts/project_test.py browser-agent --init learning-artifacts/browser-agent. Then grade cumulatively:

bash
python3 scripts/project_test.py browser-agent --stage 1 --path learning-artifacts/browser-agent --strict

A fresh workspace should fail until you implement the contract. After every stage is complete, run your actual artifact from the supplied sample:

bash
cd learning-artifacts/browser-agent
node cli.ts --task samples/contact.json --output browser-run.json

Investigate the failure boundary

Set done=true while the email differs from the task. Completion must fail even if a green banner is present.

References

Chrome DevTools Protocol PNG specification HTML form controls

Code and artifacts 12
What you take away

Saved in your notebook on this device.

Sources and limits

Reading checkpoints are self-reported. Test results are recorded separately and apply to the executed cases.

AI Engineering from Scratch · 3f9715c · MIT

Download this file ↓