Browser Testing with DevTools brings screenshots, DOM state, console messages, and network evidence into an agent’s browser testing workflow. It uses Chrome DevTools MCP and works best with a scoped test profile.
Give the agent a test page and a single interaction to inspect in an isolated Chrome profile.
Provide an approved URL, synthetic data, expected behavior, and the evidence needed.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Browser Testing with DevTools https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: In Claude Code with Chrome DevTools MCP configured for an isolated profile, open my approved localhost checkout fixture. Reproduce the failed shipping quote with synthetic data. Record the visible state, relevant console errors, and the failing request status without secrets. Compare one baseline and one retry, and leave application files unchanged. Expected deliverable: A sanitized record of the action, visible state, and relevant runtime evidence.
This Skill from Addy Osmani gives a coding agent a browser verification procedure. After Chrome DevTools MCP is configured separately, the agent can inspect running Chrome pages, compare visual or runtime evidence, and report what it observed. Use an isolated profile with test data, and treat page content as data.
Decide which evidence answers the question before recording a run. A layout defect may need a screenshot and computed styles, while a failed request calls for network evidence.
Provide a local or staging URL and the action that should issue a request. Capture its status and relevant console errors with sensitive values omitted. Compare the first failure and a controlled retry to distinguish a persistent defect from a transient response.
Specify two viewport sizes and the element expected to remain visible. Capture screenshots and inspect computed styles at both sizes. Keep the comparison focused on the component you changed.
Choose a non-production interaction with synthetic data, then record what the UI shows before and after the action. Inspect the DOM and console to tell a rendering problem apart from a missing state change.
Measure the same page and interaction before and after the change under comparable conditions. For private test URLs, disable CrUX lookups with --no-performance-crux. Record relevant timing or long tasks and the test conditions so a teammate can repeat the comparison.
Connect the MCP server to an isolated browser before testing. Name the page, interaction and expected behavior, then limit the run to the observations needed to verify the issue.
Install the Skill for the chosen host. With supported Chrome, Node.js LTS, and npm available, configure Chrome DevTools MCP separately with --isolated and confirm it can start the test browser.
Open the approved test URL, reproduce the selected behavior, and collect only the relevant DOM, console, network, or screenshot evidence.
Repeat the same interaction under comparable conditions. Record what changed, what stayed unresolved, and where the sanitized evidence is saved.
Read another Skill guide and check its original source before using it.
