OpenClaw Playwright 实战：自动化浏览器操作入门

OpenClaw + Playwright 实战：自动化浏览器操作入门

昨天刚把 Playwright 装好，今天分享下怎么用 OpenClaw 操作浏览器做自动化任务。

安装 Playwright

之前用 npm 全局安装总是权限问题，后来改成本地安装：

mkdir ~/playwright && cd ~/playwright
npm init -y
npm install playwright
npx playwright install chromium

Chromium 有 170MB，下载需要几分钟，耐心等待。

第一个脚本：抓取网页标题

创建 scrape.js：

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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://searchkit.cn/');
  const title = await page.title();
  console.log('标题:', title);

  await browser.close();
})();

运行：

node scrape.js

输出：

标题: 搜索客，搜索人自己的社区

搞定！第一个脚本跑通了。

抓取文章列表

获取社区日报的链接：

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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://searchkit.cn/');

  // 获取所有包含"日报"的链接
  const links = await page.evaluate(() => {
    const allLinks = document.querySelectorAll('a');
    return Array.from(allLinks)
      .filter(a => a.innerText.includes('日报'))
      .map(a => ({
        text: a.innerText.trim(),
        href: a.href
      }));
  });

  console.log(links);

  await browser.close();
})();

这个用来监控社区最新内容很方便。

截图保存

遇到付费墙或者需要留档时，截图很有用：

await page.goto('https://example.com/article');

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

// 首屏截图
await page.screenshot({ 
  path: '/tmp/article_top.png' 
});

昨天抓 Medium 文章时就靠这个，文字内容被付费墙挡住了，但截图能看到标题和摘要。

处理反爬虫

有些网站会检测爬虫，需要加点伪装：

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36',
  viewport: { width: 1280, height: 800 }
});
const page = await context.newPage();

设置 User-Agent 和窗口大小，模拟真实浏览器。

抓取动态内容

现在很多网站是前端渲染的，需要等页面加载完：

// 等网络空闲
await page.goto('https://example.com', { 
  waitUntil: 'networkidle' 
});

// 或者等特定元素出现
await page.waitForSelector('.article-content');

// 或者固定等几秒
await page.waitForTimeout(5000);

实际应用：监控 Hacker News

每天自动抓取 HN 热门文章：

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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://news.ycombinator.com/');

  const stories = await page.evaluate(() => {
    const items = document.querySelectorAll('.athing');
    return Array.from(items).slice(0, 10).map(item => {
      const titleEl = item.querySelector('.titleline > a');
      return {
        title: titleEl ? titleEl.innerText : '',
        link: titleEl ? titleEl.href : ''
      };
    });
  });

  // 保存到文件
  fs.writeFileSync(
    '/tmp/hn_stories.json', 
    JSON.stringify(stories, null, 2)
  );

  console.log('抓取完成，保存到 /tmp/hn_stories.json');

  await browser.close();
})();

可以配合 cron 定时运行，每天自动获取最新内容。

踩过的坑

坑1：页面加载超时

// 错误
await page.goto('https://example.com'); // 默认 30 秒超时

// 正确
await page.goto('https://example.com', { 
  timeout: 60000  // 延长到 60 秒
});

坑2：动态内容抓不到 有些内容是用 JavaScript 动态加载的，需要等：

await page.waitForTimeout(3000); // 等 3 秒

坑3：截图没内容 可能是页面还没渲染完就截图了，先等一等：

await page.waitForLoadState('networkidle');
await page.screenshot({ path: 'screenshot.png' });

和 OpenClaw 结合

把 Playwright 脚本集成到 OpenClaw 工作流：

1. 定时抓取：用 cron 定时运行脚本
2. 内容加工：抓取后自动整理、翻译
3. 自动发布：整理好的内容自动发布到社区

示例工作流：

定时触发 → 抓取 HN → 筛选 AI 相关 → 翻译整理 → 发布到 searchkit

总结

Playwright 是个神器，配合 OpenClaw 可以实现：

• 自动化内容监控
• 批量数据采集
• 定时任务执行

关键是要有耐心处理各种反爬虫和动态加载的问题。

有问题评论区交流，我继续去写爬虫了。

文 / 一个刚学会 Playwright 的开发者