Repository navigation
E2E: Add a browse command to drive the local site from the command line - #85525
Conversation
`npm run browse` keeps one browser open on the checkout's WordPress site. `open`, `new-post` and `blocks` use the e2e test utils; any other command goes to playwright-cli in the same browser. A new skill tells agents how to check a change with it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: 0 B Total Size: 8.56 MB
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Backspace in
|
`npm run browse -- <helper>.<method> [args]` now calls any method of `admin`, `editor`, `pageUtils` or `requestUtils`, in place of hand-written commands. `Admin` takes a `baseURL` like `RequestUtils` (the fixture passes the project's, `WP_BASE_URL` otherwise), so its navigation also works outside the test runner. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`npm run gb` maps readable commands to the e2e test utils: `new-post`, `edit-post`, `site-editor`, `content` (get or set), `blocks`, `insert`, `transform`, `keys`, `focus`, `save`, `publish`, and `api` for REST calls like curl. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`new-post` takes `content` as block markup and sets it with `editor.setContent()`, since WordPress escapes markup in the URL. `blocks` with an argument sets the blocks from the shape it prints. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`npm run browse -- gb <command>` runs our commands, so they read apart from playwright-cli's: `npm run browse -- click e12` still goes to playwright-cli, and `open` opens the shared browser. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Our commands run directly, like `npm run browse -- blocks`; any other command still goes to playwright-cli. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`npm run browse -- insert heading '{"level":3}'` inserts a core/heading;
names with a namespace are used as they are.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Back to passing the block straight to `editor.insertBlock()`, in the same shape `blocks` prints, nested blocks included. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`Admin` only builds full URLs from `baseURL` when it's passed in, so an `Admin` created by hand keeps following the browser context's `baseURL`. `browse` passes it, and the test fixture no longer needs to. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`browse` resolves `page.goto()` paths against `WP_BASE_URL` on the page it connects to, as the test fixture does, so `Admin` needs no new option and the published e2e test utils stay as they are on trunk. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Runs open, new-post, insert, blocks and api the way an agent does, and checks the blocks and the REST response exactly. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Let's try it, it's private and we can iterate as it gets used. |
What?
Adds
npm run browse, a way to drive a browser on the local WordPress site from the command line with the e2e test utils, plus abrowseagent skill that explains how to check a change with it.Why?
Agents (and people) checking a change by hand need to open the editor, set up content, use the keyboard and read back the result, one step at a time. Today that means writing a throwaway Playwright script or an e2e test for every check.
How?
snapshot,click,type,press,screenshot, ...) goes straight to it.npm run browse -- openopens the dashboard, logged in throughRequestUtils.setupRest().npm run browse -- <command>runs a curated list of readable commands that call the e2e test utils on the open page:new-post,edit-post,site-editor:Adminnavigation.new-postalso takescontentas block markup, set witheditor.setContent(), because WordPress escapes markup passed in the URL.content: prints the post's block markup, or sets it.blocks: prints the blocks with all attributes, as JSON, or sets them from the same shape.insert,transform,keys,focus,save,publish.api <method> <path> [data]: REST calls as admin, like curl, throughrequestUtils.rest().baseURL, sobrowseresolvespage.goto()paths againstWP_BASE_URLitself, as the test fixture already does for subdirectory installs. The e2e test utils are unchanged.test/e2e/artifacts/browsefolder.@playwright/clidepends on a pre-releaseplaywright-core(1.64.0-alpha).Testing Instructions
npm run wp-env-test start) or setWP_BASE_URLto another local site.npm run browse -- open: a browser opens on the dashboard, logged in.npm run browse -- new-post, thennpm run browse -- content '<!-- wp:paragraph --><p>Hi</p><!-- /wp:paragraph -->'.npm run browse -- contentprints the same markup.npm run browse -- insert '{"name":"core/heading"}',npm run browse -- focusprints the heading, thennpm run browse -- keys primary+z.npm run browse -- blocksprints only the paragraphHi.npm run browse -- snapshot,click <ref>,typeandpresswork on the same page.npm run browse -- api POST /wp/v2/posts '{"title":"Hi"}'prints the new post;npm run browse -- api GET /wp/v2/nopeprints WordPress's error message.npm run browse -- close, thennpm run browse -- blockssays no browser is open.Testing Instructions for Keyboard
No UI changes.
Use of AI Tools
Written with Claude Code (Claude Opus 5.5).
🤖 Generated with Claude Code