关于 browser-automation
面向测试应用界面和诊断浏览器问题的开发者,提供浏览器自动化实践与 Playwright 示例。指南强调使用现有工具、基于用户可见内容定位,并区分自动化检查与业务结果验证。
主要功能
- 01使用用户可见内容定位元素
- 02隔离 Playwright 测试上下文
- 03检查页面状态与下载结果
- 04考虑视口、键盘和焦点行为
- 05谨慎处理重试和敏感证据
适用场景
- 01验证应用中的浏览器工作流
- 02诊断界面时序故障
- 03检查文件导出内容
- 04在获授权范围内收集页面数据
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ sickn33/ agentic-awesome-skills --skill browser-automation安装后在 Claude Code 中输入/browser-automation确认已加载。
附带文件references/detailed-guide.md
详细介绍
浏览器自动化
使用用户已选定或项目中已安装的浏览器工具。Playwright、Puppeteer 和 Selenium 的集成方式各不相同;请根据实际需求进行选择,而不是依据未经支持的声称成功率。由 AAS 维护者于 2026-09-05 修改:移除了未经核实的比较和绕过默认设置,并明确了等待和证据限制。
将你控制的应用程序的测试与对现有已认证浏览器的交互区分开来。不要用全新的未认证会话替代后者,也不要为了完成自动化测试而提取凭据。
详细指南
在执行此技能之前,请阅读详细指南。其中保留了完整的流程和参考资料。请将其安全性、前提条件和验证要求视为强制要求。对于聚焦的工作,加载相关章节;对于端到端的工作,请完整阅读该指南。
Playwright 测试示例
""" import { test, expect } from '@playwright/test';
// Each test runs in isolated browser context test('user can add item to cart', async ({ page }) => { // Fresh context - no cookies, no storage from other tests await page.goto('/products'); await page.getByRole('button', { name: 'Add to Cart' }).click(); await expect(page.getByTestId('cart-count')).toHaveText('1'); });
test('user can remove item from cart', async ({ page }) => { // Completely isolated - cart is empty await page.goto('/cart'); await expect(page.getByText('Your cart is empty')).toBeVisible(); }); """
好示例(面向用户)
""" // By role - THE BEST CHOICE await page.getByRole('button', { name: 'Submit' }).click(); await page.getByRole('link', { name: 'Sign up' }).click(); await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible(); await page.getByRole('textbox', { name: 'Search' }).fill('query');
// By text content await expect(page.getByText('Welcome back')).toBeVisible(); await page.getByText(/Order #\d+/).click(); // Regex supported
// By label (forms) await page.getByLabel('Email address').fill('[email protected]'); await page.getByLabel('Password').fill('secret');
// By placeholder await page.getByPlaceholder('Search...').fill('query');
// By test ID (when no user-facing option works) await page.getByTestId('submit-button').click(); """
坏示例(脆弱)
""" // DON'T - CSS selectors tied to structure await page.locator('.btn-primary.submit-form').click(); await page.locator('#header > div > button:nth-child(2)').click();
// DON'T - XPath tied to structure await page.locator('//div[@class="form"]/button[1]').click();
// DON'T - Auto-generated selectors await page.locator('[data-v-12345]').click(); """
何时使用
用于验证真实的浏览器工作流、诊断 UI 时序故障,或收集明确获得授权的页面数据。在选择定位器或操作之前,先检查当前页面和可用的工具 API。
完整示例和前提条件
输入:从本地 Web 应用导出经过审查的 JSON 文件。让应用处于运行状态,准备好预期的浏览器和一个合成表单值。观察导出控件,在点击之前注册下载事件,检查下载的 JSON,并确认编辑输入会使旧预览失效。预期结果:一个包含经过审查值的文件,且没有隐藏的项目数据或网络提交。
当任务包含可用性时,使用明确的桌面/移动视口并检查键盘/焦点行为。锁定的桌面会使得交互验证处于待定状态;单元测试和无头探测是独立的证据。
限制
- 自动等待检查的是可操作性,而不是业务正确性或后端写入是否成功。
- 截图、HTML、追踪记录和认证状态文件可能包含私密信息;仅采集授权范围内的内容。
- 重试读取操作通常是安全的;重试结账、删除或发送消息可能会重复产生副作用。重复操作前请先核实状态。
- 屏蔽资源和模拟响应会改变环境,无法验证未经修改的生产行为。
- 示例需要项目自身的导入、运行器和 fixture 路由;此技能不会安装任何浏览器、服务或账号。