원클릭으로 Manus에서 모든 스킬 실행

playwright-cli

스타2

포크0

업데이트2026년 3월 23일 14:29

浏览器自动化 CLI 工具，使用 Playwright 控制浏览器进行网页操作。支持 Chrome、Firefox、Safari 多浏览器，支持导航、截图、点击、填写表单、执行 JavaScript 等操作。当用户需要：网页截图、打开网页、浏览器自动化、网页操作、点击元素、填写表单、测试网页、抓取网页数据时，**必须**使用此 Skill。相比 Puppeteer，Playwright 支持更多浏览器（Chrome/Firefox/Safari），更好的跨浏览器测试能力。特别适用于：跨浏览器测试、网页截图分析、表单自动填写、网页数据提取、网页测试。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Throokie

Throokie/claude-code-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

소프트웨어 개발자컴퓨터 및 수학직·SOC 15-1252

파일 탐색기

4 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

th-prd-driven-dev-workflow

Throokie/claude-code-skills

PRD 驱动的完整开发工作流 - 从用户故事分析到自动化测试的端到端流程。当用户需要"一条龙开发"、"全自动开发"、"从需求到代码"、"先分析PRD再开发"、 "多模型分析后自动开发"、"完整开发流程"、"从需求分析到测试"或任何涉及 PRD分析→需求整合→代码生成→自动化测试的连续工作时，**必须**使用此技能。整合多模型聚合、Kimi深度整合、PRD生成、多模型代码审查、代码开发、自动化测试等能力。 **新增**: 智能决策大脑(th-workflow-decision-engine) - 自动判断何时使用GitNexus代码分析、 unified-search联网搜索、多模型聚合，测试失败时智能选择修复策略。

2026-03-242

th-workflow-decision-engine

Throokie/claude-code-skills

PRD驱动工作流的决策大脑 - 智能判断何时使用搜索、代码分析、多模型聚合。作为子Skill被 th-prd-driven-dev-workflow 调用，负责工具选择和策略决策。

2026-03-242

agent-factory

Throokie/claude-code-skills

动态 Agent 生成器（母体模式）。当用户需要处理复杂项目时，自动分析需求并生成定制化专业 Agent 团队。接收项目描述、技术栈、版本号、约束条件，输出完整的 Agent 配置和启动命令。触发词：需要专业团队、生成 Agent、创建定制化 Agent、复杂项目团队、动态生成 Agent。

2026-03-232

arch-linux

Throokie/claude-code-skills

Arch Linux 系统特性（PEP 668、AUR Helpers）

2026-03-232

browser-use

Throokie/claude-code-skills

浏览器交互自动化：网页测试、表单填写、截图、数据提取。触发词：打开网页、填写表单、网页截图。

2026-03-232

code-review

Throokie/claude-code-skills

系统化代码审查：安全性、性能、可维护性、正确性、测试覆盖。触发词：代码审查、review 代码、PR 审查。

2026-03-232

name	playwright-cli
description	浏览器自动化 CLI 工具，使用 Playwright 控制浏览器进行网页操作。支持 Chrome、Firefox、Safari 多浏览器，支持导航、截图、点击、填写表单、执行 JavaScript 等操作。当用户需要：网页截图、打开网页、浏览器自动化、网页操作、点击元素、填写表单、测试网页、抓取网页数据时，必须使用此 Skill。相比 Puppeteer，Playwright 支持更多浏览器（Chrome/Firefox/Safari），更好的跨浏览器测试能力。特别适用于：跨浏览器测试、网页截图分析、表单自动填写、网页数据提取、网页测试。
triggers	["playwright","浏览器自动化","网页截图","打开网页","网页测试","点击网页","填写表单"]

Playwright CLI Skill

浏览器自动化 CLI 工具，封装 Playwright 功能，支持多浏览器（Chrome/Firefox/Safari），支持导航、截图、点击、填写表单等操作。

为什么选择 Playwright？

特性	Playwright	Puppeteer
浏览器支持	Chrome, Firefox, Safari	Chrome only
跨浏览器测试	✅ 原生支持	❌ 需额外配置
自动等待	✅ 内置智能等待	❌ 需手动处理
移动端模拟	✅ 完善的设备库	⚠️ 基础支持
稳定性	✅ 更稳定的API	⚠️ 偶有不稳定

安装依赖

npm install -g playwright
# 安装浏览器
npx playwright install chromium firefox webkit

或者本地安装：

npm install playwright
npx playwright install

使用方法

选项

选项	说明
`--headed`	使用有界面模式
`--headless`	使用无头模式（默认）
`--browser <name>`	选择浏览器: chromium/firefox/webkit (默认: chromium)
`--viewport <w>x<h>`	设置视口大小，如 1280x720
`--mobile <device>`	模拟移动设备，如 "iPhone 14"
`--slowmo <ms>`	慢动作执行，毫秒

导航到网页

# 默认 Chromium 无头模式
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com

# 有界面模式
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://github.com --headed

# 使用 Firefox
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --browser firefox

# 使用 Safari (WebKit)
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --browser webkit

截取屏幕截图

# 基本截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot myshot

# 全页面截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot myshot --fullpage

# 有界面模式（推荐用于复杂网站）
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot myshot --headed

# 自定义尺寸
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot myshot --viewport 1920x1080

# 移动端截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot mobile --mobile "iPhone 14"

# 跨浏览器截图（生成3张）
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot cross-browser --cross-browser

点击元素

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs click "button#submit"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs click "text=Login"

填写表单

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs fill "input[name=email]" "test@example.com"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs fill "#password" "secret123"

选择下拉菜单

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs select "select#country" "CN"

悬停元素

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs hover "div.menu-item"

执行 JavaScript

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs evaluate "document.title"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs evaluate "() => { return document.querySelectorAll('h1').length; }"

等待元素

# 等待元素可见
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait "#content" --state visible

# 等待元素隐藏
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait "#loading" --state hidden

# 等待超时
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait "#result" --timeout 10000

获取元素文本

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs text "h1"

获取元素属性

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs attr "img#logo" src

键盘操作

# 按下按键
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs press Enter
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs press "Control+a"

滚动页面

# 滚动到底部
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs scroll-to-bottom

# 滚动到元素
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs scroll-to "#footer"

跨浏览器测试

# 在3个浏览器上运行同一测试
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs cross-browser-test https://example.com \
  --actions 'navigate,screenshot,click "#btn",screenshot'

关闭浏览器

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs close

快捷别名建议

添加到 ~/.config/fish/config.fish 或 ~/.bashrc：

# Fish
alias playwright-cli="node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs"
alias pw="node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs"
alias pw-shot="node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot"
alias pw-nav="node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate"

# Bash/Zsh
alias playwright-cli='node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs'
alias pw='node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs'
alias pw-shot='node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot'
alias pw-nav='node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate'

环境变量

变量	说明
`PLAYWRIGHT_BROWSERS_PATH`	浏览器可执行文件路径
`PLAYWRIGHT_HEADLESS`	设置默认 headless 模式
`PLAYWRIGHT_SLOWMO`	慢动作执行毫秒数

完整命令列表

命令	别名	说明
`navigate <url>`	nav, goto	导航到 URL
`screenshot [name]`	shot, ss	截图
`click <selector>`	-	点击元素
`fill <selector> <value>`	type, input	填写输入框
`select <selector> <value>`	-	选择下拉菜单
`hover <selector>`	-	悬停元素
`evaluate <code>`	eval, js	执行 JS
`wait <selector>`	-	等待元素
`text <selector>`	-	获取文本
`attr <selector> <name>`	-	获取属性
`press <key>`	-	按下按键
`scroll-to <selector>`	-	滚动到元素
`scroll-to-bottom`	-	滚动到底部
`cross-browser-test <url>`	-	跨浏览器测试
`close`	exit, quit	关闭浏览器

使用场景示例

场景 1：跨浏览器截图对比

# 在 Chrome 中截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --browser chromium --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot chrome --fullpage

# 在 Firefox 中截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --browser firefox --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot firefox --fullpage

# 在 Safari 中截图
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --browser webkit --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot safari --fullpage

场景 2：移动端测试

# iPhone 14
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --mobile "iPhone 14" --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot iphone

# iPad
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --mobile "iPad Pro 11" --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot ipad

# Pixel 5
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --mobile "Pixel 5" --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot pixel

场景 3：自动化表单填写

# 导航到登录页
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com/login --headed

# 填写表单
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs fill "input#username" "myuser"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs fill "#password" "mypass"

# 点击登录
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs click "button[type=submit]"

# 等待加载
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait "#dashboard" --state visible

# 截图结果
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot logged-in --fullpage

场景 4：执行 JavaScript 获取数据

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs evaluate "() => {
  const links = Array.from(document.querySelectorAll('a'));
  return links.map(a => ({ text: a.textContent, href: a.href }));
}"

场景 5：完整 E2E 测试流程

node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --headed
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot 01-homepage
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs click "a[href='/products']"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait ".product-list"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot 02-products
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs click ".product-item:first-child"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs wait "#product-detail"
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs screenshot 03-product-detail

支持的移动设备

常见设备名称：

"iPhone 14", "iPhone 14 Pro", "iPhone 14 Pro Max"
"iPhone 13", "iPhone 13 Pro"
"iPhone SE"
"iPad Pro 11", "iPad Pro 12.9", "iPad Mini"
"Pixel 5", "Pixel 7", "Pixel 7 Pro"
"Galaxy S21", "Galaxy S22"

查看完整列表：

npx playwright devices

故障排除

浏览器未安装

# 安装所有浏览器
npx playwright install

# 或只安装特定浏览器
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

依赖缺失 (Linux)

# Ubuntu/Debian
sudo apt-get install libnss3 libatk-bridge2.0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2

# Arch Linux
sudo pacman -S nss at-spi2-atk libxcomposite libxdamage libxfixes libxrandr mesa alsa-lib

权限问题

# 给浏览器目录添加执行权限
chmod +x ~/.cache/ms-playwright/*/chrome-linux/chrome

内存不足

# 使用更轻量的配置
node ~/.claude/skills/playwright-cli/scripts/playwright-cli.mjs navigate https://example.com --headless

与 Puppeteer 对比

场景	推荐工具
只需要 Chrome 支持	Puppeteer
需要跨浏览器测试	Playwright
复杂 SPA 应用	Playwright（自动等待更好）
简单截图/抓取	两者皆可
移动端测试	Playwright（设备库更丰富）
CI/CD 集成	Playwright（更稳定）