playwright-skill:释放浏览器自动化潜能的全栈解决方案
您是否曾遇到过这些困境:市场上的自动化工具要么功能单一无法满足复杂需求,要么配置繁琐需要专业开发技能?playwright-skill作为一款由Claude驱动的智能浏览器自动化技能,正通过AI赋能的方式重新定义自动化测试的边界。这款工具的核心价值在于将强大的Playwright浏览器自动化能力与Claude的AI逻辑推理相结合,实现了"描述即自动化"的全新体验。不同于传统工具需要手动编写和维
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', 'Test@123456');
await helpers.safeType(page, '#confirmPassword', 'Test@123456');
// 3. 提交表单并处理可能的验证码(如有)
await helpers.safeClick(page, 'button[type="submit"]', { 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 - 如果遇到权限问题:在命令前添加
sudo(Linux/macOS)或使用管理员命令提示符(Windows) - 如果浏览器无法启动:检查系统是否有图形界面支持,或添加
HEADLESS=true环境变量
模块化配置:自定义你的自动化流程
playwright-skill采用模块化设计,让您可以根据具体需求灵活配置自动化行为,无需修改核心代码。
环境变量配置
通过环境变量可以快速调整关键参数:
# 设置默认浏览器(chromium, firefox, webkit)
export PW_BROWSER=firefox
# 启用无头模式(后台运行,不显示浏览器窗口)
export HEADLESS=true
# 设置默认超时时间(毫秒)
export DEFAULT_TIMEOUT=60000
# 配置自定义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-testid="submit-button"]');
// 推荐:结合文本和角色(更语义化)
await page.getByRole('button', { name: /submit/i }).click();
// 推荐:链式定位(更精确)
await page.locator('form').locator('input[name="email"]').fill('test@example.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[name="username"]', process.env.SOCIAL_USERNAME);
await page.fill('input[name="password"]', process.env.SOCIAL_PASSWORD);
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
// 创建新帖子
await page.click('[data-testid="new-post"]');
await page.fill('[data-testid="post-content"]', '这是一条由playwright-skill自动发布的测试帖子 #自动化');
// 添加图片(如有)
if (process.env.POST_IMAGE) {
const fileInput = await page.$('input[type="file"]');
await fileInput.setInputFiles(process.env.POST_IMAGE);
await page.waitForSelector('[data-testid="image-preview"]');
}
// 发布帖子
await page.click('[data-testid="post-button"]');
await page.waitForSelector('[data-testid="post-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?q=test' },
{ 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[name="email"]', user.email);
await page.fill('input[name="password"]', user.password);
await page.fill('input[name="name"]', user.name);
await page.click('button[type="submit"]');
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来完成。
更多推荐




所有评论(0)