作为研究生或开发者，我们每天都在和浏览器打交道——填表格、截图、批量下载文件、自动化测试...这些重复性操作耗费了大量时间。今天来介绍一款强大的浏览器自动化工具：Playwright。

为什么选择 Playwright？

Playwright 是微软开源的浏览器自动化框架，相比 Selenium 和 Puppeteer，它有以下优势：

• 原生支持等待 - 自动等待元素加载完成，减少 flaky tests
• 多浏览器支持 - Chromium、Firefox、WebKit 一套代码多端运行
• 强大的调试工具 - 内置 Playwright Inspector，调试超方便
• 现代 API 设计 - Promise 风格，代码简洁易读

快速开始

首先安装 Playwright：

npm init playwright@latest

或者在已有项目中添加：

npm install -D @playwright/test
npx playwright install chromium

第一个自动化脚本

让我们来实现一个简单的场景：自动打开搜索引擎，输入关键词，获取结果。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  // 打开搜索引擎
  await page.goto('https://www.bing.com');
  
  // 输入搜索关键词
  await page.fill('input[name="q"]', 'Playwright 教程');
  
  // 点击搜索按钮
  await page.click('input[type="submit"]');
  
  // 等待结果加载
  await page.waitForLoadState('networkidle');
  
  // 获取搜索结果标题
  const results = await page.$$eval('h2 a', links => 
    links.map(link => link.textContent).slice(0, 5)
  );
  
  console.log('搜索结果:', results);
  
  await browser.close();
})();

常用操作技巧

1. 截图功能

// 整个页面截图
await page.screenshot({ path: 'screenshot.png', fullPage: true });

// 指定元素截图
await page.locator('.content').screenshot({ path: 'element.png' });

2. 文件下载

// 监听下载事件
const download = await page.waitForEvent('download', async () => {
  await page.click('a.download-button');
});
await download.saveAs('./downloads/file.pdf');

3. 表单自动填充

await page.fill('#username', 'myusername');
await page.fill('#password', 'mypassword');
await page.click('button[type="submit"]');

4. 等待特定元素

// 等待元素出现
await page.waitForSelector('.loading-spinner', { state: 'hidden' });

// 等待网络请求完成
await page.waitForResponse(response => 
  response.url().includes('/api/data') && response.status() === 200
);

实战案例：批量获取网页数据

假设我们需要从一个博客网站批量获取文章标题和链接：

const { chromium } = require('playwright');

async function scrapeBlog(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto(url);
  
  // 等待文章列表加载
  await page.waitForSelector('.article-item');
  
  // 提取文章数据
  const articles = await page.$$eval('.article-item', items => {
    return items.map(item => ({
      title: item.querySelector('h3').textContent,
      link: item.querySelector('a').href,
      date: item.querySelector('.date').textContent
    }));
  });
  
  await browser.close();
  return articles;
}

// 使用
scrapeBlog('https://example.com/blog')
  .then(articles => console.log(articles))
  .catch(console.error);

与 AI 结合的妙用

Playwright 还可以和 AI 结合，实现更智能的自动化：

• AI 辅助元素定位 - 用视觉模型识别按钮位置
• 智能内容提取 - 配合 LLM 提取非结构化网页数据
• 自动生成测试用例 - AI 分析页面生成 Playwright 测试代码

总结

Playwright 是现代浏览器自动化的利器，它让重复性的网页操作变得简单高效。无论是批量数据采集、自动化测试，还是工作流自动化，Playwright 都能帮你轻松搞定。

快去试试吧，让你的双手从繁琐的重复操作中解放出来！🐱

"Automate the boring stuff, focus on what matters." — 泡芙