mcpField
P
playwright-scraper

playwright-scraper

github.com/alphaonedev数据与数据库1.6k 次安装
代码仓库

关于 playwright-scraper

playwright-scraper 是一项使用 Node.js 中 Playwright 抓取网站的技能，适用于动态页面、登录、分页和视觉采集等流程，并提供从浏览器页面提取数据的指导。

主要功能

  1. 01操作 JavaScript 渲染的页面
  2. 02处理登录和会话状态
  3. 03浏览分页结果
  4. 04将数据提取为 JSON 或文件
  5. 05捕获截图和 PDF
  6. 06使用无头或可视浏览器模式

适用场景

  1. 01采集已登录仪表板的数据
  2. 02汇总多个页面的搜索结果
  3. 03提取动态 Web 应用中的内容
  4. 04截取页面画面以供检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill playwright-scraper

安装后在 Claude Code 中输入/playwright-scraper确认已加载。

详细介绍

playwright-scraper

用途

此技能可使用 Playwright（一款用于浏览器自动化的 Node.js 库）进行网页抓取。它专注于处理动态内容、身份验证流程、分页、数据提取和截图，从而可靠地抓取现代网站。

适用场景

当需要抓取由 JavaScript 渲染内容的网站（例如 React 或 Angular 应用）、需要登录的网站（例如仪表板）、处理多页结果（例如搜索结果）或捕获视觉数据（例如用于验证的截图）时，请使用此技能。对于静态 HTML 网站，简单的 requests 等工具就足够了，不建议使用此技能。

主要功能
  • 使用 Playwright 的浏览器控制功能动态加载内容并与之交互。
  • 管理身份验证流程，例如通过表单登录或使用 API 令牌。
  • 通过跳转页面、点击“下一页”按钮或解析 URL 处理分页。
  • 使用选择器提取数据，并可选择输出为 JSON 或保存到文件。
  • 截取屏幕截图或生成整页 PDF，用于调试或报告。
  • 支持无头或可见浏览器模式，使用方式灵活。
使用模式

始终先初始化浏览器上下文，再创建页面进行导航。使用异步模式以确保可靠性。对于需要身份验证的抓取，请按上下文处理 Cookie 或会话。编写脚本时，应通过循环遍历页面来处理分页，并使用 try-catch 处理不稳定的元素。通过 JSON 文件或环境变量传入配置，以便重复使用。

常用命令/API

使用 Playwright 的 Node.js API。通过 npm install playwright 安装。主要方法包括：

  • 启动浏览器：const browser = await playwright.chromium.launch({ headless: true });
  • 导航页面：const page = await browser.newPage(); await page.goto('https://example.com');
  • 处理身份验证：await page.fill('#username', process.env.USERNAME); await page.fill('#password', process.env.PASSWORD); await page.click('#login');
  • 提取数据：const data = await page.evaluate(() => document.querySelector('#target').innerText); console.log(data);
  • 分页：while (await page.$('#next-button')) { await page.click('#next-button'); await page.waitForSelector('.item'); }
  • 截取屏幕截图：await page.screenshot({ path: 'screenshot.png' }); 运行脚本时可使用 CLI 标志：使用 npx playwright test，并搭配 --headed 等标志以启用可见模式，或使用 --timeout 30000 延长等待时间。
集成说明

在 Node.js 项目中导入 Playwright 即可集成。对于身份验证，请使用 $PLAYWRIGHT_USERNAME 和 $PLAYWRIGHT_PASSWORD 等环境变量，避免将凭据硬编码。配置格式：使用 JSON 文件存储设置，例如 { "url": "https://target.com", "selector": "#data-element" }。通过脚本参数传入配置：node scraper.js --config config.json。对于较大型的系统，可与 Puppeteer 等工具串联使用（适用于迁移场景），或通过 page.evaluate 的结果将数据导出到数据库。确保兼容 Node.js 14+，并使用 browser.launch({ proxy: { server: 'http://myproxy.com:8080' } }) 处理代理设置。

错误处理

预先考虑动态加载超时或选择器失败等常见错误。使用带超时的 page.waitForSelector：await page.waitForSelector('#element', { timeout: 10000 }).catch(err => console.error('Element not found:', err));。遇到网络问题时，使用 try-catch 包装 page.goto：try { await page.goto(url, { waitUntil: 'networkidle' }); } catch (e) { console.error('Navigation failed:', e.message); await browser.close(); }。通过检查错误元素来处理身份验证失败：if (await page.$('#error-message')) { throw new Error('Login failed'); }。记录错误详情，并使用循环最多重试 3 次。

具体使用示例
  1. **抓取已登录的仪表板：**首先，设置环境变量：export PLAYWRIGHT_USERNAME='[email protected]' 和 export PLAYWRIGHT_PASSWORD='securepass'。然后，运行：const browser = await playwright.chromium.launch(); const page = await browser.newPage(); await page.goto('https://dashboard.com/login'); await page.fill('#username', process.env.PLAYWRIGHT_USERNAME); await page.fill('#password', process.env.PLAYWRIGHT_PASSWORD); await page.click('#submit'); const data = await page.evaluate(() => document.querySelector('#dashboard-data').innerText); console.log(data); await browser.close(); 此操作会从受保护的页面提取数据。
  2. **处理搜索网站上的分页：**脚本：const browser = await playwright.chromium.launch(); const page = await browser.newPage(); await page.goto('https://search.com?q=query'); let items = []; while (true) { items.push(...await page.$$eval('.result-item', elements => elements.map(el => el.innerText))); const nextButton = await page.$('#next-page'); if (!nextButton) break; await nextButton.click(); await page.waitForTimeout(2000); } console.log(items); await browser.close(); 此操作会收集多个页面上的结果。
图关系
  • 相关工具："selenium-automation"（浏览器自动化替代工具）
  • 依赖项："node-runtime"（用于执行 Playwright）
  • 互补工具："data-extraction"（用于对抓取的数据进行后处理）
  • 所属集群："community"（与其他开源工具共享）

评论

支持 Markdown