当前位置：首页 > news >正文

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

news 2026/3/26 20:37:45

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

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

一、项目初始化

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

npminstallpuppeteer

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

二、代码实现

constpuppeteer=require('puppeteer');constfs=require('fs');// 导入文件系统模块// 设置延时的工具函数functionwaitForTimeout(time){returnnewPromise((resolve,reject)=>setTimeout(resolve,time));}(async()=>{// 启动 Puppeteer 浏览器实例constbrowser=awaitpuppeteer.launch({headless:false// 设置为 false 以便查看操作});try{constpage=awaitbrowser.newPage();awaitpage.setViewport({width:1920,height:800});// 导航到需要设置 cookie 的页面awaitpage.goto('http://localhost:8093/admin');// 定义多个 cookie 对象并存储在数组中constcookies=[{"name":"Admin-Token","value":"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYzYWNmZTVmLWUyNGItNDYwNi05ZjdhLTBkYmU5ZDBhZWJmZCJ9.RqZDMMiRTGUwVSLal9dx2mDyHwkY_vk4Vs2bMSegph7P0eTnKDknN5DOP3wRu18e2NVk5OdVSfJcLmC0N1HHHQ"}// 可以继续添加更多 cookie 对象];// 使用 page.setCookie 方法设置多个 cookieawaitpage.setCookie(...cookies);// 打印当前页面的 cookiesconstcookies1=awaitpage.cookies();console.log('当前页面的 cookies:',cookies1);// 导航到目标页面awaitpage.goto('http://localhost:8093/category');// 使用 XPath 选择带有特定文本的按钮constxpathSelectorC='//span[text()="50条/页"]';awaitpage.waitForXPath(xpathSelectorC);// 获取符合条件的元素并模拟点击操作const[element]=awaitpage.$x(xpathSelectorC);if(element){awaitelement.evaluate(element=>element.click());console.log('已选择 "50条/页"');}else{console.log('未找到 "50条/页"');}// 等待分页元素加载完成awaitpage.waitForSelector('ul.el-pager');// 获取分页的所有 <li> 元素constliElements=awaitpage.$$('ul.el-pager li');constlastLiElement=liElements[liElements.length-1];letlastLiText=0;if(lastLiElement){lastLiText=awaitpage.evaluate(li=>li.textContent,lastLiElement);console.log('最后一个 <li> 元素的内容:',lastLiText);}else{console.log('未找到 <li> 元素');}// 定义表格和分页按钮选择器consttableSelector='table';constnextButtonSelector='button.btn-next';// 等待下一页按钮可见awaitpage.waitForSelector(nextButtonSelector,{visible:true,timeout:5000});consttotalPages=parseInt(lastLiText);// 获取总页数letcurrentPage=1;letallTableHTML='';// 用于保存所有表格的 HTML 内容// 遍历所有分页while(currentPage<=totalPages){constbuttonElement=awaitpage.$(nextButtonSelector);consttableElements=awaitpage.$$(tableSelector);if(buttonElement){// 点击“下一页”按钮awaitbuttonElement.click();awaitwaitForTimeout(3000);// 等待加载// 获取当前页面的表格内容并保存for(consttableElementoftableElements){consttableHTML=awaittableElement.evaluate(element=>element.outerHTML);allTableHTML+=tableHTML;}currentPage++;// 增加当前页数}else{console.log('未找到按钮');break;// 如果按钮不存在，退出循环}}console.log('已浏览到第 '+totalPages+' 页');// 你可以将 allTableHTML 保存为文件或进一步处理fs.writeFileSync('allTables.html',allTableHTML);// 完成后关闭浏览器awaitbrowser.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模块来实现文件保存。