Playwright MCP: let an agent test your web app in a real browser
Connect Playwright MCP to an editor agent, test a staging workflow, and retain evidence of clicks and assertions. Learn safe setup, headless options, and limits.
🎯 Для Developers and QA leads connecting an editor agent to a staging web app and reviewing what browser checks actually prove.
- Connect Playwright MCP through an editor client
- Choose headless and isolated browser modes
- Define assertions and retain execution evidence
- Recognize browser testing limits and Tvijo's role
Цю сторінку ще не перекладено. Ви читаєте англійський оригінал.
Playwright MCP is a browser MCP server that lets an AI agent interact with a real browser through structured accessibility snapshots. It can support an AI agent end-to-end test workflow: explore a page, perform actions, then use explicit checks to evaluate the result. The official Microsoft repository documents the server; the quality of the test still depends on what you ask it to prove.
What it can do
Use the browser connection for a concrete user journey. A useful starting assignment is a staging profile form: enter a synthetic display name, save it, reload the page, and check whether the name remains. Define the expected behavior before the agent starts.
The documented tools include navigation, clicks, text entry, accessibility snapshots, screenshots, and console and network inspection. See the official tool reference, checked 30 Oct 2026. For your workflow, turn those capabilities into separate questions:
- Can a signed-out visitor reach the sign-in screen?
- Does an invalid form show the expected validation message?
- Does a saved preference survive a reload?
- Does cancelling an edit leave the previous value intact?
These are proposed scenarios, not reports of tests already performed. Give each scenario an expected outcome and a disposable account.
For background, read what MCP connects and how MCP differs from an API or function call. More application connectors are in the MCP servers for apps category.
How to connect it safely
The following setup follows the VS Code connection guide, checked 30 Oct 2026. Other editor clients have their own configuration format.
- Prepare the target. Start your app locally or choose staging. Use synthetic data and an account with only the permissions needed for the scenario. State which URLs and actions are in scope, including whether submitting a form is allowed.
- Check the runtime. The documented prerequisite is Node.js 18 or newer, with npx available, as of 30 Oct 2026. Check the current documentation for browser installation and platform requirements before connecting.
- Register the server. In VS Code, open the Command Palette, run MCP: Add Server, and choose Command (stdio). Use the publisher's launch command, with the testing options discussed below:
npx @playwright/mcp@latest --isolated --headless. Give the server a distinct ID and choose a configuration destination appropriate to your editor session. Review the resolved package version; pin a reviewed version for repeatable team use. - Review execution access. Inspect the command and arguments before accepting startup or tool approvals. Keep secrets out of chat. Apply filesystem and network restrictions through the execution environment. The MCP security guidance, checked 30 Oct 2026, recommends restricted privileges and reviewing local server commands.
- Prove the connection. Ask the agent to use Playwright MCP to open your staging URL and report its title without submitting anything. Expand the tool call and inspect its returned output. Confirm that the call came from the intended server.
- Run a bounded scenario. Authorize the profile-form journey separately. Ask the agent to retain observations, write a repeatable test in your project, and run it using your project's test workflow. Review the changed file and actual test output before accepting the result.
A useful task brief names the target, starting state, permitted actions, expected result, stop condition, and required evidence. For example: stop if the account already contains real customer data; report the obstruction instead of switching accounts or environments.
Choose headless and isolated modes deliberately
As documented on 30 Oct 2026, --headless runs without a visible browser window; the default is headed. --isolated keeps the browser profile in memory. Closing that browser loses its session state. A persistent profile retains login state and cannot be shared by concurrent browser instances. See the profile documentation and configuration schema.
Use isolated mode when a fresh session is part of the test. Remove --headless when you need to watch the browser during diagnosis. Neither option limits the agent's authority over the host or makes a form submission harmless.
Make the result reviewable
Ask the agent to distinguish an action from an assertion. Clicking Save is an action; checking the saved value after reloading is an assertion about behavior. Playwright Test provides explicit assertions, including web assertions that retry until their condition succeeds or times out. See assertions, checked 30 Oct 2026.
For the profile scenario, request an evidence record like this:
| Record | What to retain |
|---|---|
| Target | Staging URL, application revision and test account role |
| Actions | Fields changed, controls clicked and reload performed |
| Assertions | Expected value, observed value and pass or failure |
| Execution | Test file, command, output and relevant artifacts |
| Limits | Paths and conditions left untested |
This is a proposed receipt format. Fill it from actual execution. Record a blocked step as blocked, and preserve failures rather than replacing assertions with easier expectations.
For a saved Playwright Test run, Trace Viewer can expose actions, DOM snapshots, console messages and network requests. Enable trace recording deliberately and review artifacts for sensitive information before sharing them.
When this does not work
The browser cannot reach the app. A server running in a remote environment may have a different network view from your laptop. Check reachability from where the browser actually runs.
The starting state is wrong. A fresh session may be signed out; reused state may hide an authentication defect. Specify which state the scenario requires and stop if it cannot be established.
The page looks successful but the requirement remains unproved. A confirmation banner does not establish database durability, email delivery, authorization enforcement, or correct payment settlement. Add separately authorized backend or service evidence when those are acceptance criteria.
A structural check is being treated as visual approval. An accessibility snapshot is not a pixel comparison. Playwright Test supports screenshot comparisons, but rendering varies with the environment; use reviewed baselines and consistent conditions. See visual comparisons, checked 30 Oct 2026.
The scope is broader than the evidence. A passing journey does not establish complete coverage, security, usability, or correctness for every role and browser. Treat unfamiliar page text as data, and retain approval boundaries. Read the MCP server security checklist before widening access.
Where Tvijo fits
As of 30 Oct 2026, the DSHREM VS Code extension is an editor entry point for scoped work and task receipts. TvijoCode is a test build with the extension embedded; it is not evidence of a ready Playwright integration.
Tvijo MCP exposes Tvijo consultation to a compatible client. Its prepared diff-review functionality reviews supplied changes; it does not run tests. Editor integration and delegation remain planned work in that release description.
For the workflow described here, use a separately configured, authorized browser-capable agent to write and run checks. Attach its execution evidence to the task so the combined receipt shows what was clicked and asserted. The usage receipt alone does not establish browser behavior. This is a workflow to configure and verify, not an advertised built-in Playwright connection.
As of 30 Oct 2026, the Tvijo workspace shows Try at $0: up to 5 tasks, 50,000 tokens or $0.05 of sponsored usage, whichever is reached first, funded from a shared $1 daily pool supplied by TVIJO. Service credit is shown at $10 for requesting prepaid credit, with metered provider usage plus an 8% service markup. Payment collection is not activated; an order is not a charge.
FAQ
Does connecting Playwright MCP create an end-to-end test suite?
No. Define scenarios and assertions, then have the authorized coding agent save and execute tests. Review both the code and the execution evidence.
Does isolated mode prevent changes to the website?
No. It concerns browser profile state. A permitted action can still change the target application; use staging and disposable accounts.
Can the receipt prove the whole app works?
It can document the checks actually performed and their outcomes. Keep untested requirements explicit and require additional evidence for broader acceptance.
Playwright is a trademark of its owner. Tvijo is not affiliated with or endorsed by it.
Джерела
Нижче наведено джерела та дати спостережень. Статус перевірки зазначено для кожного матеріалу.
🔗 Зв'язки статті
Відкрити повний граф знань ↗Зв’язки опублікованих статей. Виберіть вузол, щоб відкрити статтю біля заголовка.
Зв’язки статей · клавіатура / текст
Та сама тема
- n8n and MCP: expose workflows to agents or call MCP tools
- Zapier MCP: thousands of app actions, with a short allowlist
- Discord MCP: community context with moderation kept human
- Telegram and MCP: bots, channels and human-controlled sending
- Dropbox and MCP: file context for agents, with sharing under control
- monday.com MCP: board context for agents, human control of changes
Наступні кроки
Пов'язані матеріали
n8n and MCP: expose workflows to agents or call MCP tools
Choose between MCP Server Trigger, MCP Client and MCP Client Tool in n8n, then connect with clear authentication, workflow boundaries and recovery rules.
MCP servers for popular appsZapier MCP: thousands of app actions, with a short allowlist
Connect Zapier MCP to your editor, use managed mode to limit actions, configure destinations and understand task usage before running a bounded pilot.
MCP servers for popular appsDiscord MCP: community context with moderation kept human
Compare community Discord MCP servers, check bot permissions and intents, and prepare summaries and drafts while people retain posting and moderation.
MCP servers for popular appsTelegram and MCP: bots, channels and human-controlled sending
Compare community Telegram MCP servers, bot and account access, content-use rules and a practical workflow where agents draft and people send.
💬 Коментарі