agentleFS
Sign inStart free
ThrookieThrookie/claude-code-skills/skills/playwright-cli/SKILL.md

playwright-cli

Skill1 starsChanged 8 months agoMITView on GitHub

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

  • Installs packages

180 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use fabric-sdk, ecosystem-reference and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • MicrosoftSkill

    fabric-sdk

    How to use @microsoft/fabric-app-data to connect web applications to Fabric data sources at runtime. Build browser-based apps that query semantic models via DAX using the FabricClient API.

    Also in 9 projects that use this

  • naman10parikhSkill

    ecosystem-reference

    Quick-access directory of Claude Code ecosystem repos, skills, plugins, MCPs, and patterns. Use when improving the harness.

    Also in 5 projects that use this

  • naman10parikhSkill

    fractal-delegation

    Also in 5 projects that use this

  • MicrosoftSkill

    schema-discovery

    Explore Power BI semantic model schemas using DAX INFO functions. Progressive metadata discovery strategy, scope estimation, and narrowing techniques for tables, columns, measures, and relationships.

    Also in 9 projects that use this

  • +6 more from naman10parikh
  • +2 more from microsoft

The file

Create a free account to mount
Files
SKILL.md

Playwright CLI Skill

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

为什么选择 Playwright？

特性PlaywrightPuppeteer
浏览器支持Chrome, Firefox, SafariChrome 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>-跨浏览器测试
closeexit, 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（更稳定）

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free