【JS|第24期】Puppeteer：50个常用操作，你会了吗？

日期：2024年8月19日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

如需了解基础篇 —— Puppeteer 的安装与使用，请看《Puppeteer：网页自动化利器入门指南》

二、50个常用操作

---

Puppeteer 提供了丰富的 API 来进行高级交互。以下是一些 Puppeteer 常用的操作及其语法和示例代码：

1. 启动浏览器和打开新页面

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // ...其他操作
  await browser.close();
})();

2. 访问网页

await page.goto('https://example.com');

3. 元素选择和交互

// 选择元素
const element = await page.$('selector');
// 点击元素
await element.click();

// 指定元素点击（合体：选择元素+点击元素）
await page.click('selector');

4. 输入内容

const inputElement = await page.$('input#example');
await inputElement.type('Hello, World!');

// 指定元素输入内容（合体：选择元素+输入内容）
// Types instantly
await page.type('input#example', 'Hello'); 
// Types slower, like a user
await page.type('input#example', 'World', {delay: 100});

5. 获取元素文本

const text = await page.$eval('selector', el => el.innerText);

6. 获取属性值

const value = await page.$eval('selector', el => el.getAttribute('href'));

7. 截图

await page.screenshot({ path: 'screenshot.png' });

8. 等待元素出现

await page.waitForSelector('selector');

await page.waitForSelector('selector', { visible: true });

9. 执行自定义 JavaScript

const domcumentTitle = await page.evaluate(() => {
  // 在页面上下文中执行的代码
  return document.title;
});

10. 设置浏览器视口大小

// 宽1280 × 高720
await page.setViewport({ width: 1280, height: 720 });

// 全屏
await page.setViewport({ width: 0, height: 0 });

11. 登录页面

await page.type('#username', 'myUser');
await page.type('#password', 'myPassword');
await page.click('.submit-button');

12. 使用 cookies

await page.setCookie({ name: 'myCookie', value: 'myValue' });
const cookies = await page.cookies();

13. 模拟设备

await page.emulate(puppeteer.devices['iPhone 6']);

14. 处理页面中的弹出窗口

const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  page.click('#open-popup')
]);
// 在弹出窗口中进行操作

15. 滚动页面

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

16. 导航操作

// 前进到下一个页面
await page.goto('https://example.com/page1');
await page.click('a.next'); // 假设有一个指向下一页的链接
await page.waitForNavigation(); // 等待导航完成
// 后退到上一个页面
await page.goBack();

17. 模拟键盘按键

await page.focus('input'); // 焦点移至输入框
await page.keyboard.type('Hello'); // 输入文字
await page.keyboard.press('ArrowLeft'); // 按左箭头键
await page.keyboard.press('Backspace'); // 删除一个字符

18. 模拟鼠标操作

await page.mouse.move(0, 0); // 移动鼠标到页面左上角
await page.mouse.down(); // 按下鼠标左键
await page.mouse.move(100, 100); // 移动鼠标到新位置
await page.mouse.up(); // 释放鼠标左键

19. 监听页面事件

page.on('load', () => console.log('Page loaded!'));
page.on('request', request => console.log('Request:', request.url()));

20. 拦截网络请求

await page.setRequestInterception(true);
page.on('request', request => {
  if (request.resourceType() === 'image')
    request.abort(); // 中断图片请求
  else
    request.continue(); // 继续其他请求
});

21. 获取网络响应内容

const response = await page.goto('https://example.com');
const body = await response.text();
console.log(body);

22. 使用 Headless 模式

const browser = await puppeteer.launch({ headless: true });

23. 使用 SlowMo 慢动作执行

const browser = await puppeteer.launch({ slowMo: 250 }); // 所有操作延迟250ms

24. 获取页面性能指标

const metrics = await page.metrics();
console.log(metrics);

25. 执行自定义 JavaScript 并获取返回值

const data = await page.evaluate(() => {
  // 运行在浏览器中的代码
  return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
});
console.log(data); // { width: ..., height: ... }

26. 截取长图

await page.screenshot({ path: 'long-screenshot.png', fullPage: true });

27. 使用 PDF 功能

await page.pdf({ path: 'page.pdf', format: 'A4' });

28. 监听页面中的 console.log 消息

page.on('console', msg => console.log('PAGE LOG:', msg.text()));

29. 模拟触摸屏事件

await page.touchscreen.tap(100, 200); // 在坐标 (100, 200) 处点击

30. 使用浏览器上下文

const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();
// 在无痕模式下操作
await page.goto('https://example.com');

31. 管理多个页面

const firstPage = await browser.newPage();
const secondPage = await browser.newPage();

// 在两个页面间切换操作
firstPage = await browser.pages[0];
secondPage = await browser.pages[1s];

32. 使用浏览器插件

const browser = await puppeteer.launch({
  headless: false,
  args: [
  	'--disable-extensions-except=/path/to/extension', 
  	'--load-extension=/path/to/extension'
  ]
});

33. 设置请求头

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8'
});

34. 处理页面中的文件上传

const inputElement = await page.$('input[type=file]');
await inputElement.uploadFile('/path/to/file');

35. 监听页面中的 JavaScript 错误

page.on('pageerror', console.error);

36. 获取页面源代码

const content = await page.content();
console.log(content);

37. 使用浏览器缓存

await page.setCacheEnabled(true); // 默认为 true

38. 使用自定义的 userAgent

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3');

39. 获取浏览器版本信息

const browserVersion = await browser.version();
console.log(browserVersion);

40. 检查元素是否可见

const visible = await page.$eval('selector', el => window.getComputedStyle(el).visibility === 'visible');

41. 使用 XPath 选择器

const handle = await page.$x('//div[@class="example"]');
if (handle.length > 0) {
  await handle[0].click();
}

42. 检测元素是否存在

const exists = await page.$('selector') !== null;

43. 使用 CSS 选择器获取多个元素

const elements = await page.$$('selector');
for (const element of elements) {
  console.log(await element.evaluate(node => node.innerText));
}

44. 使用 cookies 前，确保页面已经加载

await page.goto('https://example.com');
await page.setCookie({ name: 'myCookie', value: 'myValue' });

45. 获取页面的 URL

const url = page.url();
console.log(url);

46. 监听页面中的请求完成事件

page.on('requestfinished', request => {
  console.log('Request finished: ', request.url());
});

47. 监听页面中的请求失败事件

page.on('requestfailed', request => {
  console.log('Request failed: ', request.url());
});

48. 使用 evaluateOnNewDocument 在页面加载前注入脚本

await page.evaluateOnNewDocument(() => {
  Object.defineProperty(navigator, 'webdriver', {
    get: () => false,
  });
});

49. 使用 evaluateHandle 获取复杂对象

const handle = await page.evaluateHandle(() => ({
  someProp: 'someValue',
  someArray: [1, 2, 3],
}));
const properties = await handle.jsonValue();
console.log(properties);

50. 使用 frame 操作 iframe 中的内容

const frame = page.frames().find(frame => frame.url() === 'https://example.com/iframe');
if (frame) {
  await frame.click('selector');
}

三、结语

---

Puppeteer 的强大之处在于其灵活性和丰富的 API。通过本文的介绍，我们只是揭开了 Puppeteer 功能的冰山一角。想要更深入地了解和使用 Puppeteer，建议查阅其 《Puppeteer官方文档》，那里有更详细的教程和示例。

最后也是最重要的一点，在使用 Puppeteer 时，请各位务必遵守相关法律法规，不要用于非法爬取数据或者侵犯他人权益。正确地使用 Puppeteer，可以大大提高我们的工作效率，为我们的项目带来便利。

---

参考文章：

• 《Puppeteer》
• 《Puppeteer 中文文档》
• 《20分钟玩转Puppeteer》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141331666