【利用AI让知识体系化】深入浅出Puppeteer

news2025/1/11 21:51:16

在这里插入图片描述

文章目录

  • 1. Puppeteer简介
    • 1.1 什么是Puppeteer
    • 1.2 它能做什么
    • Puppeteer能够完成以下一些主要的操作：
    • 1.3 为什么要使用Puppeteer
  • 2. 安装和配置Puppeteer
    • 2.1 安装Puppeteer
    • 2.2 配置Puppeteer
    • 2.3 第一个Puppeteer程序
  • 3. Puppeteer的基础功能
    • 3.1 打开和关闭浏览器
    • 3.2 页面导航
    • 3.3 对页面进行截屏和截图
    • 3.4 控制页面元素
  • 4. Puppeteer的高级功能
    • 4.1 模拟用户行为
    • 4.2 处理表单和输入操作
    • 4.3 处理`JavaScript`的动态渲染
    • 4.4 网络请求与响应处理
  • 5. Puppeteer在实战中的应用
    • 5.1 自动化测试
    • 5.2 网页截图和可视化回归测试
    • 5.3 爬虫和数据挖掘
    • 5.4 其他应用场景
  • 6. 总结和展望
    • 6.1 Puppeteer的优点与不足
    • 6.2 Puppeteer的未来发展
    • 6.3 对Puppeteer的建议和意见

1. Puppeteer简介

1.1 什么是Puppeteer

Puppeteer是一个由谷歌开发的Node.js库，它提供了一组API，用于控制headless Chrome或Chromium浏览器的自动化工具。所谓headless浏览器是指浏览器在不显示界面的情况下运行，即无头模式。利用这些API，开发者可以实现自动化控制浏览器完成各种操作，如页面截图、模拟用户行为、表单填写、爬虫抓取和可视化回归测试等。

1.2 它能做什么

Puppeteer能够完成以下一些主要的操作：

  1. 打开和关闭headless Chromium浏览器并控制其页面的行为。
  2. 导航到不同的页面并等待页面加载完成或元素出现。
  3. 模拟用户行为，如鼠标和键盘操作、滚动页面等。
  4. 获取页面内容和信息并截图保存为图片或 PDF 文件。
  5. 控制与浏览器相关的网络请求和响应，如获取 Cookie 和执行 AJAX 请求等。
  6. 处理表单和输入操作，如填写数据和提交表单。
  7. 处理 JavaScript 的动态渲染和网页内容的爬虫和数据挖掘等操作。
  8. 实现可视化回归测试并自动生成测试报告和结果。

总之，Puppeteer简化了前端开发和测试的流程，提高了效率和可靠性。

1.3 为什么要使用Puppeteer

使用Puppeteer的主要原因有以下几个：

  1. 提高自动化测试效率：Puppeteer可以通过模拟用户操作，自动化完成页面测试，比如测试表单的呈现和提交或者测试网站和页面的可用性，大大提高了测试的效率。

  2. 提高测试质量：Puppeteer可以模拟各种情境进行测试，如测试几百台设备之间的工作流程或者测试黑名单和白名单，这对于提高测试质量和检测错误非常有帮助。

  3. 提高研发效率：Puppeteer可以也可以进行网页截图以及可视化回归测试等，使得研发更加简单。同时它可以自动生成网页表单的测试报告，这可以使得研发过程更为高效。

  4. 支持多种操作系统环境：Puppeteer不仅可以运行在Windows、Linux和macOS上，还可以控制多种浏览器，如Chrome、Firefox、Safari等，这使得它可以适用于不同的操作系统和浏览器环境。

  5. 提供丰富的API接口：Puppeteer提供了丰富的API接口，可以自由定制浏览器的操作，功能非常强大和灵活，通过这些接口，我们可以快速构建自己的项目，从而在很短的时间内得到所需要的结果。

2. 安装和配置Puppeteer

2.1 安装Puppeteer

安装Puppeteer需要Node.js的环境，如果没有安装Node.js，需要先安装。

以下是安装Puppeteer的步骤：

1. 打开命令行工具或终端，进入项目目录，运行以下命令安装Puppeteer：

npm install puppeteer

2. 如果在安装过程中遇到网络问题，可以使用国内的 npm 源或者打开代理，例如使用taobao镜像和淘宝代理：

npm install puppeteer --registry=https://registry.npm.taobao.org --proxy=http://user:password@your-proxy-server:port

3. 安装完成后，可以在项目中引入 Puppeteer 模块：

const puppeteer = require('puppeteer');

4. 如果在Windows环境下安装Puppeteer，可能会遇到 Python 的问题，可以先安装Python和Visual C++ Build Tools后再次尝试安装。

每次运行Puppeteer程序时，它会自动下载适用于您特定版本的Chromium浏览器，所以您不必手动安装或更新Chromium。

2.2 配置Puppeteer

Puppeteer在默认情况下使用的是最新版本的Chromium浏览器，但它也支持使用自定义的浏览器，另外，可以配置一些选项，以便控制浏览器的行为。

以下是配置Puppeteer的步骤：

1. 创建一个新的浏览器实例：

const browser = await puppeteer.launch();

默认情况下，它会使用最新版本的Chromium浏览器。如果需要使用自定义的Chrome或Chromium浏览器，可以在launch()方法中传入Options参数：

const browser = await puppeteer.launch({
  executablePath: '/path/to/chrome'
});

这里的executablePath是指向Chrome或Chromium可执行文件的完整路径。

2. 配置浏览器选项：

const browser = await puppeteer.launch({
  headless: true, // 是否开启无头模式
  slowMo: 250, // 放慢操作的速度，用于调试
  devtools: false // 是否打开开发工具
});

其中headless参数指定是否启用无头模式，slowMo参数可以放慢操作的速度，用于调试，devtools参数指定是否打开开发工具。

3. 创建一个新的页面对象：

const page = await browser.newPage();

运行以上代码将创建一个新的页面，它预计可以执行各种相应的操作。在页面对象上可以执行很多相关的操作，包括给定的URL导航、模拟滚动、模拟鼠标点按和移动等操作。

以上步骤就是 Puppeteer 的基本配置，开发者可以根据自己的需求修改相应的选项参数。

2.3 第一个Puppeteer程序

以下是一个使用 Puppeteer 操作浏览器的示例程序，实现了输入百度搜索框中的关键字并截图保存的功能：

const puppeteer = require('puppeteer');

async function main() {
  // 创建浏览器实例
  const browser = await puppeteer.launch();

  // 创建一个新页面
  const page = await browser.newPage();

  // 访问百度首页
  await page.goto('https://www.baidu.com/');

  // 输入搜索关键字
  const keyword = 'Puppeteer';
  await page.type('#kw', keyword);

  // 点击搜索按钮
  await page.click('#su');

  // 等待搜索结果页面加载完成
  await page.waitForNavigation();

  // 截图并保存为文件
  await page.screenshot({ path: 'baidu.png' });

  // 关闭浏览器
  await browser.close();
}

main();

这个程序首先创建一个浏览器实例，然后在实例中创建一个页面，并用goto()方法访问百度首页。然后，用type()方法输入搜索关键字，并用click()方法点击搜索按钮。页面会重新定向到搜索结果页面，程序会等待搜索结果页面加载完成。最后，用screenshot()方法截图并保存为文件，关闭浏览器。

在执行程序之前，需要确保安装了 Puppeteer，在命令行中进入程序所在的目录，运行node program.js，运行 之后，程序会打开一个 Chromium 浏览器并执行相关操作。程序运行成功后，会在当前目录下生成一个名为baidu.png的截图文件。

3. Puppeteer的基础功能

3.1 打开和关闭浏览器

Puppeteer 是一个Node.js 库，提供了一组 API, 可以控制一个 Chromium 或 Chrome 浏览器来进行自动化页面操作。其基础功能包括打开和关闭浏览器。

以下是通过 Puppeteer 打开和关闭浏览器的 Node.js 代码示例：

const puppeteer = require('puppeteer');

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

run();

该代码通过 puppeteer.launch() 方法打开一个新的浏览器实例。然后，使用 browser.newPage() 方法创建一个新的页面实例，并使用 page.goto() 方法访问指定网址。最后，使用 browser.close() 方法关闭浏览器。

当然，在以上基础功能的基础上，Puppeteer 提供了很多有用的 API 和方法，可以实现更多复杂的页面自动化操作。

3.2 页面导航

除了打开和关闭浏览器这一基础功能之外，Puppeteer 还可以通过页面导航实现自动化页面操作，比如前往指定的网址、回退、前进等。

以下是通过 Puppeteer 实现页面导航的 Node.js 代码示例：

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.type('input[name="q"]', 'Puppeteer');
  await page.click('input[type="submit"]');
  await page.waitForNavigation(); // 等待页面全部加载完毕
  console.log(page.url()); // 输出当前页面的 URL
  await browser.close();
}

run();

该代码通过 page.goto() 方法访问指定网址，然后使用 page.type() 方法输入搜索关键词，使用 page.click() 方法点击搜索按钮。最后，使用 page.waitForNavigation() 方法等待页面加载完成，并使用 page.url() 方法输出当前页面的 URL。

除了 page.goto() 方法之外，Puppeteer 还提供了许多其他页面导航相关的方法，比如 page.goBack() 方法回退到上一个页面，page.goForward() 方法前进到下一个页面，page.reload() 方法重新加载当前页面等。

3.3 对页面进行截屏和截图

Puppeteer 可以通过对页面进行截屏和截图来实现自动化页面操作中的一些需求。其中，截屏指的是将整个页面的屏幕内容作为一张图片进行保存，而截图则是只保存指定元素或区域的图片。

以下是通过 Puppeteer 实现对页面进行截屏和截图的 Node.js 代码示例：

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.screenshot({ path: 'example.png' }); // 截屏并保存为 example.png
  const element = await page.$('#hplogo'); // 获取指定元素
  await element.screenshot({ path: 'logo.png' }); // 对指定元素进行截图并保存为 logo.png
  await browser.close();
}

run();

该代码通过 page.goto() 方法访问指定网址，然后使用 page.screenshot() 方法对整个页面进行截屏，并将结果保存为 example.png 文件。接着，使用 page.$() 方法获取指定的元素，并使用该元素的 screenshot() 方法对该元素进行截图，并将结果保存为 logo.png 文件。

在编写代码时，还可以通过指定一些选项来控制截屏和截图的具体细节，比如截屏或截图的质量、宽度和高度、裁剪区域等。

除了以上示例中的截屏和截图操作之外，Puppeteer 还可以实现页面 PDF 导出、页面 CSS 和 JS 的提取等操作。

3.4 控制页面元素

在 Puppeteer 中，可以使用一系列的 API 控制页面元素，包括获取元素、修改元素属性、模拟用户操作等。

以下是 Puppeteer 控制页面元素的示例代码：

const puppeteer = require('puppeteer');

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

  // 获取元素
  const button = await page.$('button');

  // 修改元素属性
  await page.evaluate((button) => {
    button.style.backgroundColor = 'red';
  }, button);

  // 点击元素
  await button.click();

  // 输入文本
  await page.type('input[type="text"]', 'Puppeteer');

  // 提交表单
  await page.keyboard.press('Enter');

  // 等待新页面加载完成
  await page.waitForNavigation();

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，使用 page.$() 方法获取一个按钮元素，然后使用 page.evaluate() 方法修改按钮元素的背景色。接着，使用 button.click() 方法点击该按钮，使用 page.type() 方法在输入框中输入文本，使用 page.keyboard.press() 方法模拟 Enter 键的按下，提交表单。最后，使用 page.waitForNavigation() 方法等待新页面加载完成。

Puppeteer 还提供了其他方法来处理页面元素，比如 page.hover() 方法悬停在元素上、page.select() 方法选择下拉框中的选项等。通过这些方法，可以方便地模拟用户对页面的操作，实现各种自动化页面操作的需求。

4. Puppeteer的高级功能

4.1 模拟用户行为

通过 Puppeteer，可以模拟用户的页面行为，实现一些自动化的操作，比如点击按钮、输入文本、滚动页面等。

以下是 Puppeteer 模拟用户行为的示例代码：

const puppeteer = require('puppeteer');

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

  // 点击元素
  const button = await page.$('button');
  await button.click();

  // 输入文本
  await page.type('input[type="text"]', 'Puppeteer');

  // 模拟键盘操作
  await page.keyboard.press('Enter');

  // 模拟鼠标操作
  await page.mouse.click(100, 100);

  // 滚动页面
  await page.evaluate(() => {
    window.scrollBy(0, 100); // 向下滚动页面 100 像素
  });

  // 等待 1 秒
  await page.waitForTimeout(1000);

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，使用 page.$() 方法获取按钮元素，然后使用 button.click() 方法模拟点击操作。接着，使用 page.type() 方法模拟在输入框中输入文本，使用 page.keyboard.press() 方法模拟按下 Enter 键。之后，使用 page.mouse.click() 方法模拟鼠标点击，使用 page.evaluate() 方法滚动页面。最后，使用 page.waitForTimeout() 方法等待 1 秒，然后关闭浏览器。

除了以上示例中的操作之外，还可以模拟其他用户行为，比如悬停、拖拽等。通过这些方法，可以方便地实现各种自动化页面操作的需求。

4.2 处理表单和输入操作

在使用 Puppeteer 进行自动化测试时，经常需要处理表单及其输入操作。

以下是 Puppeteer 处理表单和输入操作的示例代码：

const puppeteer = require('puppeteer');

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

  // 等待搜索框出现并点击
  await page.waitForSelector('#kw');
  await page.click('#kw');

  // 输入文本
  await page.type('#kw', 'Puppeteer');

  // 点击搜索按钮
  await page.click('#su');

  // 等待搜索结果页面加载完成
  await page.waitForSelector('#content_left');

  // 获取搜索结果数量
  const resultCount = await page.evaluate(() => {
    return document.querySelectorAll('.result').length;
  });

  console.log(`搜索结果数量：${resultCount}`);

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，使用 page.waitForSelector() 方法等待搜索框出现，然后使用 page.click() 方法点击搜索框，并使用 page.type() 方法输入文本。接着，使用 page.click() 方法点击搜索按钮，并使用 page.waitForSelector() 方法等待搜索结果页面加载完成。之后，使用 page.evaluate() 方法获取搜索结果数量并输出。最后，关闭浏览器。

在处理表单时，有几个常用的方法：

  • page.type(selector, value[, options])：在指定的元素上输入文本，其中 selector 是元素选择器，value 是要输入的文本，options 是一些可选参数，比如 delay 表示输入每个字符的间隔时间，timeout 表示等待元素可见的最大时间等；
  • page.click(selector[, options])：点击指定的元素，其中 selector 是元素选择器，options 是一些可选参数，比如 button 表示要使用哪个鼠标键点击，clickCount 表示点击次数，delay 表示点击后等待的时间等；
  • page.select(selector, ...values)：选择下拉框中的选项，其中 selector 是下拉框的选择器，values 是要选择的选项值。

通过这些方法，可以方便地处理表单及其输入操作。

4.3 处理JavaScript的动态渲染

在使用 Puppeteer 进行自动化测试时，可能需要处理 JavaScript 动态渲染的页面。Puppeteer 默认情况下支持等待页面中的所有网络请求，但对于 JavaScript 动态渲染的数据，需要使用额外的方法来等待页面渲染完成。

以下是 Puppeteer 处理 JavaScript 动态渲染的示例代码：

const puppeteer = require('puppeteer');

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

  // 访问使用 JavaScript 动态渲染的页面
  await page.goto('https://example.com');

  // 等待指定元素出现
  const selector = 'div.result';
  await page.waitForSelector(selector);

  // 获取所有结果
  const results = await page.evaluate((selector) => {
    const elements = Array.from(document.querySelectorAll(selector));
    return elements.map((elem) => elem.innerText.trim());
  }, selector);

  console.log(results);

  // 关闭浏览器
  await browser.close();
}

run();

以上示例代码中，通过 page.waitForSelector() 方法等待页面中指定的元素出现，使用 page.evaluate() 方法获取指定元素的文本内容，并输出到控制台。最后，关闭浏览器。

除了 page.waitForSelector() 方法之外，Puppeteer 还提供了其他方法来等待页面渲染完成，包括：

  • page.waitForNavigation([options])：等待页面的导航完成；
  • page.waitForFunction(pageFunction[, options[, ...args]])：等待指定的函数在页面上执行完成，可以传入函数参数；
  • page.waitForTimeout(timeout)：等待指定时间。

通过这些方法，可以处理 JavaScript 动态渲染的页面，确保在正确的时间点获取到需要的数据。

4.4 网络请求与响应处理

在使用 Puppeteer 进行自动化测试时，常常需要处理网络请求与响应。
Puppeteer 提供了一些方法来拦截网络请求、修改请求 / 响应头、获取请求 / 响应数据等。

以下是 Puppeteer 处理网络请求与响应的示例代码：

const puppeteer = require('puppeteer');

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

  // 拦截网络请求
  await page.setRequestInterception(true);

  page.on('request', (request) => {
    // 忽略图片请求
    if (request.resourceType() === 'image') {
      request.abort();
    } else {
      request.continue();
    }
  });

  // 访问页面
  await page.goto('https://www.baidu.com');

  // 获取一张图片
  const image = await page.$('img');

  // 修改图片请求头
  await page.setRequestInterception(true);
  page.on('request', (request) => {
    if (request.resourceType() === 'image' && request.url() === image.src()) {
      request.continue({
        headers: {
          ...request.headers(),
          'Referer': 'https://example.com'
        }
      });
    } else {
      request.continue();
    }
  });

  // 确保图片加载完成
  await image.evaluate((img) => img.decode());

  // 获取页面源代码
  const html = await page.content();

  // 获取所有网络请求信息
  const requests = await page._client.send('Network.getAllRequestsWithResponse');

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，使用 page.setRequestInterception(true) 方法拦截网络请求，并通过 page.on('request', ...) 方法监听请求事件。在事件处理程序中，可以通过 request.resourceType() 方法判断请求类型，通过 request.url() 方法获取请求的 URL，使用 request.continue() 方法继续请求，或使用 request.abort() 方法取消请求。在示例中，忽略了图片请求。

使用 page.$() 方法获取一张图片元素，然后通过 page.on('request', ...) 方法监听请求事件，判断图片请求并修改请求头中的 Referer 字段。在获取图片前，使用 img.decode() 方法确保图片加载完成。之后，使用 page.content() 方法获取页面源代码，使用 _client.send('Network.getAllRequestsWithResponse') 方法获取所有网络请求信息，并输出到控制台。最后，关闭浏览器。

除了以上示例中的方法之外，Puppeteer 还提供了其他一些方法来处理网络请求与响应，包括：

  • page.setExtraHTTPHeaders(headers)：设置额外的请求头；
  • page.waitForRequest(urlOrPredicate[, options])：等待指定的网络请求，请参考 page.waitForNavigation() 方法；
  • page.waitForResponse(urlOrPredicate[, options])：等待指定的网络响应，请参考 page.waitForNavigation() 方法。

通过这些方法，可以方便地处理网络请求与响应，实现各种自动化测试需求。

5. Puppeteer在实战中的应用

5.1 自动化测试

Puppeteer 是一个强大的自动化测试工具，支持模拟用户行为、处理表单和输入操作、处理 JavaScript 动态渲染、处理网络请求和响应等。

以下是一个基本的 Puppeteer 自动化测试示例：

const puppeteer = require('puppeteer');

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

  // 访问页面
  await page.goto('https://www.baidu.com');

  // 输入文本并搜索
  await page.type('#kw', 'Puppeteer');
  await page.click('#su');

  // 等待搜索结果
  const resultSelector = '.result';
  await page.waitForSelector(resultSelector);

  // 获取搜索结果数量
  const resultCount = await page.evaluate((selector) => {
    const elements = Array.from(document.querySelectorAll(selector));
    return elements.length;
  }, resultSelector);

  console.log(`搜索结果数量：${resultCount}`);

  // 关闭浏览器
  await browser.close();
}

run();

以上示例中，使用 puppeteer.launch() 方法启动浏览器，并使用 browser.newPage() 方法创建一个新的页面。之后，使用 page.goto() 方法访问页面，并使用 page.type() 方法输入文本，使用 page.click() 方法点击搜索按钮，使用 page.waitForSelector() 方法等待搜索结果。接着，使用 page.evaluate() 方法获取搜索结果数量，并输出到控制台。最后，使用 browser.close() 方法关闭浏览器。

除了以上示例中的方法之外，还有许多其他的 Puppeteer API 可以使用来实现各种自动化测试需求，比如：

  • browser.newContext([options])：创建一个新的浏览器上下文；
  • page.setExtraHTTPHeaders(headers)：设置额外的请求头；
  • page.screenshot([options])：截取当前页面的屏幕截图；
  • page.evaluateHandle(pageFunction[, ...args])：在页面上下文中执行指定函数，并返回一个 JSHandle 对象；
  • page.emulate(emulateOptions)：模拟设备和用户代理。

通过这些方法，可以方便地实现各种自动化测试需求，为产品质量保障提供有力的技术支持。

5.2 网页截图和可视化回归测试

Puppeteer 提供了截图和可视化回归测试的 API，可以用来验证对 UI 的更改是否有影响。

下面是对网页进行截图和可视化回归测试的示例代码：

const puppeteer = require('puppeteer');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');

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

  // 访问网站
  await page.goto('https://www.baidu.com');

  // 截取页面截图并保存
  await page.screenshot({ path: 'example.png' });

  // 对比新截图是否与基准截图相同
  const expected = PNG.sync.read(fs.readFileSync('./expected.png'));
  const actual = PNG.sync.read(fs.readFileSync('./example.png'));
  const diff = new PNG({ width: expected.width, height: expected.height });

  pixelmatch(
    expected.data,
    actual.data,
    diff.data,
    expected.width,
    expected.height,
    { threshold: 0.1 }
  );

  diff.pack().pipe(fs.createWriteStream('./diff.png'));

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，使用 page.screenshot() 方法截取页面截图，并使用 PNG 类处理 PNG 图像数据。接着，使用 pixelmatch() 方法对比新截图与基准截图是否相同，如果存在差异，则使用 diff.pack().pipe() 方法生成差异图片。最后，关闭浏览器。

可视化回归测试并不是一个完全自动化的测试过程，需要人工介入来验证对 UI 更改的影响是否符合预期。不过，通过自动化截图和对比，可以节省大量手工测试的时间和精力，提升测试效率和质量。

5.3 爬虫和数据挖掘

Puppeteer 不仅能够用于自动化测试，还可以用于爬虫和数据挖掘。通过 Puppeteer，可以模拟浏览器行为，从而获取需要的数据。

以下是一个简单的 Puppeteer 爬虫示例：

const puppeteer = require('puppeteer');

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

  // 访问目标页面
  await page.goto('https://www.example.com');

  // 获取页面标题
  const title = await page.title();
  console.log(`页面标题：${title}`);

  // 获取所有链接
  const links = await page.$$eval('a', (links) => links.map((link) => link.href));
  console.log(`所有链接：${JSON.stringify(links, null, 2)}`);

  // 获取页面源代码
  const html = await page.content();
  console.log(`页面源代码：${html}`);

  // 关闭浏览器
  await browser.close();
}

run();

在以上示例中，通过 puppeteer.launch() 方法启动浏览器，并使用 browser.newPage() 方法创建一个新的页面。之后，使用 page.goto() 方法访问目标页面，并使用 page.title() 方法获取页面标题，使用 page.$$eval() 方法获取所有链接，使用 page.content() 方法获取页面源代码。最后，使用 browser.close() 方法关闭浏览器。

此外，Puppeteer 还提供了很多其他的 API，可以用来实现各种爬虫和数据挖掘的需求，例如：

  • page.waitForSelector(selector[, options])：等待指定的元素出现；
  • page.waitForNavigation([options])：等待页面的导航完成；
  • page.evaluate(pageFunction[, ...args])：在页面上下文中执行指定函数，可以使用 Array.from() 等方法获取指定元素的数据；
  • page.setRequestInterception(enabled)：开启或关闭网络请求拦截器。

通过这些 API，可以方便地爬取网站数据，实现各种自动化挖掘需求。需要注意的是，网站的访问和数据挖掘需要遵守相关法律法规和用户协议，不得非法获取和使用数据。

5.4 其他应用场景

除了自动化测试、网络爬虫和数据挖掘之外，Puppeteer 还有很多其他的应用场景。以下列举几个例子：

  • 自动化填写表单和提交表单；
  • 网站性能分析和优化；
  • 自动化生成 PDF、截图和 Gif 动图；
  • 模拟用户行为，进行自动化功能测试；
  • 构建 Web 数据可视化和分析工具。

需要注意的是，在使用 Puppeteer 进行自动化的过程中，需要遵守相关法律法规和用户协议，不得恶意攻击目标网站或进行不正当的行为。另外，自动化过程需要消耗大量的计算资源，需要谨慎使用。

Puppeteer 提供了丰富的 API，可以用于实现各种前端开发、测试和运维相关的需求，是一个非常强大且灵活的工具。

6. 总结和展望

6.1 Puppeteer的优点与不足

Puppeteer是一个用于端到端测试、自动化UI测试、页面爬取和Web应用程序控制等的Node.js库。这里是Puppeteer的优点和不足：

优点：

  1. 快速：Puppeteer使用了Google Chrome的开发者工具协议（DevTools Protocol），可以更快地与浏览器进行通信，并且可以在没有GUI的情况下运行Chrome，加快了测试速度。

  2. 易于使用：Puppeteer提供了易于使用的API，可以很快地编写测试脚本或爬虫程序，并且其文档非常完整。

  3. 提供丰富的控制能力：Puppeteer允许你控制Chrome浏览器的所有操作，比如页面的DOM元素、鼠标/键盘的事件触发、页面的滚动等等。

  4. 平台无关性：Puppeteer可以在多种操作系统上运行，不受浏览器和操作系统的限制。

不足：

  1. 内存占用量：Puppeteer将整个浏览器引擎直接嵌入到Node.js中，其占用内存较高，需要注意内存泄漏的问题。

  2. 与其他浏览器的兼容性：因为Puppeteer是为Chrome浏览器专门设计的，可能会出现在其他浏览器上出现的未知Bug等问题。

  3. 相对缺乏社区：虽然Puppeteer在GitHub上拥有广泛的社区支持，但相对于其他测试框架、库来说，其社区和资源还有待发展。

  4. 动态网页爬取的限制：Puppeteer虽然可以获取动态网页中的内容，但不能像静态网页那样直接从HTML源代码中获取内容，需要通过JS解析来获取动态生成的内容，这可能会导致性能下降。

6.2 Puppeteer的未来发展

在未来，Puppeteer的发展将重点关注以下几个方向：

  1. 性能和稳定性的持续提升：Puppeteer将继续优化其内部逻辑和算法，以提高其运行速度和稳定性。其中还可能包括更好的内存管理，以减少内存泄漏等问题。

  2. 兼容性的扩展：尽管Puppeteer是为Chrome浏览器特别设计的，但未来可能会扩展到其他主流浏览器，以适应更多的实际应用场景。

  3. 更多的生态支持：随着Puppeteer社区的不断发展壮大，可能会出现更多的第三方库和工具，以优化和扩展Puppeteer的功能和使用方式。

  4. 更多的智能扩展：未来Puppeteer可能会加入更多AI技术，以提高其智能化程度，例如基于机器学习算法的自动化UI测试，以及智能爬虫等。

总之，随着Web应用的不断发展和更新，对于Puppeteer的需求也会不断增加。因此，Puppeteer将不断优化自己的功能和性能，以适应更多实际应用场景和需求。

6.3 对Puppeteer的建议和意见

作为Puppeteer的使用者，我有以下几点建议和意见：

  1. 更好的错误提示：在实际使用中，有时可能会出现某些操作失败或出现错误，但难以准确地定位问题所在。因此，我希望Puppeteer能提供更明确、更具体的错误提示，以帮助用户更快地找到问题所在。

  2. 文档更加详细：虽然Puppeteer已经提供了很好的文档，但有些内容还是过于简略或不够详细。我希望Puppeteer能提供更多实用的示例代码以及更详细的API文档，以方便开发者更快地上手和使用。

  3. 扩展性更好：Puppeteer已经支持了一些常见的操作，但在实际应用中可能会有更多需要扩展的场景。我希望Puppeteer能提供更好的扩展接口，方便开发者自定义和拓展Puppeteer的功能。

  4. 结合更多的测试框架：虽然Puppeteer已经对许多测试框架提供了支持，但仍有一些测试框架尚未被覆盖。我希望Puppeteer能结合更多的测试框架，满足更多不同的测试需求。

总之，我认为Puppeteer已经是一款非常强大、易用的测试框架，可以方便地进行端到端测试、自动化UI测试和爬虫等。但它依然可以不断改进，以适应更多的实际应用场景和需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/561323.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

chatgpt赋能Python-python_pd合并

chatgpt赋能Python-python_pd合并

Python数据分析：探秘pd合并 在Python数据分析的过程中，经常需要对多个数据表进行合并操作以便进行有意义的分析。在Python中，使用pandas库中的merge()函数或者concat()函数可以很容易地完成数据合并。 merge()函数 merge()函数是pandas库中…
阅读更多...
shell 脚本命令

shell 脚本命令

文章目录 一.sort命令实验 二.uniq命令命令演示 三.tr命令命令演示 四.cut命令命令演示 五.split命令六.paste命令实验演示 七.eval命令 一.sort命令 以行为单位对文件内容进行排序，也可以根据不同的数据类型来排序比较原则是从首字符向后，依次按ASCII码…
阅读更多...
chatgpt赋能Python-python_nonetype

chatgpt赋能Python-python_nonetype

Python Nonetype：什么是Nonetype以及如何处理？ 在Python编程中，你可能会遇到NoneType，也就是None类型。如果你不知道NoneType是什么，它可以导致代码中的错误。 什么是NoneType？ NoneType表示空值或者没有…
阅读更多...
【数据结构】二叉树顺序结构、链式结构的实现、遍历二叉树（前序 中序 后序 层序）

【数据结构】二叉树顺序结构、链式结构的实现、遍历二叉树（前序 中序 后序 层序）

文章目录 1.二叉树结构实现1.1顺序结构的实现1.2链式结构的实现 2.堆的概念和介绍3.二叉树的遍历3.1前序遍历3.2中序遍历3.3后序遍历3.4层序遍历 1.二叉树结构实现 1.1顺序结构的实现 在之前的文章中，我们对二叉树有了一定的了解，这里我们会对二叉树再进…
阅读更多...
el-table实现可拖拽移动列和动态排序字段

el-table实现可拖拽移动列和动态排序字段

🍿*★,*:.☆(￣▽￣)/$:*.★* 🍿 🍟欢迎来到前端初见的博文，本文主要讲解在工作中以一个案例el-table实现可拖拽移动列和动态排序字段🍟 👨‍🔧 个人主页 : 前端初见 &…
阅读更多...
chatgpt赋能Python-python_nanmean

chatgpt赋能Python-python_nanmean

Python的nanmean函数：用于计算数组的平均值 Python引入的nanmean函数是一种快速而有效的计算数组平均值的方法。与其他Python中的平均值函数不同，nanmean函数可以处理NaN值，即缺失值。在数据科学和统计学中，处理缺失值是一个常见…
阅读更多...
chatgpt赋能Python-python_nontype

chatgpt赋能Python-python_nontype

介绍Python中的NoneType: 完整的解释和实例 在Python编程中，有一个特殊的数据类型叫做"NoneType"，它通常被简称为"None"。这个数据类型被用于表示没有值或空值（null）。在本文中，我们将探索NoneTy…
阅读更多...
1.4集合的运算定律

1.4集合的运算定律

阅读更多...
Spring(五大类注解，对象的三种注入方式及其优缺点)

Spring(五大类注解，对象的三种注入方式及其优缺点)

目录 1.存储 Bean 对象 1.1前置工作:配置扫描路径 1.2添加注解存储 Bean 对象 1.2.1 Controller [控制器存储] 1.2.2 Service（服务存储） 1.2.3 Repository（仓库存储） 1.2.4 Component（组件存储） 1.…
阅读更多...
chatgpt赋能Python-python_os怎么用

chatgpt赋能Python-python_os怎么用

Python OS模块：让你的文件操作更高效 在Python编程中，文件和文件夹的操作是非常常见的，例如创建、删除、修改、读取等等。这些任务都需要使用操作系统的命令，但是如果每次都手动调用操作系统命令，这样会使编程效率低下…
阅读更多...
Vulkan Tutorial 2 presentation

Vulkan Tutorial 2 presentation

目录 5 窗口表面 6 交换链 7 图像视图 5 窗口表面 由于Vulkan是一个与平台无关的API，它自己不能直接与窗口系统对接。为了在Vulkan和窗口系统之间建立连接，将结果呈现在屏幕上，我们需要使用WSI（窗口系统集成）扩展。…
阅读更多...
【瑞萨RA_FSP】DMAC/DTC——直接存储器访问与数据传输

【瑞萨RA_FSP】DMAC/DTC——直接存储器访问与数据传输

文章目录 一、DMAC和DTC模块简介1. DMAC 特性2. DTC 特性 二、DMAC 模块框图分析三、DMAC 传输模式1. 正常传输模式2. 重复传输模式3. 块传输模式4. 重复-块传输模式 四、DTC 模块框图分析五、DTC 传输模式1. 正常传输模式2. 重复传输模式3. 块传输模式 六、DMAC和DTC关键特性对…
阅读更多...
WMS 概述 -- “窗口管理员“

WMS 概述 -- “窗口管理员“

WMS 概述 -- "窗口管理员" 1、WMS 职责2、涉及元素3、WMS、AMS与Activity间的关系 1、WMS 职责 WMS职责理解窗口管理WMS 是窗口的管理者，它负责窗口的启动、添加和删除，另外窗口的大小和层级也是由WMS 进行管理的。窗口管理的核心成员有 Disp…
阅读更多...
结构体总结

结构体总结

目录 1.普通结构体 2.定义结构体并同时建立变量 3.匿名结构体 4.typedef重命名 5.typedef省略结构体名字 6.结构体数组 7.结构体指针 8.结构体嵌套 9.结构体链表（头插法） 10.结构体中的函数指针 11.结构体的构造函数和初始化列表 1.普通结构体 stru…
阅读更多...
chatgpt赋能Python-python_paas

chatgpt赋能Python-python_paas

Python PaaS：简介和未来趋势 随着云计算的不断普及，PaaS（平台即服务）正在成为越来越受欢迎的选择。PaaS可以帮助企业轻松构建、部署和管理应用程序，无需担心底层基础架构的问题。在PaaS领域，Python正在成为…
阅读更多...
2023年护网蓝队初级面试总结

2023年护网蓝队初级面试总结

00.护网面试步骤是什么样的 投递简历-安全服务公司HR先筛选一下简历，交给技术负责人面试一下，推荐给安全厂商（360、奇安信、安恒、绿盟） 安全设备厂商HR筛选一下简历，安全设备厂商安排技术笔试和面试（技术…
阅读更多...
Kubernetes高可用集群二进制部署（Runtime Docker）v1.21版本

Kubernetes高可用集群二进制部署（Runtime Docker）v1.21版本

Kubernetes高可用集群二进制部署（Runtime Docker） Kubernetes（简称为：k8s）是Google在2014年6月开源的一个容器集群管理系统，使用Go语言开发，用于管理云平台中多个主机上的容器化的应用&#xf…
阅读更多...
chatgpt赋能Python-python_num怎么用

chatgpt赋能Python-python_num怎么用

Python Num怎么用？一个有10年Python编程经验的工程师来告诉你 Python是一种被广泛应用的编程语言，它的发展历程已经超过了20年。而其中的NumPy库则成为了Python编程中最重要的一部分之一。NumPy是一个Python库，它提供了大量针对数字的操作函…
阅读更多...
AI宝典：AI超强工具大整合

AI宝典：AI超强工具大整合

😄😄个人介绍 光子郎.进行开发工作七年以上，目前涉及全栈领域并进行开发。会经常跟小伙伴分享前沿技术知识，java后台、web前端、移动端（Android，uniapp，小程序）相关的知识以及经验体…
阅读更多...
微服务实战项目-学成在线-项目介绍以及环境搭建

微服务实战项目-学成在线-项目介绍以及环境搭建

学成在线-项目介绍&环境搭建 1.项目背景 1.1 在线教育市场环境 以下内容摘自https://report.iresearch.cn/content/2021/01/358854.shtml 在线教育行业是一个有着极强的广度和深度的行业，从校内到校外；从早幼教到职业培训；从教育工具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023