汝为傀儡，吾来操纵(🍄Puppeteer🍄)

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch({

    headless: false, // 显示浏览器界面

    executablePath: '/path/to/chrome', // 指定浏览器可执行文件路径

    args: ['--no-sandbox', '--disable-setuid-sandbox'], // 额外参数

    defaultViewport: { width: 1280, height: 800 }, // 默认视口大小

    userDataDir: '/path/to/userDataDir'， // 用户数据目录

    slowMo: 100, // 延迟 100 毫秒

  });

// 在这里可以进行其他操作，比如创建新页面、访问网页等

await browser.close();

})();

const puppeteer = require('puppeteer');


puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();

});

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

await page.waitForSelector('.my-element');

3. click(selector): 点击页面中指定的选择器。

await page.click('.my-button');

4. type(selector, text): 在指定的输入框中输入文本。

await page.type('input[name="username"]', 'myusername');

5. evaluate(pageFunction): 在页面上下文中执行指定的函数。

const title = await page.evaluate(() => document.title);

6. screenshot(options): 截取当前页面的屏幕截图。

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

7. close(): 关闭页面实例。

await page.close();

通过使用 Page 类提供的方法，我们可以模拟用户在浏览器中的操作，实现各种自动化任务，如网页截图、表单填写、点击操作等。

下面会更详细地介绍几个常用的方法。

元素获取

这些方法可以帮助我们在 Puppeteer 中获取页面元素：

const html = await page.content();

2. page.$(selector): 使用 document.querySelector 寻找指定元素。

const element = await page.$('.my-element');

3. page.$$(selector): 使用 document.querySelectorAll 寻找指定元素。

const elements = await page.$$('.my-elements');

4. page.$x(expression): 使用 XPath 寻找指定元素。

const element = await page.$x('//div[@class="my-element"]');

5. page.$eval(selector, pageFunction, …args?): 在页面中注入方法，执行 document.querySelector 后将结果作为第一个参数传给函数体。

const text = await page.$eval('.my-element', element => element.textContent);

6. page.$$eval(selector, pageFunction, …args?): 在页面中注入方法，执行 document.querySelectorAll 后将结果作为第一个参数传给函数体。

const texts = await page.$$eval('.my-elements', elements => elements.map(element => element.textContent));

页面操作

点击操作

• page.click(selector, options?): 点击选择器匹配的元素，有多个元素满足匹配条件仅作用第一个。

await page.click('.my-button');

• page.tap(selector): 点击选择器匹配的元素，有多个元素满足匹配条件仅作用第一个，主要针对手机端的触摸事件。

await page.tap('.my-button');

• page.focus(selector): 给选择器匹配的元素获取焦点，有多个元素满足匹配条件仅作用第一个。

await page.focus('.my-input');

• page.hover(selector): 鼠标悬浮于选择器匹配的元素，有多个元素满足匹配条件仅作用第一个。

await page.hover('.my-element');

输入操作

page.type 是 Puppeteer 中用于在指定元素上输入文本的方法。该方法接受两个参数：选择器和要输入的文本。

以下是 page.type 方法的用法示例：

await page.type('input[type="text"]', 'Hello, Puppeteer!');

在这个示例中，我们使用选择器 input[type="text"] 来定位页面上的一个文本输入框，并在该输入框中输入文本 'Hello, Puppeteer!'。

键盘模拟按键

page.keyboard 对象提供了一系列方法，可以模拟按键的按下、释放、输入等操作。

以下是一些常用的 page.keyboard 方法：

下面是一个示例代码，演示如何在输入框中模拟按键操作：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com');

// 获取要输入文本的输入框的选择器
const selector = 'input[type="text"]';

// 等待输入框加载完成
await page.waitForSelector(selector);

// 在输入框中模拟按键操作
await page.focus(selector); // 让输入框获得焦点
await page.keyboard.type('Hello, Puppeteer!'); // 输入文本
await page.keyboard.press('Enter'); // 模拟按下 Enter 键

await browser.close();

})();

在这个示例中，我们首先让输入框获得焦点，然后使用 page.keyboard.type 方法输入文本 'Hello, Puppeteer!'，最后使用 page.keyboard.press 方法模拟按下 Enter 键。

鼠标模拟

在 Puppeteer 中，可以使用 page.mouse 对象来模拟鼠标操作。page.mouse 对象提供了一系列方法，可以模拟鼠标的移动、点击、滚动等操作。

以下是一些常用的 page.mouse 方法：

下面是一个示例代码，演示如何在页面中模拟鼠标操作：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com');

// 获取要点击的元素的选择器
const selector = 'button';

// 等待元素加载完成
await page.waitForSelector(selector);

// 获取元素的位置
const element = await page.$(selector);
const boundingBox = await element.boundingBox();

// 在元素位置模拟鼠标点击
await page.mouse.click(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);

await browser.close();

})();

在这个示例中，我们首先等待页面中的按钮元素加载完成，然后获取按钮元素的位置信息，最后使用 page.mouse.click 方法在按钮元素的中心位置模拟鼠标点击操作。

事件监听

这些是 Puppeteer 中常用的页面事件，可以通过监听这些事件来执行相应的操作。以下是每个事件的简要说明：

• close: 当页面被关闭时触发。
• console: 当页面中调用 console API 时触发。
• error: 当页面发生错误时触发。
• load: 当页面加载完成时触发。
• request: 当页面收到请求时触发。
• requestfailed: 当页面的请求失败时触发。
• requestfinished: 当页面的请求成功时触发。
• response: 当页面收到响应时触发。
• workercreated: 当页面创建 webWorker 时触发。
• workerdestroyed: 当页面销毁 webWorker 时触发。

您可以通过以下示例代码来监听页面加载完成和页面请求成功的事件：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

// 监听页面加载完成事件

  page.on('load', () => {
console.log('Page loaded successfully');

  });

// 监听页面请求成功事件

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

  });

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

await browser.close();

})();

在这个示例中，我们使用 page.on 方法来监听页面加载完成和页面请求成功的事件，并在事件发生时打印相应的信息。

等待元素、请求、响应

在 Puppeteer 中，您可以使用以下方法来等待元素、请求和响应：

await page.waitForXPath('//div[@]', { visible: true });

2. page.waitForSelector(selector, options): 等待指定的选择器对应的元素出现。参数 options 可以包含 timeout 和 visible 选项。返回一个 ElementHandle 实例。

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

3. page.waitForResponse(predicate): 等待符合条件的响应结束。参数 predicate 是一个函数，用于判断响应是否符合条件。返回一个 Response 实例。

const response = await page.waitForResponse(response => response.url().includes('/api'));

4. page.waitForRequest(predicate): 等待符合条件的请求出现。参数 predicate 是一个函数，用于判断请求是否符合条件。返回一个 Request 实例。

const request = await page.waitForRequest(request => request.url().includes('/api'));

这些方法可以帮助您在 Puppeteer 中更精确地控制等待元素、请求和响应的时间，以便在需要时执行相应的操作。如果您有任何疑问或需要进一步的解释，请随时告诉我。我将很乐意帮助您。

网络拦截操作

page.setRequestInterception() 方法可以拦截页面中发出的网络请求，并对其进行处理。通过拦截请求，你可以修改请求的行为，例如阻止请求、修改请求的头部、修改请求的内容等。

以下是使用 page.setRequestInterception() 方法的一个示例：

const puppeteer = require('puppeteer');


(async () => {

  const browser = await puppeteer.launch();

  const page = await browser.newPage();


  // 启用请求拦截

  await page.setRequestInterception(true);


  // 监听请求事件

  page.on('request', (request) => {

    // 判断请求的 URL 是否符合条件

    if (request.url().includes('/api')) {

      request.continue(); // 继续请求

    } else {

      request.abort(); // 中止请求

    }

  });


  // 导航至指定 URL

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

  

    // 等待页面加载完成

  await page.waitForNavigation();

    

   // 获取符合条件的网络响应

  const responses = await page.waitForResponse(response => response.url().includes('/api'));

  // 获取接口数据

  const responseData = await responses.json();

  console.log(responseData);

  

  await browser.close();

})();

需要注意的是，在使用请求拦截功能时，务必要确保在请求被中止或继续之前，要么调用 interceptedRequest.abort() 中止请求，要么调用 interceptedRequest.continue() 继续请求，否则可能会导致页面无法正常加载。

简单示例

截图

在 Puppeteer 中实现截图可以通过 page.screenshot() 方法来实现。

以下是一个简单的示例代码，演示如何在 Puppeteer 中对页面进行截图：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

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

// 在当前目录下保存截图
await page.screenshot({ path: 'example.png' });

await browser.close();

})();

在上面的示例中，我们首先启动了一个 Puppeteer 浏览器实例，然后创建了一个新页面并访问了示例网站。接着使用 page.screenshot() 方法对页面进行截图，并将截图保存在当前目录下的 example.png 文件中。最后关闭了浏览器实例。

生成pdf

在 Puppeteer 中生成 PDF 可以通过 page.pdf() 方法来实现。

以下是一个简单的示例代码，演示如何在 Puppeteer 中生成 PDF：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

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

// 生成 PDF 并保存在当前目录下的 example.pdf 文件中
await page.pdf({ path: 'example.pdf', format: 'A4' });

await browser.close();

})();

在上面的示例中，我们首先启动了一个 Puppeteer 浏览器实例，然后创建了一个新页面并访问了示例网站。接着使用 page.pdf() 方法生成 PDF，并将其保存在当前目录下的 example.pdf 文件中。您还可以调整生成 PDF 的格式、尺寸、页面边距等参数。

设置cookie

在 Puppeteer 中设置 cookie 可以通过 page.setCookie() 方法来实现。

以下是一个简单的示例代码，演示如何在 Puppeteer 中设置 cookie：

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

// 设置 cookie
await page.setCookie({
name: 'username',
value: 'john_doe',
domain: 'www.example.com'

    });

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

// 在页面中获取 cookie
const cookies = await page.cookies();
console.log(cookies);

await browser.close();

})();

在上面的示例中，我们首先启动了一个 Puppeteer 浏览器实例，然后创建了一个新页面。接着使用 page.setCookie() 方法设置了一个名为 username 的 cookie，然后访问了示例网站。最后使用 page.cookies() 方法获取页面中的所有 cookie，并将其打印出来。

您可以根据需要设置更多的 cookie，以及设置 cookie 的路径、过期时间等属性。