Skip to main content

快速开始

🌐 Quick Start

互动演示​

🌐 Interactive demo

试着问问你的编码代理：

🌐 Try asking your coding agent:

Use playwright skills to test https://demo.playwright.dev/todomvc/.
Take screenshots for all successful and failing scenarios.

手动演练​

🌐 Manual walkthrough

手动运行命令以了解 CLI 的工作原理：

🌐 Run commands manually to see how the CLI works:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli screenshot

理解输出​

🌐 Understanding the output

每条命令执行后，CLI 会输出当前页面状态的快照：

🌐 After each command, the CLI outputs a snapshot of the current page state:


### Page

- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React - TodoMVC

### Snapshot

[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)

快照文件包含可用于后续命令的带有元素引用的无障碍树。

🌐 The snapshot file contains the accessibility tree with element refs that can be used for subsequent commands.

核心工作流程​

🌐 Core workflow

每次互动都遵循这个模式：

🌐 Every interaction follows this pattern:

  1. 打开 — playwright-cli open <url> 打开一个 URL
  2. 快照 — 每个命令都会返回带有元素引用的可访问性树
  3. 交互 — 使用 refs 点击、输入或填写
  4. 重新快照 — 每个操作都会返回带有新引用的更新状态

下一步是什么​

🌐 What's next