build(web): replace Playwright MCP with project-scoped Playwright CLI
- feat: add `.agents/skills/playwright-cli/` with complete Skill markdown, agent interface, and 9 reference files covering session management, spec-driven testing, video recording, tracing, storage, request mocking, element attributes, test debugging, and running custom code - feat: add `.playwright/cli.config.json` to configure the Playwright CLI - feat: add `web/package.json` `playwright:cli` script that resolves `playwright cli` from the repo root - build: remove `@playwright/mcp` dependency from `web/package.json` - build: set `XDG_CACHE_HOME` in `mise.toml` - build: delete `.codex/config.toml` (MCP server config) - docs: update `README.md`, `docs/web/roadmap.md`, `docs/web/decisions.md`, and `web/README.md` to reflect the new Playwright CLI approach
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
# Inspecting Element Attributes
|
||||
|
||||
When the snapshot doesn't show an element's `id`, `class`, `data-*` attributes, or other DOM properties, use `eval` to inspect them.
|
||||
|
||||
## Examples
|
||||
|
||||
```bash
|
||||
mise exec -- npm run playwright:cli -- snapshot
|
||||
# snapshot shows a button as e7 but doesn't reveal its id or data attributes
|
||||
|
||||
# get the element's id
|
||||
mise exec -- npm run playwright:cli -- eval "el => el.id" e7
|
||||
|
||||
# get all CSS classes
|
||||
mise exec -- npm run playwright:cli -- eval "el => el.className" e7
|
||||
|
||||
# get a specific attribute
|
||||
mise exec -- npm run playwright:cli -- eval "el => el.getAttribute('data-testid')" e7
|
||||
mise exec -- npm run playwright:cli -- eval "el => el.getAttribute('aria-label')" e7
|
||||
|
||||
# get a computed style property
|
||||
mise exec -- npm run playwright:cli -- eval "el => getComputedStyle(el).display" e7
|
||||
```
|
||||
Reference in New Issue
Block a user