Open a page in the container's browser, at a viewport you choose
Build App / compute-version (pull_request) Successful in 4s
Build App / build-macos (pull_request) Successful in 2m31s
Build App / build-linux (pull_request) Successful in 5m14s
Build App / build-windows (pull_request) Successful in 5m56s
Build App / create-tag (pull_request) Skipped
Build App / sync-to-github (pull_request) Skipped
Build App / compute-version (pull_request) Successful in 4s
Build App / build-macos (pull_request) Successful in 2m31s
Build App / build-linux (pull_request) Successful in 5m14s
Build App / build-windows (pull_request) Successful in 5m56s
Build App / create-tag (pull_request) Skipped
Build App / sync-to-github (pull_request) Skipped
The pane could only ever watch a browser something else had published. This opens one: a URL and a viewport, launched inside the container and bound so the pane picks it up. Two uses, one action — a sign-in page, where the callback listener is *in* the container and the loop closes with no host round trip and no auth bridge, and a dev server on container loopback, which is how you watch a UI Claude is building. Reachable from both places the question comes up: "Open a page…" in the Browser tab, and an "In container" button on the terminal's URL prompt. Verified first, because it decided the design: a second client cannot join a bound browser. `chromium.connect()` against the published endpoint times out in every URL form (`ws+unix://…`, with and without the trailing path) — that socket speaks the dashboard's own transport, not the public connect protocol. Whoever launches is therefore the only process that can drive, so the helper is resident and holds the handle, and live resize applies to pages we opened and never to `@playwright/mcp`'s. Those take `--viewport-size` / `PLAYWRIGHT_MCP_VIEWPORT_SIZE` at launch, which the docs now say. The viewport is the interesting half. Resizing the *window* does nothing to the page — the viewer is a CDP screencast, so a bigger window is the same pixels drawn larger, which is why pages have been looking like they were rendered small. `page.setViewportSize()` genuinely reflows: measured against a `@media (max-width: 900px)` rule, it fires at 800×600 and clears at 1440×900. Match-window mode pushes the pop-out's settled size into it, debounced by generation counter because a drag emits `Resized` continuously and each one costs a container exec. Control is a polled JSON file in /tmp: no port, no second listener, nothing added to the proxy's surface, and URLs travel as argv to `node` so no shell ever parses one. A re-open with a helper already up navigates instead of relaunching — otherwise the second page would throw away the session the first one just signed into. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
+25
-1
@@ -280,11 +280,35 @@ Press **Start browser view** and the pane fills with Playwright's own dashboard,
|
||||
container and reached over a token-gated listener on your machine's loopback address. Nothing is
|
||||
exposed off the machine.
|
||||
|
||||
#### Opening a page yourself
|
||||
|
||||
**Open a page…** launches a browser inside the container at a URL and viewport you choose, and
|
||||
publishes it to this pane. Two uses:
|
||||
|
||||
- **A sign-in page.** The callback the tool is waiting for is a listener *inside* the container, so
|
||||
a container-side browser completes the login without anything crossing to your host browser.
|
||||
When a long URL appears in a terminal, the prompt that offers to open it on your host now also
|
||||
offers **In container**, which does the same thing in one click.
|
||||
- **A dev server.** `http://localhost:5173` inside the container is reachable with no port mapping
|
||||
and nothing exposed to your network — which is how you watch a UI Claude is building, and click
|
||||
around it yourself.
|
||||
|
||||
The **viewport** is the page's own resolution, and it is not the same thing as the window size.
|
||||
The pane shows a video of the browser, so a bigger window draws the same pixels larger; changing
|
||||
the viewport is what makes the layout actually reflow. Pick a preset or type a size.
|
||||
|
||||
Note the limit, because it is not obvious: a browser Claude opened through `@playwright/mcp` can
|
||||
be *watched* but not resized — a published browser admits only the client that launched it. Set
|
||||
its size with `PLAYWRIGHT_MCP_VIEWPORT_SIZE=1920x1080` in the project's environment variables
|
||||
instead.
|
||||
|
||||
#### Watching it while you work
|
||||
|
||||
Press **Open in own window** and the view moves out of the tab into a window of its own — put it on
|
||||
a second monitor, or turn on **Keep on top** and let it float above the app while you work in a
|
||||
terminal. This is a window change only: the browser and the view keep running throughout, so
|
||||
terminal. **Match window** goes further: the page's viewport follows the window as you drag it, so
|
||||
the pop-out becomes a responsive-design ruler. It applies to pages opened with **Open a page…**,
|
||||
for the reason above. This is a window change only: the browser and the view keep running throughout, so
|
||||
popping out and back costs nothing and interrupts nothing.
|
||||
|
||||
While the view is in its own window the tab shows a placeholder rather than a second copy of it —
|
||||
|
||||
Reference in New Issue
Block a user