Skip to content

The practical guide

Give browser agents the full story.

A button is only part of the story. Show the starting state, the steps, and what went wrong so your agent has a clear place to begin.

A clearer starting point
EXAMPLE · PROFILE NAME REVERTS
  1. 01
    Capture the path

    Edit name → save → reload

  2. 02
    Pinpoint the mismatch

    “Saved” appears. The old name returns.

  3. 03
    Give the agent a task

    Find where the new value is lost.

The evidence explains the run. A fresh check verifies the result.

THE SHORT VERSION

Give the agent enough context to understand the next step. Include where you started, what you did, and the result you expected. A screenshot or selector can help identify the UI; the sequence explains the problem.

Start with six useful details.

Whether an agent navigates the browser or helps an engineer investigate a recording, the handoff should answer a few concrete questions. Keep it focused on the task.

The task

Say what to investigate and what a correct result would look like.

Find why a profile name reverts after saving.
The starting state

Include the route, environment, account role, and setup that matter.

Test workspace · /settings · member account.
The target

Identify the control and its surrounding section. Add a locator or relevant markup when available.

The Save changes button inside Profile.
The sequence

List the actions in order, including the transition where the problem appears.

Edit the name → save → reload.
The observation

Separate what you saw from what you think caused it.

“Profile saved” appears, but the old name returns.
The evidence

Link the reviewed recording or screenshot, note when it was captured, and say what is still unverified.

Recording at 00:12 · persistence not yet investigated.

A screenshot shows appearance. DOM and accessibility information add structure and names. A recording shows the captured sequence. Choose the evidence that answers the question, and say when something is missing.

Same bug. A much clearer handoff.

A profile name reverts after a reload. The page has two “Save changes” buttons. Add context below to see what each version explains—and what the receiving agent still needs to find out.

Add context to the same bug report
Fictional settings screen · after reload
ProfileDisplay nameAverySave changes
PreferencesLanguageEnglishSave changes

You can see the page. The task is still unclear.

The handoff
The name did not save. See the attached settings screenshot.
What this explains
The layout and visible controls at one moment.
Still unknown
Which Save changes button? What was entered? Did the issue appear before or after a reload?

A useful next stepAsk for the steps and the affected section before attempting the task.

1. A screenshot. You can see the page. The task is still unclear.

An authored teaching example, not a live agent session. The sample screen and prompts contain fictional data.

A completed click is only one checkpoint.

In this example, the save message appears but the name does not survive a reload. Checking only the message would miss the reported bug.

01 / TARGETFind the intended control.

Scope to Profile so the agent does not use the Preferences button.

02 / ACTIONObserve the response.

Check what the application shows after Save changes.

03 / OUTCOMETest the actual requirement.

Reload and check that the new name is still there.

See the Playwright check
profile-persistence.spec.ts
import { test, expect } from '@playwright/test';

test('profile name survives a reload', async ({ page }) => {
  // Configure baseURL and an authorized test account first.
  await page.goto('/settings');
  const profile = page.getByRole('region', {
    name: 'Profile', exact: true,
  });
  const name = profile.getByRole('textbox', {
    name: 'Display name', exact: true,
  });
  const save = profile.getByRole('button', {
    name: 'Save changes', exact: true,
  });

  await expect(save).toHaveCount(1);
  await name.fill('Avery Chen');
  await save.click();
  await expect(profile.getByRole('status'))
    .toHaveText('Profile saved');

  await page.reload();
  await expect(name).toHaveValue('Avery Chen');
});

Adapt the route, roles, labels, and test account to your app. This test expects a successful save; its final assertion should fail for the fictional bug described above. Reset test data between runs.

Playwright locators resolve against the current DOM. Its actionability checks help determine whether a control can be clicked. Keep a separate assertion for the application result.

Re-check after the page changes.

A captured selector, screenshot, or element reference describes an earlier state. After navigation, a reload, or a UI update, inspect the current target again. Keep “observed in the recording” separate from “verified now.”

Copy a starting point for your next handoff.

Fill in the details that matter to the task. Put the relevant moment next to the evidence link so the receiving person or agent knows where to look.

browser-agent-handoff.txt
Task: [What should the agent investigate?]
Environment: [Test URL, build, browser, account role]
Starting state: [Relevant setup and test data]
Target: [Section + role/name; locator or markup if available]

Steps:
1. [Action]
2. [Action]
3. [Transition that exposes the issue]

Expected: [Observable result, including after reload if relevant]
Observed: [What actually happened; keep guesses separate]
Evidence: [Reviewed link + capture time + relevant moment]
Access: [Confirm the intended recipient can open the evidence]
Allowed actions: [What can be inspected or changed, and where]
Still unknown: [Missing data or checks not yet performed]

Re-check the current page before acting.
Return: steps attempted, results observed, and remaining gaps.

Review screenshots, recordings, URLs, and markup before sharing. Leave out credentials and unrelated personal data. Use an authorized test environment for actions that change application data.

MCP connects the evidence to the investigation.

Model Context Protocol (MCP) gives compatible clients a shared way to access a server’s resources and capabilities. What the agent can read or do depends on that server and its permissions.

Samelogic’s MCP connection provides read-only access to authorized recordings, steps, and available element evidence for clients such as Claude Code and Codex. The agent can use that material while investigating; an engineer still reviews and verifies a proposed fix.

A recording is evidence from one run.

It does not recreate the server’s data or establish that the bug happens now. Pair it with the starting conditions and an explicit check of the current application.

See supported integrations

FROM THE EXAMPLE TO YOUR OWN APP

Capture the steps behind the question.

Start a recording before you repeat the issue. Use Samelogic to replay the path and inspect the affected element, then give your teammate or connected coding agent the evidence to investigate.

CSS Selector & XPath Finder · Samelogic’s extension for desktop Chrome.

You choose when recording starts and stops. Review the capture and who can access it before sharing; actions taken before recording starts are not included.

A few common questions.

What is browser agent context?

It is the information an agent uses to understand a browser task: the current page, relevant state, target controls, prior actions, and the result to check. For a bug investigation, include the expected behavior, the observed mismatch, and reviewed evidence.

Can a browser agent work from screenshots?

Yes. A visual agent can use screenshots to identify controls and choose actions. A screenshot still represents one moment; include the preceding steps and expected result when they matter. DOM or accessibility information can add target details when the agent supports it.

Should I send the whole DOM?

Start with the relevant control and enough surrounding structure to understand it. Keep labels, state, and scope intact. Add more context if the task needs it, and remove unrelated personal data or secrets before sharing.

Does an MCP connection verify the task?

No. MCP lets a compatible client access the capabilities exposed by a server. The client still needs the right evidence, access, and instructions. Reading a recording does not prove that the current application behaves the same way or that a fix works.

What can Samelogic provide to a coding agent today?

Samelogic’s read-only MCP connection gives supported clients access to authorized recordings, steps, and available element evidence. An engineer remains responsible for reviewing a proposed fix or test and checking its result. A recording does not restore arbitrary server state.

Sources & further reading

The handoff format is a practical suggestion. The technical references below explain locator behavior, result checks, and MCP.

  1. Playwright: locators and scoping
  2. Playwright: actionability checks
  3. Playwright: checking results with assertions
  4. MCP: architecture and client capabilities