What this walkthrough covers
This is a documentation-based setup guide and an original testing exercise. We have not installed every MCP client or run this integration across their versions. Follow the maintainer’s client-specific configuration, then use the exercise below to check your own installation. Examples target a local disposable application.
Connect the browser tool
- Confirm that you have Node.js 18 or newer and an MCP-capable client. Read the current repository requirements if your environment differs.
- Open that client’s MCP configuration. The repository documents the example below; some clients use a different enclosing schema.
- Restart or reconnect as required by your client. Confirm that the server appears and its browser tools are available before assigning a task.
- Use an isolated browser profile with no personal sessions for this exercise.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}The example follows the upstream quickstart, which resolves the current package through npx. Record the installed package version when documenting a reproducible result. The maintainer also offers a CLI/skills workflow; MCP is one integration choice, not a requirement for all browser tests.
Give the agent a bounded journey
Use the project-brief builder on a local copy of InfoIsland as a simple target. Replace the address below with your local server URL.
Open my local project-brief builder in an isolated browser.
1. Check that Download is disabled before there is a generated brief.
2. Use Load example, then check that the preview names Reading list.
3. Edit the goal. Confirm that the old preview is cleared.
4. Generate again and verify the changed goal appears.
5. Reset and check that answers and preview are cleared.
Report each observed result. Do not claim a check passed if you only clicked.
Do not visit other sites, sign in, or publish anything.What useful evidence looks like
For each step, record the action, expected state and observed state. A download check should inspect the resulting file, not just the presence of a download button. A screenshot can demonstrate the preview layout, while a text assertion can establish that an edited goal is included. These answer different questions.
Ask the agent to inspect browser errors when something fails. Separate an application error from a tool that never connected. Keep the smallest reproducible journey and the relevant error message; a long transcript of clicks is less useful than a clear failing example.
Turn findings into regression checks
Once the journey works, add an ordinary Playwright test for the important state transitions. MCP exploration helps discover what to assert; a test file lets you repeat it after code changes. Include a narrow viewport and keyboard interaction when the form is important to the task.
Do not use real payments, accounts or production data as a convenient test fixture. If the target is an app you own, seed a small development dataset and reset it between runs. Start with one journey and broaden coverage when it exposes a real risk.
If the tool does not connect
- Check the client’s exact configuration format instead of copying another editor’s wrapper.
- Confirm that Node and npx are available to the client process, not only to a separate terminal.
- Read the server log for startup and browser-installation errors.
- Check the repository’s current notes on browser profiles and connection modes.
For a wider workflow, use the repository collection to pair exploratory browser work with unit tests, validation and accessibility checks.