puppeteer操作dom元素跳转页面遇到的问题

最新推荐文章于 2025-05-29 10:00:55 发布

nhrjy

最新推荐文章于 2025-05-29 10:00:55 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45855502/article/details/123464474

本文介绍了使用Puppeteer库进行页面跳转和操作DOM元素时遇到的问题及解决方案。通过示例代码展示了如何在点击链接后获取新页面的Page对象，并利用page.waitForNavigation()等待页面加载完成。同时，还提供了更新page对象的方法，确保能正确操作新页面的DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

puppeteer操作dom元素跳转页面遇到的问题

一般的跳转方式

// 创建页面对象
let page = await browser.newPage()
// 使用页面对象的goto方法进行跳转
await page.goto(url)

使用page.goto跳转到页面后，我们就可以使用选择器操作dom元素了。

操作dom元素跳转页面

页面中有a标签，那么我们可以获取到a标签了再使用点击事件触发跳转。但是有个问题：跳转后，page对象还是原来的页面对象。我们如果继续使用原来的page对象肯定是无法使用选择器获取新页面的dom的。
可以在跳转后更新page对象，代码如下：

 	await page.waitForSelector('tbody')
    const link = await page.$('tbody a[target="_blank"]');
    const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page()))); // 声明变量
    await link.click(); // 点击跳转
    let newPage = await newPagePromise; // newPage就是a链接打开窗口的Page对象
    return newPage;

还可以使用page.waitForNavigation([options])，相关文档：puppeteerjs中文文档

const [response] = await Promise.all([
  page.waitForNavigation(), // The promise resolves after navigation has finished
  page.click('a.my-link'), // 点击该链接将间接导致导航(跳转)
]);