使用 Puppeteer 设置 Cookies 并实现自动化分页操作：前端实战教程

使用 Puppeteer 设置 Cookies 并自动化分页操作

在现代的 Web 自动化中，使用 Puppeteer 进行浏览器自动化是一个非常方便的选择。本篇文章将介绍如何使用 Puppeteer 设置 Cookies、模拟用户行为、获取网页内容，并且遍历分页获取所有数据。

一、项目初始化

首先，我们需要安装 Puppeteer。你可以通过 npm 来安装：

bash 复制代码

npm install puppeteer

然后创建一个 JavaScript 文件，例如 puppeteer.js，以若依测试。并添加以下代码：

二、代码实现

javascript 复制代码

const puppeteer = require('puppeteer');
const fs = require('fs'); // 导入文件系统模块

// 设置延时的工具函数
function waitForTimeout(time) {
    return new Promise((resolve, reject) => setTimeout(resolve, time));
}

(async () => {
  // 启动 Puppeteer 浏览器实例
  const browser = await puppeteer.launch({
    headless: false // 设置为 false 以便查看操作
  });

  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 800 });

    // 导航到需要设置 cookie 的页面
    await page.goto('http://localhost:8093/admin');

    // 定义多个 cookie 对象并存储在数组中
    const cookies = [
      {
        "name":"Admin-Token",
        "value":"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYzYWNmZTVmLWUyNGItNDYwNi05ZjdhLTBkYmU5ZDBhZWJmZCJ9.RqZDMMiRTGUwVSLal9dx2mDyHwkY_vk4Vs2bMSegph7P0eTnKDknN5DOP3wRu18e2NVk5OdVSfJcLmC0N1HHHQ"
      }
      // 可以继续添加更多 cookie 对象
    ];

    // 使用 page.setCookie 方法设置多个 cookie
    await page.setCookie(...cookies);
    
    // 打印当前页面的 cookies
    const cookies1 = await page.cookies();
    console.log('当前页面的 cookies:', cookies1);

    // 导航到目标页面
    await page.goto('http://localhost:8093/category');

    // 使用 XPath 选择带有特定文本的按钮
    const xpathSelectorC = '//span[text()="50条/页"]';
    await page.waitForXPath(xpathSelectorC);

    // 获取符合条件的元素并模拟点击操作
    const [element] = await page.$x(xpathSelectorC);
    if (element) {
        await element.evaluate(element => element.click());
        console.log('已选择 "50条/页"');
    } else {
        console.log('未找到 "50条/页"');
    }

    // 等待分页元素加载完成
    await page.waitForSelector('ul.el-pager');

    // 获取分页的所有 <li> 元素
    const liElements = await page.$$('ul.el-pager li');
    const lastLiElement = liElements[liElements.length - 1];
    let lastLiText = 0;

    if (lastLiElement) {
        lastLiText = await page.evaluate(li => li.textContent, lastLiElement);
        console.log('最后一个 <li> 元素的内容:', lastLiText);
    } else {
        console.log('未找到 <li> 元素');
    }

    // 定义表格和分页按钮选择器
    const tableSelector = 'table';
    const nextButtonSelector = 'button.btn-next';

    // 等待下一页按钮可见
    await page.waitForSelector(nextButtonSelector, { visible: true, timeout: 5000 });
    const totalPages = parseInt(lastLiText); // 获取总页数
    let currentPage = 1;
    let allTableHTML = ''; // 用于保存所有表格的 HTML 内容

    // 遍历所有分页
    while (currentPage <= totalPages) {
      const buttonElement = await page.$(nextButtonSelector);
      const tableElements = await page.$$(tableSelector);

      if (buttonElement) {
        // 点击"下一页"按钮
        await buttonElement.click();
        await waitForTimeout(3000); // 等待加载

        // 获取当前页面的表格内容并保存
        for (const tableElement of tableElements) {
          const tableHTML = await tableElement.evaluate(element => element.outerHTML);
          allTableHTML += tableHTML;
        }

        currentPage++; // 增加当前页数
      } else {
        console.log('未找到按钮');
        break; // 如果按钮不存在，退出循环
      }
    }

    console.log('已浏览到第 ' + totalPages + ' 页');
    
    // 你可以将 allTableHTML 保存为文件或进一步处理
    fs.writeFileSync('allTables.html', allTableHTML);

    // 完成后关闭浏览器
    await browser.close();

  } catch (e) {
    console.log("发生错误：" + e);
  }
})();

三、代码说明

启动浏览器实例

使用 puppeteer.launch() 启动一个浏览器实例。headless: false 表示我们希望看到浏览器的操作界面，便于调试。
设置 Cookies

使用 page.setCookie(...cookies) 设置多个 Cookie。我们通过传递一个包含多个 cookie 对象的数组来设置 Cookies。
等待和选择元素

使用 page.waitForXPath() 和 page.waitForSelector() 来确保元素加载完成后进行交互。特别是通过 XPath 选择"50条/页"按钮，并模拟点击它。
分页操作

使用 page.$(nextButtonSelector) 和 page.$$(tableSelector) 获取"下一页"按钮和表格元素，进行分页处理。每一页的数据都通过 tableElement.evaluate() 获取 HTML 内容，并累积到 allTableHTML 中。
文件保存

最后，所有页面表格的 HTML 内容保存在一个文件 allTables.html 中，使用 Node.js 的 fs 模块来实现文件保存。

四、总结

通过以上代码，你可以模拟在 Web 页面上设置 Cookies、模拟用户行为并自动化分页操作。你可以根据具体需求对该代码进行修改，以实现更复杂的自动化任务。

Puppeteer 是一个强大的浏览器自动化工具，适用于多种 Web 数据抓取和自动化任务。希望本文的示例代码能帮助你入门 Puppeteer，并加速你在自动化测试和 Web 数据抓取方面的工作。