了解了基本用法之后？现在，我们可以继续了解 Puppeteer 的强大功能。运行以下示例后，我相信你会对这个工具有新的认识。

1. 模拟鼠标移动

使用 page.mouse.move 来操作鼠标移动。

为了让你感受到光标确实在页面上移动，以下演示是一个无限循环，将使鼠标随机移动以触发页面的悬停样式。

需要注意的是，触发悬停的前提是鼠标移动不能太快。move 方法中的 steps: 10 配置了移动速率。这个步骤也可以降低网站被检测到的概率。

Page.evaluate 是一个非常有用的 API，允许你在页面上下文中执行仅在浏览器环境中运行的 JavaScript 代码，例如使用 window API。这里的目的是将页面滚动到底部，以便页面评论会完全加载。

import puppeteer from 'puppeteer';

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

const page = await browser.newPage();

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

// 获取屏幕的宽度和高度

const { width, height } = await page.evaluate(() => {

return { width: window.innerWidth, height: window.innerHeight };

});

// 无限循环，模拟随机的鼠标移动

while (true) {

const x = Math.floor(Math.random() * width);

const y = Math.floor(Math.random() * height);

await page.mouse.move(x, y, { steps: 10 });

console.log(`鼠标位置: (${x}, ${y})`);

await new Promise(resolve => setTimeout(resolve, 200)); // 每 0.2 秒移动一次

}

2. 点击按钮并填写表单

我们在初始演示中也遇到过这个。如何改变写法并使用其他 API 实现它？

你会看到一些选择器前面带有 >>>，这是 Puppeteer 提供的 Shadow DOM selector。大多数操作都是通过 delay 进行延迟触发，这可以很好地模拟真实用户的行为，使你的脚本更稳定，避免触发某些网站的反爬虫机制。

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({

headless: false,

// defaultView 设置宽度和高度为 0，这意味着网页内容填充整个窗口。

defaultViewport: { width: 0, height: 0 }

});

const page = await browser.newPage();

await page.goto('https://developer.chrome.com/docs/css-ui?hl=de');

await page.click('>>> button[aria-controls="language-menu"]', { delay: 500 });code>

// 跳转到新页面并等待跳转成功

await Promise.all([

page.click('>>> li[role="presentation"]', { delay: 500 }),code>

page.waitForNavigation(),

])

// 使用 setTimeout 作为延迟器，等待 2 秒加载页面

await new Promise(resolve => setTimeout(resolve, 2000))

// 聚焦输入框

await page.focus('input.devsite-search-query', { delay: 500 });

// 通过键盘输入文本

await page.keyboard.type('puppeteer', { delay: 200 });

// 触发键盘回车键并提交表单

await page.keyboard.press('Enter')

console.log('form submit successfully');

await page.close()

3. 使用 Puppeteer 截取屏幕截图

步骤 3. 每个 <code>Node 都可以单独配置，配置的信息几乎与 Puppeteer 的配置相对应。

a. 鼠标移动

b. 点击按钮

c. 输入

d. 键盘按键

e. 等待响应

f. 截图

此外，Nstbrowser RPA 还有更多常见和独特的节点。你可以通过简单的拖拽完成常见的爬虫操作。

设置 HTTP Headers 以避免机器人检测

HTTP headers 是在客户端（浏览器）和服务器之间交换的附加信息。它们包含请求和响应的元数据，例如内容类型、用户代理、语言设置等。

常见的 HTTP headers 包括：

<code>User-Agent：标识客户端应用程序类型、操作系统、软件版本及其他信息。Accept-Language：指示客户端可以理解的语言及其优先级。Referer：指示请求的来源页面。

通过修改这些 headers，你可以将自己伪装成不同的浏览器或操作系统，从而降低被检测为机器人的风险。

在使用 Puppeteer 时，你可以使用 page.setExtraHTTPHeaders 方法在跳转到网页之前设置 headers：

import puppeteer from 'puppeteer';

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

const page = await browser.newPage();

// 设置自定义 HTTP headers

await page.setExtraHTTPHeaders({

'Accept-Language': 'en-US,en;q=0.9',

'Referer': 'https://www.google.com',

'MyHeader': 'hello puppeteer'

});

await page.goto('https://www.httpbin.org/headers');

但如果你想修改 User-Agent，则不能使用上述方法。因为浏览器中的 User-Agent 有一个默认值。如果你确实想更改它，可以使用 page.setUserAgent。

import puppeteer from "puppeteer";

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.5790.98 Safari/537.36');

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

const navigator = await page.evaluate(_ => window.navigator.userAgent)

const platform = await page.evaluate(_ => window.navigator.platform)

console.log('userAgent: ', navigator);

console.log('platform: ', platform);

await browser.close();

但这一步还不够。从上面打印的信息来看，<code>paltform 仍然设置为 win32，并没有被真正修改。

大多数网站通过 window.navigator 进行检测。因此有必要对 navigator 进行深入修改。在使用 page.goto 之前，我们可以在 page.evaluateOnNewDocument 中深入修改 navigator。

下面是 page.evaluateOnNewDocument 和 page.evaluate 之间区别的简要说明：

如果你需要修改浏览器环境或在每个页面加载前执行一些操作，请使用 evaluateOnNewDocument。如果你只需要与当前加载的页面进行交互或提取数据，请使用 evaluate。

await page.evaluateOnNewDocument(() => {

Object.defineProperties(navigator, {

platform: {

get: () => 'Mac'

},

});

});

结论

本文中的每一行都在描述最详细的指南，涵盖了以下内容：

什么是 headlesschrome？什么是 Puppeteer？如何使用 headlesschrome 进行网页爬取？

想轻松进行网页爬取和自动化操作吗？Nstbrowser RPA 帮助你简化所有任务。