36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
|
# Developing Dashboard
|
||
|
|
|
||
|
|
`packages/dashboard` contains the sourcecode behind `playwright cli show`,
|
||
|
|
a dashboard that allow supervising agents while they use playwright cli.
|
||
|
|
|
||
|
|
Important code paths:
|
||
|
|
|
||
|
|
- `packages/dashboard` has the UI
|
||
|
|
- `dashboardController.ts` has the backend
|
||
|
|
- `show` section in `cli-client/program.ts`
|
||
|
|
|
||
|
|
You can use Playwright CLI to look at the dashboard:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# start the dashboard server in the background
|
||
|
|
npx playwright cli show --port=0
|
||
|
|
|
||
|
|
# open it with Playwright CLI
|
||
|
|
npx playwright cli open --session=dashboard localhost:PORT
|
||
|
|
npx playwright cli snapshot
|
||
|
|
|
||
|
|
# take screenshots to look at UI stuff
|
||
|
|
npx playwright cli screenshot
|
||
|
|
|
||
|
|
# take videos to showcase you work!
|
||
|
|
npx playwright cli video-start video.webm
|
||
|
|
|
||
|
|
# chapters are not everything - look at video-recording.md to learn about overlays, much more powerful! embrace creativity.
|
||
|
|
npx playwright cli video-chapter "Chapter Title" --description="Details" --duration=2000
|
||
|
|
npx playwright cli video-stop
|
||
|
|
|
||
|
|
# afterwards, use ffmpeg to turn the video into mp4 for sharing.
|
||
|
|
```
|
||
|
|
|
||
|
|
Full CLI reference: `packages/playwright-core/src/tools/cli-client/skill/SKILL.md`. In this repo, invoke as `npx playwright cli` instead of `playwright-cli`.
|