Use Claude to Stop a Screenshot Bug Coming Back

I build Settl, an expense-splitting app, solo with Claude. This is how I turn a screenshot into a result I can inspect, including where the AI must stop.

The 30-second version

The workflow takes a screenshot, the page URL, expected behaviour, actual behaviour, and safe test credentials and returns a reproducible browser test, its failing evidence, the smallest proposed fix, and a passing rerun. Use Claude Code with Playwright. Trigger it manually, from GitHub Issues, or through n8n when a tagged bug arrives.

The test fails only on the broken version. That proves it can see the bug. After the fix, the same test passes and keeps watching for the bug to return.

Code handles exact calculations, validation, duplicate protection, and state changes. Claude handles messy language, classification, and drafts. A person approves anything irreversible, sensitive, or customer-facing.

A test that never failed never proved the bug.

Download the runnable pack

Start with the complete pack, or take only the file you need:

Dry-run is the default. The starter validates the input and returns a draft for approval. It does not change code, open a pull request, or touch production by itself.

Why the naive version fails

Most demos show one clean input moving into one polished output. Real work has missing fields, conflicting sources, timeouts, and duplicate events. A model may fill a blank because nobody told it to return null.

Here, the danger is writing a test that already passes, guessing missing steps, or touching unrelated code. The fix is a visible system with strict inputs, saved evidence, stop conditions, and one owner for exceptions.

Every run should answer:

What started it? The original event and received time.
What evidence did it use? Files, records, links, and dates.
What did code check? Validation, arithmetic, matching, and status.
What did Claude draft? Language, labels, or options.
Who approved the action? A person or an explicit safe rule.

Map and extract before building

Map the boundary first. This stops a small automation from quietly gaining permission to act.

Workflow: Use Claude to Stop a Screenshot Bug Coming Back
Input: a screenshot, the page URL, expected behaviour, actual behaviour, and safe test credentials
Output: a reproducible browser test, its failing evidence, the smallest proposed fix, and a passing rerun

Return the trigger, strict input fields, rule or code steps, Claude steps, external actions, approval gates, and failure paths. Do not build yet.

Then turn the source into named fields. Keep the evidence beside each field so a reviewer can open the original.

Workflow: Use Claude to Stop a Screenshot Bug Coming Back
Input: a screenshot, the page URL, expected behaviour, actual behaviour, and safe test credentials
Output: a reproducible browser test, its failing evidence, the smallest proposed fix, and a passing rerun

Extract only supported facts from the attached safe sample. Return valid JSON with source evidence, confidence, and missing_information. Use null for missing values. Do not infer or act.

Validate the extracted shape. Reject missing required fields or wrong types. Run totals, dates, matching, scoring, and permissions in code.

Add the controls that make it usable

Use this order whether you build with n8n, Make, Zapier, GitHub Actions, or a small service:

Receive and save the input. Assign a stable run ID before doing work.
Remove or protect sensitive data. Pass only the minimum needed fields.
Extract into a strict shape. Keep nulls and confidence visible.
Run exact checks. Validate fixed values outside the model.
Create a draft or proposed action. Do not execute it yet.
Apply the approval rule. A person reviews risky and customer-facing actions.
Execute once and save the result. Keep the external ID to block duplicates.
Queue failures. Never silently drop the original work.

Review the final draft before enabling actions:

Review this proposed screenshot-to-regression-test output. List unsupported claims, missing fields, sensitive data, calculations that belong in code, and actions missing approval. Return PASS only when all are resolved.

Choose the smallest useful stack

Use Claude Code with Playwright. Trigger it manually, from GitHub Issues, or through n8n when a tagged bug arrives.

Use n8n when the workflow mainly connects existing tools, needs visible branching, and will be maintained by an operator. Use GitHub Actions when the trigger and result live around code. Use a small service when you need strong tests, high volume, complex permissions, or careful retry behaviour.

Choose the place where your team can inspect a failed run and safely replay it. The useful result is not the diagram. It is evidence you can debug.

Test the ugly cases

Run the test before the product change and save the failure. Run it again after the change and save the pass.

Design eight tests for this screenshot-to-regression-test workflow: normal, missing, malformed, duplicate, conflicting, permission failure, tool failure, and human stop. Give input, expected state, prohibited side effect, and saved evidence.

Save each test input and result. The workflow should finish once or stop visibly. It should never guess through a broken dependency.

Run this on your codebase

Paste this into Claude Code with the workflow files open. For n8n, attach the exported workflow JSON and safe sample payloads.

Workflow: Use Claude to Stop a Screenshot Bug Coming Back
Input: a screenshot, the page URL, expected behaviour, actual behaviour, and safe test credentials
Output: a reproducible browser test, its failing evidence, the smallest proposed fix, and a passing rerun

Plan the implementation. Separate code from Claude, require source evidence, add duplicate protection, safe retries, approval before irreversible actions, logs, alerts, replay, and acceptance tests. Do not use real customer data. Stop for plan approval before building.