Puppeteer实践:复杂的问题简单化

最近遇到一个需求需要将上千条的数据写入到基于Wordpress搭建的系统中,但是对于底层数据录的写入逻辑不是很清楚,通过sql各种写入也没有完全达到效果。

后面想了想或许可以换一个方向,不能从底层逻辑写入数据那就通过正常操作写入。由于数据量大所以需要自动化处理,这时候就想到了之前用过的Puppeteer,这个库可以模拟操作浏览器的各种行为,包括获取数据和操作提交等。对于这个场景很适合,不用管底层的实现逻辑,也不需要去扒源码了解各种加密加签的逻辑,只需要模拟操作提交数据即可。

复杂的问题瞬间简单了,在这篇文章中记录如何使用Puppeteer批量提交数量。

安装Puppeteer

在这之前确保你已经安装了Node.js。运行以下命令安装Puppeteer:

复制代码
npm install puppeteer

Puppeteer脚本

接下来编写需要执行的脚本,创建一个名为puppeteer.js的文件,并添加以下代码:

复制代码
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false 
  });
  const page = await browser.newPage();
  await page.goto('https://baidu.com');   
  await browser.close();
})();

puppeteer.launch() 是用于启动一个浏览器实例,为后续的网页操作和自动化测试提供基础。可以接受一些配置选项,如指定浏览器的路径、是否启用无头模式、设置视口大小等。完整配置还有很多,可查阅官网了解。

保持用户状态

需要写入的系统是需要登录后才能操作且需要多次操作,所以在操作过程中需要记录用户状态。这一点我们可以在初始化浏览器实例的时候配置 userDataDiruserDataDir 用于指定一个目录,该目录用于存储浏览器的用户数据,如缓存、Cookie、本地存储数据等。可以让 Puppeteer 在每次启动浏览器时都使用相同的用户数据,从而保持用户状态的连续性。

复制代码
const browser = await puppeteer.launch({
    userDataDir: 'userA' 
});

模拟登录

然后就是第一次的模拟登录和后续操作校验登录状态。通过 page.cookies() 获取存储的用户数据,如果不存在则模拟登录。

复制代码
// 从puppeteer中获取cookie
const cookies = await page.cookies(); 
let isLogin = false
cookies.forEach(json => {
    if (json.name.includes('wordpress')) {
        isLogin = true
    }
});

console.log('[ isLogin ] >', isLogin)

if (!isLogin) {
    // 模拟输入用户名密码
    await page.type('#user_login', 'XXXX', { delay: 100 });
    await page.type('#user_pass', 'XXXX', { delay: 100 });
    // 模拟点击
    await page.click('#rememberme', { delay: 110 });
    await page.click('#wp-submit', { delay: 120 });  
     // 等待页面完全加载
    await page.waitForNavigation()   
}

数据处理

接下来就是业务数据处理了,首先将数据转换成JSON方便批量处理。每次处理一批数组,这里在for循环中使用 Promise 同步处理,待所有的数据都处理完成后关闭浏览器结束脚本。在 performAsyncOperation 中执行具体的数据操作过程。

复制代码
const list = require('./list.js')

function performAsyncOperation(item) {
    return new Promise(async (resolve, reject) => {
        // todo item
        resolve();
    });
}

// 使用async函数来包裹异步操作
async function processItems() {
    for (const item of list) {
        // 使用await等待异步操作完成
        await performAsyncOperation(item); 
    }
    console.log('All items processed');
    await browser.close();
}

processItems()

这里有一点特殊处理,要写入的数据是在iframe中的元素,需要通过以下方式对iframe中的dom进行修改赋值。

复制代码
const elementHandle = await page.waitForSelector('#content_ifr');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('p:nth-child(1)');
const description = item.description
// 在 iframe 中使用 evaluate 方法来修改元素内的 DOM
await frame.evaluate((description) => {
    // 在这里可以编写 JavaScript 代码来修改 iframe 内的 DOM
    document.querySelector('p:nth-child(1)').textContent = description
}, description);

更新完一条数据后进行下一条数据的写入,这里页面提交数据后界面发生了变化,需要重新回到开始的页面继续处理。回到开始的发布页面后执行成功回调继续下一条数据处理,当所有的数据处理完成则结束脚本。

复制代码
// 点击发布
await page.click('#publish')
// 等待页面更新
await page.waitForNavigation()
// 点击回到发布页面
await page.click('.page-title-action', { delay: 300 })
// 成功回调继续下一条处理
resolve();

总结

Puppeteer是一个强大的库,它能够让开发者以编程方式控制Chrome或Chromium。这使数据获取或操作页面数据变得更加容易,特别是对于需要与JavaScript交互的页面。

通过上面的例子,你应该对如何使用Puppeteer来处理数据有了一个基本的了解。Puppeteer的能力远不止于此,你可以创建更复杂的脚本来模拟用户登录、填写表单、获取签名数据等。

前端的世界总是在不断变化,作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域,让我们拭目以待,它将给前端世界带来怎样的变革。

介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

JNPF可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。

希望这篇文章对你有所帮助~

相关推荐
哟哟耶耶1 小时前
React-04React组件状态(state),构造器初始化state以及数据读取,添加点击事件并更改state状态值
前端·javascript·react.js
kiramario1 小时前
用IconContext.Provider修改react-icons的icon样式
前端·javascript·react.js
destinyol1 小时前
React首页加载速度优化
前端·javascript·react.js·webpack·前端框架
程序员小续1 小时前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
大猫会长2 小时前
用AbortController取消事件绑定
前端
程序员小杰@2 小时前
AI前端组件库Ant DesIgn X
开发语言·前端·人工智能
致微3 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪3 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20234 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰4 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html