Tvijo wiki
Catalog

Topics

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.

🎯 For Developers and QA leads connecting an editor agent to a staging web app and reviewing what browser checks actually prove.

πŸ“š You will learn
  • 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Sources

Source links and observation dates are recorded below. Review status is stated for each material.

  1. Microsoft: Playwright MCP repository and README Β· Checked 2026-10-30 Β· Browser automation, accessibility snapshots, documented tools, runtime requirements, CLI flags and profile behavior.
  2. Microsoft: Playwright MCP configuration schema Β· Checked 2026-10-30 Β· In-memory isolated profiles, persistent profile configuration and browser launch options.
  3. VS Code: Add MCP servers Β· Checked 2026-10-30 Β· Command Palette setup, Command (stdio), runtime prerequisites, approvals and verification of the first tool call.
  4. Playwright: Assertions Β· Checked 2026-10-30 Β· Explicit expect assertions and web assertions that retry until success or timeout.
  5. Playwright: Trace Viewer Β· Checked 2026-10-30 Β· Recording and inspecting test actions, DOM snapshots, console output and network requests.
  6. Playwright: Visual comparisons Β· Checked 2026-10-30 Β· Screenshot assertions, reference baselines and rendering differences across environments.
  7. Model Context Protocol: Security Best Practices Β· Checked 2026-10-30 Β· Local MCP server command review, consent, minimal privileges, sandboxing and restricted system access.

πŸ”— Article connections

Open the full knowledge graph β†—

Published article links. Select a node to open its article at the heading.

100%
β†’ Linked articles← Linked fromβ‹― Same topic
Article links Β· keyboard / text view

πŸ’¬ Comments

Comments are public and moderated. Do not post personal data.
  • No comments yet. Be the first!

Next steps