如何用JavaScript结合Puppeteer实现爬虫开发和自动化测试

JavaScript结合Puppeteer可以高效实现爬虫开发和自动化测试工作，Puppeteer能够启动无头Chrome或Chromium浏览器，模拟真实用户操作，完成页面加载、数据提取、交互验证等一系列任务，适用范围覆盖数据采集、功能回归测试、页面性能监控等多个场景。

Puppeteer环境搭建

首先需要在项目中安装Puppeteer依赖，Node.js版本建议保持在14.0.0及以上，避免兼容性问题。执行以下命令完成安装：

# 初始化项目
npm init -y
# 安装Puppeteer
npm install puppeteer

安装过程会自动下载对应系统的Chromium浏览器，国内网络环境下如果下载缓慢，可以配置npm镜像或者使用puppeteer-core版本，自行指定本地已有的Chrome浏览器路径。

使用Puppeteer实现基础爬虫

爬虫的核心需求是访问目标页面，提取所需的结构化数据，以下示例演示抓取一个示例页面的文章标题列表：

const puppeteer = require('puppeteer');

async function crawlArticleTitles() {
    // 启动浏览器
    const browser = await puppeteer.launch({
        headless: true, // 无头模式，不显示浏览器界面
        args: ['--no-sandbox', '--disable-setuid-sandbox'] // 适配部分服务器环境
    });
    // 创建新页面
    const page = await browser.newPage();
    // 访问目标页面，替换为实际需要爬取的地址
    await page.goto('https://ipipp.com/sample-articles', {
        waitUntil: 'networkidle2' // 等待网络请求空闲，确保页面加载完成
    });
    // 提取页面中的文章标题，选择器需要根据实际页面结构调整
    const titles = await page.evaluate(() => {
        const titleElements = document.querySelectorAll('.article-title');
        return Array.from(titleElements).map(el => el.textContent.trim());
    });
    console.log('抓取到的文章标题：', titles);
    // 关闭浏览器
    await browser.close();
}

crawlArticleTitles().catch(err => console.error('爬虫执行出错：', err));

上述代码中，page.evaluate方法可以在浏览器上下文执行JavaScript代码，直接操作DOM元素获取内容，相比传统HTTP请求爬虫，能够应对动态渲染的页面场景。

使用Puppeteer实现自动化测试

自动化测试可以模拟用户操作，验证页面功能是否符合预期，以下示例演示测试一个简单的登录流程：

const puppeteer = require('puppeteer');

async function testLoginFlow() {
    const browser = await puppeteer.launch({
        headless: false, // 显示浏览器界面，方便观察测试过程
        slowMo: 50 // 每个操作延迟50毫秒，避免操作过快导致元素未加载
    });
    const page = await browser.newPage();
    // 访问登录页面
    await page.goto('https://ipipp.com/login');
    // 输入用户名
    await page.type('#username', 'test_user');
    // 输入密码
    await page.type('#password', 'test_password_123');
    // 点击登录按钮
    await page.click('#login-btn');
    // 等待登录成功后的跳转，等待目标元素出现
    await page.waitForSelector('.user-avatar');
    // 验证登录后的用户名是否正确
    const userName = await page.$eval('.user-name', el => el.textContent);
    if (userName === 'test_user') {
        console.log('登录测试通过');
    } else {
        console.log('登录测试失败，实际用户名：', userName);
    }
    await browser.close();
}

testLoginFlow().catch(err => console.error('测试执行出错：', err));

自动化测试中常用的操作包括输入文本、点击元素、等待元素加载、获取元素内容等，Puppeteer提供了对应的API支持，能够满足大部分UI测试的需求。

常见问题与优化方案

• 页面加载超时：可以通过page.setDefaultTimeout设置全局超时时间，或者在goto、waitForSelector等方法中单独设置超时参数
• 反爬虫限制：可以设置浏览器的user-agent，模拟真实浏览器请求头，避免被目标站点识别为爬虫
• 资源占用过高：无头模式下可以禁用图片、字体等不必要资源的加载，减少内存和CPU消耗

以下是禁用不必要资源的示例代码：

const puppeteer = require('puppeteer');

async function optimizedCrawl() {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    // 拦截请求，禁用图片和字体加载
    await page.setRequestInterception(true);
    page.on('request', req => {
        const resourceType = req.resourceType();
        if (resourceType === 'image' || resourceType === 'font') {
            req.abort();
        } else {
            req.continue();
        }
    });
    await page.goto('https://ipipp.com/target-page');
    // 后续数据提取逻辑
    await browser.close();
}

总结

Puppeteer为JavaScript开发者提供了强大的浏览器控制能力，无论是爬虫开发还是自动化测试，都可以通过简单的API调用实现复杂的交互逻辑。实际使用中需要根据具体场景调整配置，处理好异常情况和性能优化，才能发挥出工具的最大价值。

JavaScriptPuppeteer爬虫开发自动化测试修改时间：2026-06-24 10:48:18