playwright-skill释放浏览器自动化潜能的全栈解决方案【免费下载链接】playwright-skillClaude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.项目地址: https://gitcode.com/gh_mirrors/pl/playwright-skill价值定位为何playwright-skill能重塑你的自动化测试流程您是否曾遇到过这些困境市场上的自动化工具要么功能单一无法满足复杂需求要么配置繁琐需要专业开发技能playwright-skill作为一款由Claude驱动的智能浏览器自动化技能正通过AI赋能的方式重新定义自动化测试的边界。这款工具的核心价值在于将强大的Playwright浏览器自动化能力与Claude的AI逻辑推理相结合实现了描述即自动化的全新体验。不同于传统工具需要手动编写和维护脚本playwright-skill让您只需用自然语言描述需求AI就能实时生成并执行自定义自动化流程。核心优势解析全场景覆盖从简单的页面截图到复杂的多步骤业务流程无需预定义脚本模板 零配置启动智能环境检测与自动依赖管理降低技术门槛 ⚠️安全可靠内置资源隔离与自动清理机制避免测试环境污染场景化应用3大业务场景的自动化解决方案1. 响应式设计验证方案适用场景电商网站多终端兼容性测试实施步骤描述需要测试的页面URL和关键元素指定需要验证的设备尺寸组合定义截图对比和视觉差异检测规则示例代码// 响应式设计测试自动化脚本 const { chromium } require(playwright); (async () { // 启动可见浏览器便于观察执行过程 const browser await chromium.launch({ headless: false, slowMo: 200 }); const context await browser.newContext(); // 定义需要测试的设备配置 const viewports [ { name: mobile, width: 375, height: 667 }, { name: tablet, width: 768, height: 1024 }, { name: desktop, width: 1920, height: 1080 } ]; // 测试目标URL可通过自动检测开发服务器获取 const targetUrl https://example.com/product-listing; for (const viewport of viewports) { // 创建新页面并设置视口尺寸 const page await context.newPage(); await page.setViewportSize({ width: viewport.width, height: viewport.height }); // 导航到目标页面并等待加载完成 await page.goto(targetUrl); await page.waitForLoadState(networkidle); // 验证关键元素是否可见 const criticalElements [ header nav, .product-grid, .filter-sidebar, footer ]; for (const selector of criticalElements) { await page.waitForSelector(selector, { state: visible, timeout: 10000 }); console.log(✅ ${viewport.name}: 元素 ${selector} 可见); } // 截取全页面截图 await page.screenshot({ path: /tmp/responsive-${viewport.name}.png, fullPage: true }); await page.close(); } await browser.close(); console.log( 响应式测试完成截图已保存至/tmp目录); })();预期效果自动在不同设备尺寸下验证页面关键元素可见性并生成带有设备标签的对比截图帮助开发团队快速定位响应式布局问题。2. 用户旅程自动化方案适用场景会员注册到下单的完整流程测试实施步骤梳理关键用户旅程节点与验证点设置测试数据与环境变量配置错误处理与重试机制示例代码// 用户注册-登录-下单完整流程测试 const { chromium } require(playwright); const helpers require(./lib/helpers); (async () { // 使用辅助函数检测开发服务器 const servers await helpers.detectDevServers(); if (servers.length 0) { console.error(❌ 未检测到运行中的开发服务器); return; } // 选择第一个可用服务器 const baseUrl servers[0].url; console.log( 已检测到开发服务器: ${baseUrl}); // 启动浏览器 const browser await chromium.launch({ headless: false }); const page await browser.newPage(); try { // 1. 导航到注册页面 await page.goto(${baseUrl}/register); await page.waitForLoadState(domcontentloaded); // 2. 填写注册表单使用安全输入辅助函数 const testEmail test_${Date.now()}example.com; await helpers.safeType(page, #email, testEmail); await helpers.safeType(page, #password, Test123456); await helpers.safeType(page, #confirmPassword, Test123456); // 3. 提交表单并处理可能的验证码如有 await helpers.safeClick(page, button[typesubmit], { retries: 2 }); // 4. 等待注册成功并重定向 await page.waitForURL(${baseUrl}/dashboard); console.log(✅ 注册成功并已跳转至仪表板); // 5. 导航到产品页面 await page.goto(${baseUrl}/products); // 6. 选择第一个产品并加入购物车 await helpers.safeClick(page, .product-card:first-child .add-to-cart, { retries: 3, delay: 500 }); // 7. 验证购物车通知 await page.waitForSelector(.cart-notification, { state: visible }); console.log(✅ 产品已成功添加到购物车); // 8. 进入购物车并结算 await page.click(.cart-icon); await page.waitForURL(${baseUrl}/cart); await helpers.safeClick(page, button.checkout); // 9. 填写配送信息 await page.fill(#shipping-address, 测试地址); await page.fill(#phone, 13800138000); await helpers.safeClick(page, button.continue); // 10. 完成订单 await page.waitForURL(${baseUrl}/payment); await helpers.safeClick(page, button.place-order); // 11. 验证订单成功 await page.waitForSelector(.order-success, { state: visible }); const orderNumber await page.textContent(.order-number); console.log(✅ 订单创建成功订单号: ${orderNumber}); // 12. 截取成功页面 await helpers.takeScreenshot(page, order-completed); } catch (error) { console.error(❌ 自动化过程中发生错误:, error.message); // 出错时自动截图 await helpers.takeScreenshot(page, error-occurred); } finally { // 确保浏览器总是关闭 await browser.close(); } })();预期效果模拟真实用户从注册到下单的完整流程自动处理动态内容加载和交互延迟在关键节点生成验证截图帮助测试团队发现流程中的断点和异常。3. 数据提取与验证方案适用场景竞品价格监控与数据对比实施步骤定义目标网站与数据提取规则配置数据存储与比较逻辑设置定时执行与报告生成机制示例代码// 电商平台产品价格监控脚本 const { chromium } require(playwright); const helpers require(./lib/helpers); const fs require(fs); const path require(path); // 存储历史数据的文件路径 const DATA_FILE /tmp/price-history.json; // 目标监控URL与选择器配置 const监控目标 [ { name: 竞争对手A, url: https://competitor-a.com/best-sellers, productSelector: .product-item, nameSelector: .product-title, priceSelector: .product-price }, { name: 竞争对手B, url: https://competitor-b.com/top-products, productSelector: .item-card, nameSelector: .title, priceSelector: .price-current } ]; // 读取历史数据 function read历史数据() { try { if (fs.existsSync(DATA_FILE)) { return JSON.parse(fs.readFileSync(DATA_FILE, utf8)); } return {}; } catch (error) { console.error(读取历史数据失败:, error); return {}; } } // 保存当前数据 function save当前数据(data) { try { fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2)); console.log( 价格数据已保存); } catch (error) { console.error(保存数据失败:, error); } } // 比较价格变化 function compare价格变化(历史数据, 当前数据, 平台名称) { const changes []; if (!历史数据[平台名称]) { return changes; // 无历史数据不比较 } for (const product of 当前数据) { const 历史记录 历史数据[平台名称].find( item item.name product.name ); if (历史记录 历史记录.price ! product.price) { const difference (product.price - 历史记录.price).toFixed(2); const changePercent ((difference / 历史记录.price) * 100).toFixed(1); changes.push({ name: product.name, oldPrice: 历史记录.price, newPrice: product.price, difference, changePercent }); } } return changes; } (async () { const browser await chromium.launch({ headless: true }); // 无头模式提高性能 const page await browser.newPage(); // 配置请求拦截加速页面加载 await page.route(**/*.{png,jpg,jpeg,svg,css}, route { route.abort(); // 阻止加载图片和样式表 }); const 历史数据 read历史数据(); const 结果数据 {}; const 价格变化报告 []; try { for (const target of 监控目标) { console.log( 正在抓取 ${target.name} 数据...); 结果数据[target.name] []; await page.goto(target.url); await page.waitForLoadState(networkidle); // 处理可能的Cookie提示 await helpers.handleCookieBanner(page); // 提取产品列表 const products await page.$$eval(target.productSelector, (items, selectors) { return items.map(item { const nameEl item.querySelector(selectors.nameSelector); const priceEl item.querySelector(selectors.priceSelector); if (!nameEl || !priceEl) return null; // 提取并清理价格数值 const priceText priceEl.textContent.trim().replace(/[^0-9.]/g, ); const price parseFloat(priceText); return { name: nameEl.textContent.trim(), price: isNaN(price) ? null : price, timestamp: new Date().toISOString() }; }).filter(Boolean); // 过滤无效数据 }, target); // 将target作为参数传递给$$eval 结果数据[target.name] products; // 比较价格变化 const changes compare价格变化(历史数据, products, target.name); if (changes.length 0) { 价格变化报告.push({ platform: target.name, changes }); } console.log(✅ ${target.name} 数据抓取完成共 ${products.length} 个产品); } // 生成价格变化报告 if (价格变化报告.length 0) { console.log(\n 价格变化报告:); for (const report of 价格变化报告) { console.log(\n${report.platform}:); for (const change of report.changes) { const trend change.difference 0 ? 上涨 : 下跌; console.log(${change.name}: ${change.oldPrice} → ${change.newPrice} (${trend}${Math.abs(change.changePercent)}%)); } } } else { console.log(\n 未发现价格变化); } // 保存当前数据用于下次比较 save当前数据(结果数据); } catch (error) { console.error(数据抓取过程中出错:, error); } finally { await browser.close(); } })();预期效果定期从指定电商平台提取产品价格数据自动比较价格变化并生成报告帮助企业监控市场动态和竞争对手定价策略及时调整自身价格策略。零基础部署指南5分钟快速启动自动化测试您是否担心技术复杂而犹豫尝试自动化测试playwright-skill提供了极简的部署流程即使是非技术人员也能在5分钟内完成安装并运行第一个自动化任务。准备工作系统要求支持Windows、macOS或Linux操作系统已安装Node.js (v14.0.0或更高版本)网络连接用于下载依赖一键部署流程# 1. 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/pl/playwright-skill.git # 2. 进入技能目录 cd playwright-skill/skills/playwright-skill # 3. 运行安装脚本自动处理所有依赖 npm run setup安装成功的标志看到Setup completed successfully消息且无任何错误提示。验证安装# 运行演示自动化脚本测试基本功能 node run.js demo⚠️常见问题解决如果提示playwright未安装运行npx playwright install如果遇到权限问题在命令前添加sudoLinux/macOS或使用管理员命令提示符Windows如果浏览器无法启动检查系统是否有图形界面支持或添加HEADLESStrue环境变量模块化配置自定义你的自动化流程playwright-skill采用模块化设计让您可以根据具体需求灵活配置自动化行为无需修改核心代码。环境变量配置通过环境变量可以快速调整关键参数# 设置默认浏览器chromium, firefox, webkit export PW_BROWSERfirefox # 启用无头模式后台运行不显示浏览器窗口 export HEADLESStrue # 设置默认超时时间毫秒 export DEFAULT_TIMEOUT60000 # 配置自定义HTTP头用于身份验证或特殊标识 export PW_EXTRA_HEADERS{X-Test-Id:automation-123,X-Environment:testing}配置文件详解项目根目录下的config.json文件提供更细粒度的配置{ defaultBrowser: chromium, headless: false, slowMo: 100, timeout: 30000, screenshotPath: /tmp/playwright-screenshots, videoRecording: false, devServerDetection: { enabled: true, ports: [3000, 3001, 8080, 4000], timeout: 5000 }, retryPolicy: { enabled: true, maxRetries: 2, retryDelay: 1000 } }配置技巧创建多个配置文件如config.dev.json、config.prod.json通过CONFIG_FILE环境变量切换不同环境配置。深度实践提升自动化成功率的高级技巧智能等待策略避免使用固定延迟setTimeout采用Playwright的智能等待机制// 不推荐固定延迟 await page.waitForTimeout(3000); // 不可靠可能等待过久或不足 // 推荐等待元素可见 await page.waitForSelector(#submit-button, { state: visible, timeout: 10000 }); // 推荐等待网络空闲 await page.waitForLoadState(networkidle); // 推荐等待URL变化 await page.waitForURL(**/success);定位器最佳实践使用更健壮的选择器提高元素定位可靠性// 不推荐依赖CSS类名易变 await page.click(.btn-primary); // 推荐使用数据属性专为测试设计 await page.click([data-testidsubmit-button]); // 推荐结合文本和角色更语义化 await page.getByRole(button, { name: /submit/i }).click(); // 推荐链式定位更精确 await page.locator(form).locator(input[nameemail]).fill(testexample.com);错误处理与恢复机制为关键操作添加重试和错误处理async function safeAction(action, retries 3, delay 1000) { let attempts 0; while (attempts retries) { try { return await action(); } catch (error) { attempts; if (attempts retries) throw error; console.log(操作失败正在重试${attempts}/${retries}); await new Promise(resolve setTimeout(resolve, delay)); } } } // 使用示例 await safeAction(() page.click(#critical-action), 3, 2000);常见业务场景模板库1. 社交媒体自动发帖// 社交媒体自动发帖脚本 const { chromium } require(playwright); (async () { const browser await chromium.launch({ headless: false }); const page await browser.newPage(); try { // 登录社交媒体 await page.goto(https://social-media.example.com/login); await page.fill(input[nameusername], process.env.SOCIAL_USERNAME); await page.fill(input[namepassword], process.env.SOCIAL_PASSWORD); await page.click(button[typesubmit]); await page.waitForURL(**/dashboard); // 创建新帖子 await page.click([data-testidnew-post]); await page.fill([data-testidpost-content], 这是一条由playwright-skill自动发布的测试帖子 #自动化); // 添加图片如有 if (process.env.POST_IMAGE) { const fileInput await page.$(input[typefile]); await fileInput.setInputFiles(process.env.POST_IMAGE); await page.waitForSelector([data-testidimage-preview]); } // 发布帖子 await page.click([data-testidpost-button]); await page.waitForSelector([data-testidpost-success]); console.log(✅ 帖子发布成功); } catch (error) { console.error(❌ 发帖失败:, error); } finally { await browser.close(); } })();2. 内容网站自动截图存档// 网页自动截图存档脚本 const { chromium } require(playwright); const fs require(fs); const path require(path); // 要存档的页面列表 const PAGES_TO_ARCHIVE [ { url: https://example.com/article-1, name: article-1 }, { url: https://example.com/article-2, name: article-2 }, { url: https://example.com/article-3, name: article-3 } ]; // 创建存档目录 const ARCHIVE_DIR path.join(__dirname, archive, new Date().toISOString().split(T)[0]); if (!fs.existsSync(ARCHIVE_DIR)) { fs.mkdirSync(ARCHIVE_DIR, { recursive: true }); } (async () { const browser await chromium.launch({ headless: true }); const context await browser.newContext({ viewport: { width: 1920, height: 1080 } }); for (const pageInfo of PAGES_TO_ARCHIVE) { const page await context.newPage(); try { console.log( 正在存档: ${pageInfo.url}); await page.goto(pageInfo.url); await page.waitForLoadState(networkidle); // 滚动到页面底部以加载所有内容 await page.evaluate(() { window.scrollTo(0, document.body.scrollHeight); }); await page.waitForTimeout(2000); // 截取全页面截图 const screenshotPath path.join(ARCHIVE_DIR, ${pageInfo.name}.png); await page.screenshot({ path: screenshotPath, fullPage: true }); console.log(✅ 已保存: ${screenshotPath}); // 可选保存页面HTML const htmlPath path.join(ARCHIVE_DIR, ${pageInfo.name}.html); const htmlContent await page.content(); fs.writeFileSync(htmlPath, htmlContent); } catch (error) { console.error(❌ 存档 ${pageInfo.url} 失败:, error.message); } finally { await page.close(); } } await browser.close(); console.log( 存档完成共处理 ${PAGES_TO_ARCHIVE.length} 个页面); })();性能优化指南提升自动化执行效率自动化脚本的执行效率直接影响开发和测试流程的效率。以下是提升playwright-skill执行性能的关键策略1. 并行执行测试利用Playwright的并行测试能力同时运行多个独立的测试任务// 并行测试执行示例 const { chromium } require(playwright); const { PromisePool } require(supercharge/promise-pool); // 测试任务列表 const TEST_TASKS [ { name: 首页加载测试, url: https://example.com }, { name: 产品页测试, url: https://example.com/products }, { name: 搜索功能测试, url: https://example.com/search?qtest }, { name: 登录流程测试, url: https://example.com/login } ]; // 限制并发数根据系统性能调整 const CONCURRENCY 2; async function runTest(task) { const browser await chromium.launch({ headless: true }); const page await browser.newPage(); try { console.log(开始测试: ${task.name}); const startTime Date.now(); await page.goto(task.url); await page.waitForLoadState(networkidle); const loadTime Date.now() - startTime; console.log(完成测试: ${task.name} (加载时间: ${loadTime}ms)); return { task: task.name, success: true, loadTime }; } catch (error) { console.error(测试失败: ${task.name}, error.message); return { task: task.name, success: false, error: error.message }; } finally { await browser.close(); } } (async () { const startTime Date.now(); // 使用PromisePool实现并行执行 const { results, errors } await PromisePool .withConcurrency(CONCURRENCY) .for(TEST_TASKS) .process(async (task) { return await runTest(task); }); const totalTime Date.now() - startTime; // 输出测试摘要 console.log(\n 测试摘要:); console.log(总测试数: ${TEST_TASKS.length}); console.log(成功数: ${results.filter(r r.success).length}); console.log(失败数: ${results.filter(r !r.success).length}); console.log(总执行时间: ${totalTime}ms); console.log(平均加载时间: ${results .filter(r r.success) .reduce((sum, r) sum r.loadTime, 0) / results.filter(r r.success).length || 0}ms); })();2. 资源优化策略通过限制不必要的资源加载加速页面测试// 优化资源加载示例 const { chromium } require(playwright); (async () { const browser await chromium.launch({ headless: true }); // 创建上下文时配置资源拦截 const context await browser.newContext({ // 限制页面缓存大小 cacheSize: 0, // 设置用户代理 userAgent: playwright-skill/1.0 (Automated Testing) }); // 拦截并阻止非必要资源 await context.route(**/*, route { const request route.request(); // 阻止图片加载 if (request.resourceType() image) { return route.abort(); } // 阻止第三方脚本 if (request.resourceType() script !request.url().startsWith(https://example.com)) { return route.abort(); } // 阻止广告请求 if (request.url().includes(ad.)) { return route.abort(); } // 允许其他所有请求 route.continue(); }); const page await context.newPage(); const startTime Date.now(); await page.goto(https://example.com); await page.waitForLoadState(networkidle); const loadTime Date.now() - startTime; console.log(页面加载完成耗时: ${loadTime}ms); await browser.close(); })();3. 测试数据管理合理管理测试数据避免重复创建和清理// 测试数据管理示例 const { chromium } require(playwright); const fs require(fs); const path require(path); // 测试数据缓存文件 const TEST_DATA_CACHE path.join(__dirname, test-data-cache.json); // 获取或创建测试用户 async function getTestUser(page) { // 检查缓存 if (fs.existsSync(TEST_DATA_CACHE)) { try { const cache JSON.parse(fs.readFileSync(TEST_DATA_CACHE, utf8)); if (cache.expires Date.now()) { console.log(使用缓存的测试用户); return cache.user; } } catch (error) { console.log(缓存读取失败将创建新用户); } } // 缓存不存在或已过期创建新用户 console.log(创建新测试用户); const timestamp Date.now(); const user { email: test_${timestamp}example.com, password: Test${timestamp}, name: Test User ${timestamp % 1000} }; // 注册新用户 await page.goto(/register); await page.fill(input[nameemail], user.email); await page.fill(input[namepassword], user.password); await page.fill(input[namename], user.name); await page.click(button[typesubmit]); await page.waitForURL(/dashboard); // 缓存用户数据有效期24小时 fs.writeFileSync(TEST_DATA_CACHE, JSON.stringify({ user, expires: Date.now() 24 * 60 * 60 * 1000 })); return user; } (async () { const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://example.com); const user await getTestUser(page); console.log(使用测试用户: ${user.email}); // 后续测试逻辑... await browser.close(); })();通过这些高级优化技巧您可以显著提升playwright-skill的执行效率减少测试时间同时保持测试的准确性和可靠性。总结开启智能自动化之旅playwright-skill通过AI驱动的自动化能力正在改变传统的浏览器测试和自动化方式。无论您是需要快速验证网站功能、定期监控竞争对手动态还是自动化重复性的网页操作这款工具都能为您提供简单而强大的解决方案。通过本文介绍的价值定位、场景化应用、模块化配置和深度实践指南您已经具备了充分利用playwright-skill的知识。从零基础部署到高级性能优化从简单截图到复杂的用户旅程自动化playwright-skill都能成为您工作流程中的得力助手。现在就开始您的智能自动化之旅吧只需描述您的需求剩下的交给playwright-skill来完成。【免费下载链接】playwright-skillClaude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.项目地址: https://gitcode.com/gh_mirrors/pl/playwright-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
playwright-skill：释放浏览器自动化潜能的全栈解决方案
发布时间：2026/5/26 17:09:04
playwright-skill释放浏览器自动化潜能的全栈解决方案【免费下载链接】playwright-skillClaude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.项目地址: https://gitcode.com/gh_mirrors/pl/playwright-skill价值定位为何playwright-skill能重塑你的自动化测试流程您是否曾遇到过这些困境市场上的自动化工具要么功能单一无法满足复杂需求要么配置繁琐需要专业开发技能playwright-skill作为一款由Claude驱动的智能浏览器自动化技能正通过AI赋能的方式重新定义自动化测试的边界。这款工具的核心价值在于将强大的Playwright浏览器自动化能力与Claude的AI逻辑推理相结合实现了描述即自动化的全新体验。不同于传统工具需要手动编写和维护脚本playwright-skill让您只需用自然语言描述需求AI就能实时生成并执行自定义自动化流程。核心优势解析全场景覆盖从简单的页面截图到复杂的多步骤业务流程无需预定义脚本模板 零配置启动智能环境检测与自动依赖管理降低技术门槛 ⚠️安全可靠内置资源隔离与自动清理机制避免测试环境污染场景化应用3大业务场景的自动化解决方案1. 响应式设计验证方案适用场景电商网站多终端兼容性测试实施步骤描述需要测试的页面URL和关键元素指定需要验证的设备尺寸组合定义截图对比和视觉差异检测规则示例代码// 响应式设计测试自动化脚本 const { chromium } require(playwright); (async () { // 启动可见浏览器便于观察执行过程 const browser await chromium.launch({ headless: false, slowMo: 200 }); const context await browser.newContext(); // 定义需要测试的设备配置 const viewports [ { name: mobile, width: 375, height: 667 }, { name: tablet, width: 768, height: 1024 }, { name: desktop, width: 1920, height: 1080 } ]; // 测试目标URL可通过自动检测开发服务器获取 const targetUrl https://example.com/product-listing; for (const viewport of viewports) { // 创建新页面并设置视口尺寸 const page await context.newPage(); await page.setViewportSize({ width: viewport.width, height: viewport.height }); // 导航到目标页面并等待加载完成 await page.goto(targetUrl); await page.waitForLoadState(networkidle); // 验证关键元素是否可见 const criticalElements [ header nav, .product-grid, .filter-sidebar, footer ]; for (const selector of criticalElements) { await page.waitForSelector(selector, { state: visible, timeout: 10000 }); console.log(✅ ${viewport.name}: 元素 ${selector} 可见); } // 截取全页面截图 await page.screenshot({ path: /tmp/responsive-${viewport.name}.png, fullPage: true }); await page.close(); } await browser.close(); console.log( 响应式测试完成截图已保存至/tmp目录); })();预期效果自动在不同设备尺寸下验证页面关键元素可见性并生成带有设备标签的对比截图帮助开发团队快速定位响应式布局问题。2. 用户旅程自动化方案适用场景会员注册到下单的完整流程测试实施步骤梳理关键用户旅程节点与验证点设置测试数据与环境变量配置错误处理与重试机制示例代码// 用户注册-登录-下单完整流程测试 const { chromium } require(playwright); const helpers require(./lib/helpers); (async () { // 使用辅助函数检测开发服务器 const servers await helpers.detectDevServers(); if (servers.length 0) { console.error(❌ 未检测到运行中的开发服务器); return; } // 选择第一个可用服务器 const baseUrl servers[0].url; console.log( 已检测到开发服务器: ${baseUrl}); // 启动浏览器 const browser await chromium.launch({ headless: false }); const page await browser.newPage(); try { // 1. 导航到注册页面 await page.goto(${baseUrl}/register); await page.waitForLoadState(domcontentloaded); // 2. 填写注册表单使用安全输入辅助函数 const testEmail test_${Date.now()}example.com; await helpers.safeType(page, #email, testEmail); await helpers.safeType(page, #password, Test123456); await helpers.safeType(page, #confirmPassword, Test123456); // 3. 提交表单并处理可能的验证码如有 await helpers.safeClick(page, button[typesubmit], { retries: 2 }); // 4. 等待注册成功并重定向 await page.waitForURL(${baseUrl}/dashboard); console.log(✅ 注册成功并已跳转至仪表板); // 5. 导航到产品页面 await page.goto(${baseUrl}/products); // 6. 选择第一个产品并加入购物车 await helpers.safeClick(page, .product-card:first-child .add-to-cart, { retries: 3, delay: 500 }); // 7. 验证购物车通知 await page.waitForSelector(.cart-notification, { state: visible }); console.log(✅ 产品已成功添加到购物车); // 8. 进入购物车并结算 await page.click(.cart-icon); await page.waitForURL(${baseUrl}/cart); await helpers.safeClick(page, button.checkout); // 9. 填写配送信息 await page.fill(#shipping-address, 测试地址); await page.fill(#phone, 13800138000); await helpers.safeClick(page, button.continue); // 10. 完成订单 await page.waitForURL(${baseUrl}/payment); await helpers.safeClick(page, button.place-order); // 11. 验证订单成功 await page.waitForSelector(.order-success, { state: visible }); const orderNumber await page.textContent(.order-number); console.log(✅ 订单创建成功订单号: ${orderNumber}); // 12. 截取成功页面 await helpers.takeScreenshot(page, order-completed); } catch (error) { console.error(❌ 自动化过程中发生错误:, error.message); // 出错时自动截图 await helpers.takeScreenshot(page, error-occurred); } finally { // 确保浏览器总是关闭 await browser.close(); } })();预期效果模拟真实用户从注册到下单的完整流程自动处理动态内容加载和交互延迟在关键节点生成验证截图帮助测试团队发现流程中的断点和异常。3. 数据提取与验证方案适用场景竞品价格监控与数据对比实施步骤定义目标网站与数据提取规则配置数据存储与比较逻辑设置定时执行与报告生成机制示例代码// 电商平台产品价格监控脚本 const { chromium } require(playwright); const helpers require(./lib/helpers); const fs require(fs); const path require(path); // 存储历史数据的文件路径 const DATA_FILE /tmp/price-history.json; // 目标监控URL与选择器配置 const监控目标 [ { name: 竞争对手A, url: https://competitor-a.com/best-sellers, productSelector: .product-item, nameSelector: .product-title, priceSelector: .product-price }, { name: 竞争对手B, url: https://competitor-b.com/top-products, productSelector: .item-card, nameSelector: .title, priceSelector: .price-current } ]; // 读取历史数据 function read历史数据() { try { if (fs.existsSync(DATA_FILE)) { return JSON.parse(fs.readFileSync(DATA_FILE, utf8)); } return {}; } catch (error) { console.error(读取历史数据失败:, error); return {}; } } // 保存当前数据 function save当前数据(data) { try { fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2)); console.log( 价格数据已保存); } catch (error) { console.error(保存数据失败:, error); } } // 比较价格变化 function compare价格变化(历史数据, 当前数据, 平台名称) { const changes []; if (!历史数据[平台名称]) { return changes; // 无历史数据不比较 } for (const product of 当前数据) { const 历史记录 历史数据[平台名称].find( item item.name product.name ); if (历史记录 历史记录.price ! product.price) { const difference (product.price - 历史记录.price).toFixed(2); const changePercent ((difference / 历史记录.price) * 100).toFixed(1); changes.push({ name: product.name, oldPrice: 历史记录.price, newPrice: product.price, difference, changePercent }); } } return changes; } (async () { const browser await chromium.launch({ headless: true }); // 无头模式提高性能 const page await browser.newPage(); // 配置请求拦截加速页面加载 await page.route(**/*.{png,jpg,jpeg,svg,css}, route { route.abort(); // 阻止加载图片和样式表 }); const 历史数据 read历史数据(); const 结果数据 {}; const 价格变化报告 []; try { for (const target of 监控目标) { console.log( 正在抓取 ${target.name} 数据...); 结果数据[target.name] []; await page.goto(target.url); await page.waitForLoadState(networkidle); // 处理可能的Cookie提示 await helpers.handleCookieBanner(page); // 提取产品列表 const products await page.$$eval(target.productSelector, (items, selectors) { return items.map(item { const nameEl item.querySelector(selectors.nameSelector); const priceEl item.querySelector(selectors.priceSelector); if (!nameEl || !priceEl) return null; // 提取并清理价格数值 const priceText priceEl.textContent.trim().replace(/[^0-9.]/g, ); const price parseFloat(priceText); return { name: nameEl.textContent.trim(), price: isNaN(price) ? null : price, timestamp: new Date().toISOString() }; }).filter(Boolean); // 过滤无效数据 }, target); // 将target作为参数传递给$$eval 结果数据[target.name] products; // 比较价格变化 const changes compare价格变化(历史数据, products, target.name); if (changes.length 0) { 价格变化报告.push({ platform: target.name, changes }); } console.log(✅ ${target.name} 数据抓取完成共 ${products.length} 个产品); } // 生成价格变化报告 if (价格变化报告.length 0) { console.log(\n 价格变化报告:); for (const report of 价格变化报告) { console.log(\n${report.platform}:); for (const change of report.changes) { const trend change.difference 0 ? 上涨 : 下跌; console.log(${change.name}: ${change.oldPrice} → ${change.newPrice} (${trend}${Math.abs(change.changePercent)}%)); } } } else { console.log(\n 未发现价格变化); } // 保存当前数据用于下次比较 save当前数据(结果数据); } catch (error) { console.error(数据抓取过程中出错:, error); } finally { await browser.close(); } })();预期效果定期从指定电商平台提取产品价格数据自动比较价格变化并生成报告帮助企业监控市场动态和竞争对手定价策略及时调整自身价格策略。零基础部署指南5分钟快速启动自动化测试您是否担心技术复杂而犹豫尝试自动化测试playwright-skill提供了极简的部署流程即使是非技术人员也能在5分钟内完成安装并运行第一个自动化任务。准备工作系统要求支持Windows、macOS或Linux操作系统已安装Node.js (v14.0.0或更高版本)网络连接用于下载依赖一键部署流程# 1. 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/pl/playwright-skill.git # 2. 进入技能目录 cd playwright-skill/skills/playwright-skill # 3. 运行安装脚本自动处理所有依赖 npm run setup安装成功的标志看到Setup completed successfully消息且无任何错误提示。验证安装# 运行演示自动化脚本测试基本功能 node run.js demo⚠️常见问题解决如果提示playwright未安装运行npx playwright install如果遇到权限问题在命令前添加sudoLinux/macOS或使用管理员命令提示符Windows如果浏览器无法启动检查系统是否有图形界面支持或添加HEADLESStrue环境变量模块化配置自定义你的自动化流程playwright-skill采用模块化设计让您可以根据具体需求灵活配置自动化行为无需修改核心代码。环境变量配置通过环境变量可以快速调整关键参数# 设置默认浏览器chromium, firefox, webkit export PW_BROWSERfirefox # 启用无头模式后台运行不显示浏览器窗口 export HEADLESStrue # 设置默认超时时间毫秒 export DEFAULT_TIMEOUT60000 # 配置自定义HTTP头用于身份验证或特殊标识 export PW_EXTRA_HEADERS{X-Test-Id:automation-123,X-Environment:testing}配置文件详解项目根目录下的config.json文件提供更细粒度的配置{ defaultBrowser: chromium, headless: false, slowMo: 100, timeout: 30000, screenshotPath: /tmp/playwright-screenshots, videoRecording: false, devServerDetection: { enabled: true, ports: [3000, 3001, 8080, 4000], timeout: 5000 }, retryPolicy: { enabled: true, maxRetries: 2, retryDelay: 1000 } }配置技巧创建多个配置文件如config.dev.json、config.prod.json通过CONFIG_FILE环境变量切换不同环境配置。深度实践提升自动化成功率的高级技巧智能等待策略避免使用固定延迟setTimeout采用Playwright的智能等待机制// 不推荐固定延迟 await page.waitForTimeout(3000); // 不可靠可能等待过久或不足 // 推荐等待元素可见 await page.waitForSelector(#submit-button, { state: visible, timeout: 10000 }); // 推荐等待网络空闲 await page.waitForLoadState(networkidle); // 推荐等待URL变化 await page.waitForURL(**/success);定位器最佳实践使用更健壮的选择器提高元素定位可靠性// 不推荐依赖CSS类名易变 await page.click(.btn-primary); // 推荐使用数据属性专为测试设计 await page.click([data-testidsubmit-button]); // 推荐结合文本和角色更语义化 await page.getByRole(button, { name: /submit/i }).click(); // 推荐链式定位更精确 await page.locator(form).locator(input[nameemail]).fill(testexample.com);错误处理与恢复机制为关键操作添加重试和错误处理async function safeAction(action, retries 3, delay 1000) { let attempts 0; while (attempts retries) { try { return await action(); } catch (error) { attempts; if (attempts retries) throw error; console.log(操作失败正在重试${attempts}/${retries}); await new Promise(resolve setTimeout(resolve, delay)); } } } // 使用示例 await safeAction(() page.click(#critical-action), 3, 2000);常见业务场景模板库1. 社交媒体自动发帖// 社交媒体自动发帖脚本 const { chromium } require(playwright); (async () { const browser await chromium.launch({ headless: false }); const page await browser.newPage(); try { // 登录社交媒体 await page.goto(https://social-media.example.com/login); await page.fill(input[nameusername], process.env.SOCIAL_USERNAME); await page.fill(input[namepassword], process.env.SOCIAL_PASSWORD); await page.click(button[typesubmit]); await page.waitForURL(**/dashboard); // 创建新帖子 await page.click([data-testidnew-post]); await page.fill([data-testidpost-content], 这是一条由playwright-skill自动发布的测试帖子 #自动化); // 添加图片如有 if (process.env.POST_IMAGE) { const fileInput await page.$(input[typefile]); await fileInput.setInputFiles(process.env.POST_IMAGE); await page.waitForSelector([data-testidimage-preview]); } // 发布帖子 await page.click([data-testidpost-button]); await page.waitForSelector([data-testidpost-success]); console.log(✅ 帖子发布成功); } catch (error) { console.error(❌ 发帖失败:, error); } finally { await browser.close(); } })();2. 内容网站自动截图存档// 网页自动截图存档脚本 const { chromium } require(playwright); const fs require(fs); const path require(path); // 要存档的页面列表 const PAGES_TO_ARCHIVE [ { url: https://example.com/article-1, name: article-1 }, { url: https://example.com/article-2, name: article-2 }, { url: https://example.com/article-3, name: article-3 } ]; // 创建存档目录 const ARCHIVE_DIR path.join(__dirname, archive, new Date().toISOString().split(T)[0]); if (!fs.existsSync(ARCHIVE_DIR)) { fs.mkdirSync(ARCHIVE_DIR, { recursive: true }); } (async () { const browser await chromium.launch({ headless: true }); const context await browser.newContext({ viewport: { width: 1920, height: 1080 } }); for (const pageInfo of PAGES_TO_ARCHIVE) { const page await context.newPage(); try { console.log( 正在存档: ${pageInfo.url}); await page.goto(pageInfo.url); await page.waitForLoadState(networkidle); // 滚动到页面底部以加载所有内容 await page.evaluate(() { window.scrollTo(0, document.body.scrollHeight); }); await page.waitForTimeout(2000); // 截取全页面截图 const screenshotPath path.join(ARCHIVE_DIR, ${pageInfo.name}.png); await page.screenshot({ path: screenshotPath, fullPage: true }); console.log(✅ 已保存: ${screenshotPath}); // 可选保存页面HTML const htmlPath path.join(ARCHIVE_DIR, ${pageInfo.name}.html); const htmlContent await page.content(); fs.writeFileSync(htmlPath, htmlContent); } catch (error) { console.error(❌ 存档 ${pageInfo.url} 失败:, error.message); } finally { await page.close(); } } await browser.close(); console.log( 存档完成共处理 ${PAGES_TO_ARCHIVE.length} 个页面); })();性能优化指南提升自动化执行效率自动化脚本的执行效率直接影响开发和测试流程的效率。以下是提升playwright-skill执行性能的关键策略1. 并行执行测试利用Playwright的并行测试能力同时运行多个独立的测试任务// 并行测试执行示例 const { chromium } require(playwright); const { PromisePool } require(supercharge/promise-pool); // 测试任务列表 const TEST_TASKS [ { name: 首页加载测试, url: https://example.com }, { name: 产品页测试, url: https://example.com/products }, { name: 搜索功能测试, url: https://example.com/search?qtest }, { name: 登录流程测试, url: https://example.com/login } ]; // 限制并发数根据系统性能调整 const CONCURRENCY 2; async function runTest(task) { const browser await chromium.launch({ headless: true }); const page await browser.newPage(); try { console.log(开始测试: ${task.name}); const startTime Date.now(); await page.goto(task.url); await page.waitForLoadState(networkidle); const loadTime Date.now() - startTime; console.log(完成测试: ${task.name} (加载时间: ${loadTime}ms)); return { task: task.name, success: true, loadTime }; } catch (error) { console.error(测试失败: ${task.name}, error.message); return { task: task.name, success: false, error: error.message }; } finally { await browser.close(); } } (async () { const startTime Date.now(); // 使用PromisePool实现并行执行 const { results, errors } await PromisePool .withConcurrency(CONCURRENCY) .for(TEST_TASKS) .process(async (task) { return await runTest(task); }); const totalTime Date.now() - startTime; // 输出测试摘要 console.log(\n 测试摘要:); console.log(总测试数: ${TEST_TASKS.length}); console.log(成功数: ${results.filter(r r.success).length}); console.log(失败数: ${results.filter(r !r.success).length}); console.log(总执行时间: ${totalTime}ms); console.log(平均加载时间: ${results .filter(r r.success) .reduce((sum, r) sum r.loadTime, 0) / results.filter(r r.success).length || 0}ms); })();2. 资源优化策略通过限制不必要的资源加载加速页面测试// 优化资源加载示例 const { chromium } require(playwright); (async () { const browser await chromium.launch({ headless: true }); // 创建上下文时配置资源拦截 const context await browser.newContext({ // 限制页面缓存大小 cacheSize: 0, // 设置用户代理 userAgent: playwright-skill/1.0 (Automated Testing) }); // 拦截并阻止非必要资源 await context.route(**/*, route { const request route.request(); // 阻止图片加载 if (request.resourceType() image) { return route.abort(); } // 阻止第三方脚本 if (request.resourceType() script !request.url().startsWith(https://example.com)) { return route.abort(); } // 阻止广告请求 if (request.url().includes(ad.)) { return route.abort(); } // 允许其他所有请求 route.continue(); }); const page await context.newPage(); const startTime Date.now(); await page.goto(https://example.com); await page.waitForLoadState(networkidle); const loadTime Date.now() - startTime; console.log(页面加载完成耗时: ${loadTime}ms); await browser.close(); })();3. 测试数据管理合理管理测试数据避免重复创建和清理// 测试数据管理示例 const { chromium } require(playwright); const fs require(fs); const path require(path); // 测试数据缓存文件 const TEST_DATA_CACHE path.join(__dirname, test-data-cache.json); // 获取或创建测试用户 async function getTestUser(page) { // 检查缓存 if (fs.existsSync(TEST_DATA_CACHE)) { try { const cache JSON.parse(fs.readFileSync(TEST_DATA_CACHE, utf8)); if (cache.expires Date.now()) { console.log(使用缓存的测试用户); return cache.user; } } catch (error) { console.log(缓存读取失败将创建新用户); } } // 缓存不存在或已过期创建新用户 console.log(创建新测试用户); const timestamp Date.now(); const user { email: test_${timestamp}example.com, password: Test${timestamp}, name: Test User ${timestamp % 1000} }; // 注册新用户 await page.goto(/register); await page.fill(input[nameemail], user.email); await page.fill(input[namepassword], user.password); await page.fill(input[namename], user.name); await page.click(button[typesubmit]); await page.waitForURL(/dashboard); // 缓存用户数据有效期24小时 fs.writeFileSync(TEST_DATA_CACHE, JSON.stringify({ user, expires: Date.now() 24 * 60 * 60 * 1000 })); return user; } (async () { const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://example.com); const user await getTestUser(page); console.log(使用测试用户: ${user.email}); // 后续测试逻辑... await browser.close(); })();通过这些高级优化技巧您可以显著提升playwright-skill的执行效率减少测试时间同时保持测试的准确性和可靠性。总结开启智能自动化之旅playwright-skill通过AI驱动的自动化能力正在改变传统的浏览器测试和自动化方式。无论您是需要快速验证网站功能、定期监控竞争对手动态还是自动化重复性的网页操作这款工具都能为您提供简单而强大的解决方案。通过本文介绍的价值定位、场景化应用、模块化配置和深度实践指南您已经具备了充分利用playwright-skill的知识。从零基础部署到高级性能优化从简单截图到复杂的用户旅程自动化playwright-skill都能成为您工作流程中的得力助手。现在就开始您的智能自动化之旅吧只需描述您的需求剩下的交给playwright-skill来完成。【免费下载链接】playwright-skillClaude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.项目地址: https://gitcode.com/gh_mirrors/pl/playwright-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
的时间序列预测 优化参数为储备池规模，学习率)
