无头浏览器测试：如何使用 Puppeteer 和 Browserless？

news2024/10/18 17:06:28

什么是无头浏览器测试？

无头浏览器测试通常指没有头的物体或东西，在浏览器的语境中，它指的是没有 UI 的浏览器模拟。无头浏览器自动化使用 Web 浏览器进行端到端测试，而无需加载浏览器的 UI。

  • 无头模式是一个功能，它允许执行浏览器的完整版本，同时以编程方式控制它。
  • 它们通过命令行界面或使用网络通信执行。这意味着它可以在没有图形或显示的服务器上使用，并且 Selenium 测试仍然可以运行！
  • 当网页没有在屏幕上渲染，并且测试在没有 UI 交互的情况下执行时，执行速度比实际浏览器自动化更快。

Puppeteer 的功能

Puppeteer 的一些主要功能包括：

  1. 无头浏览: Puppeteer 可以控制 Chrome 或 Chromium 的无头版本，这意味着浏览器可以在没有图形用户界面 (GUI) 的情况下运行。这使它能够高效地执行后台任务和自动化。
  2. 自动化任务: Puppeteer 允许您模拟用户交互，例如浏览页面、点击按钮、填写表单等。它还可以自动访问网页并提取数据，适合数据收集和分析。
  3. 页面操作: 您可以通过注入 JavaScript 代码、更改样式和操作 DOM（文档对象模型）来修改网页内容。
  4. 屏幕截图和 PDF 生成: Puppeteer 可以截取屏幕截图或将网页导出为 PDF 格式。这对于创建视觉报告和文档非常有用。
  5. 网络监控: Puppeteer 可以拦截和修改网络请求和响应，用于调试或测试不同的网络场景。
  6. 性能分析: 获取页面加载时间和资源使用量等性能指标，以帮助优化网页性能。
  7. 网页抓取: Puppeteer 通常用于网页抓取任务，因为它可以像真实用户一样与网站交互，从而从动态和 JavaScript 繁重的页面中提取数据。
  8. 测试: Puppeteer 通常用于自动化 Web 应用程序的端到端测试。它可以模拟用户行为和交互，以确保您的 Web 应用程序按预期运行。
  9. 无头和有头模式: 它可以在无头模式下运行，也可以在有头模式下调试，这对开发和测试很方便。

Puppeteer 中的“无头”是什么意思？

Puppeteer 是一个 Node.js 库，用于控制 Chrome 或 Chromium 浏览器，主要用于自动化测试、网页抓取和生成 PDF 等任务。“无头”在 Puppeteer 中指的是可以无需用户界面运行的浏览器实例。

换句话说，浏览器在后台运行，不会显示可以与之进行视觉交互的窗口。相反，它以编程方式执行任务，并且可以通过脚本或代码进行控制。

Puppeteer 允许您控制具有可见 GUI 的常规浏览器实例和无头浏览器实例。无头模式对于网页抓取、自动化测试以及生成屏幕截图或 PDF 等任务特别有用，因为它允许以高效的方式执行这些任务，而不会显示浏览器窗口。

使用 Puppeteer 无头模式的一些好处：

  1. 性能: 无头模式下的浏览器通常比图形浏览器运行速度更快，因为它们不必渲染和显示网页的视觉元素。
  2. 资源效率: 由于没有显示图形用户界面，因此无头浏览器比运行带有 GUI 的完整浏览器占用更少的内存和 CPU 资源，这使得它们适合在服务器上或在 CI/CD 环境中运行。
  3. 后台任务: 无头浏览器非常适合无需用户交互或视觉反馈的自动化任务，例如网页抓取和自动化测试。
  4. 服务器端操作: 无头浏览器可以在服务器环境中使用，以在没有物理显示的情况下自动化任务。
  5. 自动化: 可以编写脚本以模拟用户浏览器操作，例如点击、输入、屏幕截图等，而无需人工干预。

无头浏览器对于需要与网站进行自动交互、数据提取、测试以及其他不需要视觉渲染的操作的任务特别强大。

您对网页抓取和 Browserless 有什么奇妙的想法或疑问？
让我们看看其他开发人员在 Discord 和 Telegram 上分享了什么！

如何使用 Puppeteer 和 Browserless 进行无头浏览器测试？

让我们在接下来的内容中找出答案！

使用 Browserless 在 Puppeteer 中运行无头测试

初始化环境

在测试之前，我们需要有一个 Browserless 服务。Browserless 可以帮助我们解决复杂的 Web 抓取和大型自动化任务。借助完全托管的成果的云部署，Browserless 具有更强大的功能。

Browserless 采用以浏览器为中心的策略，提供强大的无头部署能力，并提供更高的性能和可靠性。请阅读文档教程了解有关 Browserless 服务配置的更多信息。

  • 我们需要首先获取 Nstbrowser 的 API KEY。您可以访问 Nstbrowser 客户端的 Browserless 菜单页面：

确定测试用例目标

完成环境初始化后，我们需要进一步确定测试目标。

我们将只学习一个使用 Puppeteer 与 Browserless 的示例，而没有特定的网页。请根据您的目标网站和要求指定样本。

这里，让我们使用 Puppeteer 获取页面的标题并创建屏幕截图。之后，我们将把它与 Jest 结合起来编写测试用例。

以下是我们主要的测试内容：

  1. 页面的标题是否为目标标题
  2. 屏幕截图是否包含目标元素

项目初始化

接下来，请按照以下步骤安装 Puppeteer 并运行测试脚本：

步骤 1: 在 Vs code 中创建一个新文件夹

步骤 2: 打开 Vs code 终端并运行以下命令以安装相关依赖项

npm init -y
pnpm add jest jest-html-reporter puppeteer-core

步骤 3: 完成相关文件

1. 创建 jest.config.js 配置文件以执行相关配置：

module.exports = {
  testTimeout: 10000, // 10 秒
  reporters: [
    'default',
    [
      'jest-html-reporter',
      {
        pageTitle: 'Test Report',
        outputPath: './test-report.html',
        includeFailureMsg: true,
        includeConsoleLog: true,
      },
    ],
  ],
};

2. 创建 __tests__/puppeteer.spec.js 测试脚本

要启动浏览器，您需要传入相关的配置（有关完整配置，请参考 LaunchNewBrowser）

const puppeteer = require('puppeteer-core');

describe('My First Puppeteer Test', () => {
  it('should load the page and check the title', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const title = await page.title();
    expect(title).toBe('Example Domain');

    await browser.close();
  });

  // 拍摄页面的屏幕截图
  it('should take a screenshot of the page', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

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

    await browser.close();
  });
});

async function launchAndConnectToBrowser() {
  const token = ''; // 您从 nstbrowser 获取的 api token
  const config = {
    proxy:
      '', // 必需；输入格式：schema://user:password@host:port 例如：http://user:password@localhost:8080
    // platform: 'windows', // 支持：windows、mac、linux
    // kernel: 'chromium', // 只支持：chromium
    // kernelMilestone: '128', // 支持：128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // 浏览器参数
    // fingerprint: {
    //     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent 支持从 v0.15.0 开始
    // },
  };
  const query = new URLSearchParams({
    token: token, // 必需
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  return browserWSEndpoint;
}

运行项目

现在我们只需要打开控制台并运行以下脚本命令：

npx jest --detectOpenHandles

这里的命令可以主要分解为：

  • 使用 npx 命令执行 jest 命令。
  • jest 将找到当前项目的 jest.config.js 配置文件并获取基本配置信息。
  • 根据配置文件的内容，在当前项目目录中找到匹配的测试文件并开始执行。

结果输出

执行上述命令后，我们将看到以下输出。这里，测试执行过程的每个重要结果都会被输出，并且它向我们展示了我们的测试用例已经通过。

同时，我们可以打开 test-report.html 文件查看生成的具体报告：

项目的文件夹结构如下。我们还可以看到输出的屏幕截图文件内容，这意味着我们的测试用例已经完全通过。

Puppeteer 无头测试的好处

  1. 与真实浏览器相比，无头浏览器测试速度更快，因为它消耗的系统资源更少。
  2. 它提高了测试执行性能，因为它通常比实际浏览器测试快 2 倍。
  3. 它非常适合网页抓取。假设您需要通过 Puppeteer 自动化从网页中获取大量数据（体育数据、股票数据等）并将其存储在任何 Excel 或数据库中。在这种情况下，Puppeteer 无头模式是最佳选择，因为不需要启动真实浏览器来验证 UI，主要重点是获取数据。
  4. 它有助于在单个系统上模拟多个浏览器，而不会造成资源开销。
  5. 它适合并行测试。基于 UI 的浏览器会消耗大量的内存和资源。因此，Puppeteer 无头浏览器在这里是更好的选择。

使用 Puppeteer 无头测试的 7 个最佳实践

  1. 管理资源使用: 由于 Puppeteer 无头模式在没有图形界面的情况下运行，因此它更快且使用更少的资源。但是，在运行多个实例时，仍然需要管理内存和 CPU 使用量。利用 Puppeteer 的内置功能，例如页面池和高效的选项卡管理，可以减少资源消耗。
  2. 处理超时和重试: 网页抓取或自动化任务可能会遇到网络延迟或超时。设置适当的超时值并实现重试逻辑可以确保您的脚本能够处理间歇性故障而不会崩溃。
  3. 明智地等待元素: 在执行操作之前，请始终等待所需的元素加载。不要使用静态延迟（例如 page.waitForTimeout），而是优先等待特定事件或元素 (page.waitForSelector)，这使您的自动化更有效率，并且更能抵抗不同的加载时间。
  4. 使用隐身上下文进行隔离: 为了避免数据泄漏并确保每次测试或抓取都在干净的环境中运行，请使用隐身上下文 (browser.createIncognitoBrowserContext)。这可以防止缓存数据、cookie 或本地存储影响后续会话。
  5. 利用无头检测绕过: 许多网站会检测无头浏览器，并且可能会阻止或向这些请求提供有限的内容。使用诸如修改浏览器标志、覆盖用户代理以及欺骗 Web 功能（例如 navigator.webdriver 删除）之类的技术可以帮助绕过无头检测。
  6. 监控性能和日志: 使用 Puppeteer 的性能和控制台日志工具来调试和优化脚本。监控页面性能指标和处理浏览器日志可以帮助诊断瓶颈和其他问题。
  7. 针对可扩展性进行优化: 如果您计划在大型规模上运行 Puppeteer，请考虑使用 Docker 进行容器化、使用负载均衡器以及并行运行多个浏览器实例。这些步骤有助于确保可扩展性并在生产环境中减少停机时间。

总结

Puppeteer 无头浏览器 使一切都变得容易。在本博文中，我们旨在与您分享：

  • 强大的功能
  • 以及使用 Browserless 与 Puppeteer 无头模式的高效步骤

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

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

相关文章

SpringBoot1~~~

SpringBoot1~~~

目录 快速入门 依赖管理和自动配置 修改自动仲裁/默认版本号 starter场景启动器 自动配置 修改默认扫描包结构 修改默认配置 读取application.properties文件 按需加载原则 容器功能 Configuration Import ​编辑 Conditional ImportResource 配置绑定Configur…
阅读更多...
一款AutoXJS现代化美观的日志模块AxpLogger

一款AutoXJS现代化美观的日志模块AxpLogger

简介 Axp Logger是一款基于autox.js的现代化日志模块，具备窗口事件穿透、拖拽和缩放功能。 Axp Logger文档 特性现代化的UI设计支持点击穿透模式（不影响脚本运行）监听音量-键切换模式支持窗口操作模式窗口拖拽移动窗口自由缩放清空日志关闭日…
阅读更多...
高精-阶乘和-保姆级教程

高精-阶乘和-保姆级教程

提供50的阶乘30414093201713378043612608166064768844377641568960512000000000000； 显然要做这题，int 或者 long long 类型的整型放不下这么长的数据所以我们要使用数组用高精度实现； 然后容易想到这题 肯定要用到高精度乘法和高精度加法&…
阅读更多...
外包干了3周，技术退步太明显了。。。。。

外包干了3周，技术退步太明显了。。。。。

先说一下自己的情况，大专生，21年通过校招进入武汉某软件公司，干了差不多3个星期的功能测试，那年国庆，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我才在一个外包企业干了3周的功…
阅读更多...
Qt（10.11）

Qt（10.11）

数据表 源代码&#xff1a; #include "widget.h" #include "ui_widget.h" #include<QMessageBox>//消息对话框 #include<QDebug> #include<QSqlRecord> Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui-&g…
阅读更多...
十、pico+Unity交互开发教程——射线抓取与更多交互功能

十、pico+Unity交互开发教程——射线抓取与更多交互功能

一、回顾与引入 回顾上一篇直接抓取的教程&#xff0c;VR交互一般需要可交互的对象&#xff08;Interactable&#xff09;和发起交互的对象&#xff08;Interactor&#xff09;。直接抓取和射线抓取的可交互对象无区别&#xff0c;可参考上一篇教程设置组件。两者区别在于发起…
阅读更多...
【Vercel】Vercel静态部署踩坑

【Vercel】Vercel静态部署踩坑

背景 在现代的软件开发中&#xff0c;自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台&#xff0c;提供了与GitHub的无缝集成&#xff0c;使得开发者能够在每次提交代码后自动触发部署流程。然而&#xff0c;自动化部署过程中可能会遇到一些挑战&#xff0…
阅读更多...
性能测试：流量回放工具-GoReplay！结合一款无需CA证书即可抓取HTTPS明文的工具，简直无敌

性能测试：流量回放工具-GoReplay！结合一款无需CA证书即可抓取HTTPS明文的工具，简直无敌

性能测试&#xff1a;流量回放工具-GoReplay&#xff01;结合一款无需CA证书即可抓取HTTPS明文的工具&#xff0c;简直无敌。 GoReplay 是一个开源网络监控工具&#xff0c;可以将实时 HTTP 流量捕获并重放到测试环境。 应用成熟的过程中&#xff0c;测试所需的工作量往往会成…
阅读更多...
学习干货小白女友看完这篇文章后，面试工作和护网蓝队初级竟然秒通过！

学习干货小白女友看完这篇文章后，面试工作和护网蓝队初级竟然秒通过！

小白女友看完这篇文章后&#xff0c;面试工作和护网蓝队初级竟然秒通过&#xff01; 前言&#xff1a;本文中涉及到的相关技术或工具仅限技术研究与讨论&#xff0c;严禁用于非法用途&#xff0c;否则产生的一切后果自行承担&#xff0c;如有侵权请联系。 还在学怎么挖通用漏…
阅读更多...
【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…
阅读更多...
Axure树形菜单展开与折叠

Axure树形菜单展开与折叠

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;Axure树形菜单展开与折叠 主要内容&#xff1a;树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互 应用场景&#xff1a;关系树、菜…
阅读更多...
老机MicroServer Gen8再玩 OCP万兆光口+IT直通

老机MicroServer Gen8再玩 OCP万兆光口+IT直通

手上有一台放了很久的GEN8微型服务器&#xff0c;放了很多年&#xff0c;具体什么时候买的我居然已经记不清了 只记得开始装修的时候搬家出去就没用了&#xff0c;结果搬出去有了第1个孩子&#xff0c;孩子小的时候也没时间折腾&#xff0c;等孩子大一点的时候&#xff0c;又有…
阅读更多...
MongoDB查询操作

MongoDB查询操作

&#x1f337;启动mongo &#x1f388;启动mongo shell &#xff08;1&#xff09;在指定目录下创建mongodb文件夹、其子文件夹data、log以及文件mongodb.log cd /home/ubuntu mkdir -p mongodb/data mkdir -p mongodb/log touch mongodb/log/mongodb.log(2)先执行mongodb命…
阅读更多...
《计算机视觉》—— 疲劳检测

《计算机视觉》—— 疲劳检测

文章目录 一、疲劳检测实现的思想二、代码实现 一、疲劳检测实现的思想 了解以下几篇文章有助于了解疲劳检测的方法 基于dlib库的人脸检测 https://blog.csdn.net/weixin_73504499/article/details/142977202?spm1001.2014.3001.5501 基于dlib库的人脸关键点定位 https://blo…
阅读更多...
基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的自动回复

基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的自动回复

目录 1.根据需要自动回复某些主题 2.调用doReply方法进行自动回复 1.根据需要自动回复某些主题 根据主题判断&#xff0c;哪些主题是需要自动回复的&#xff0c;比如设备登录&#xff0c;需要自动回复。 2.调用doReply方法进行自动回复&#xff08;代码不一定全部正确&#xf…
阅读更多...
第 5 章：vuex

第 5 章：vuex

1. 理解 vuex vuex 是什么&#xff1a; 概念&#xff1a;专门在 Vue 中实现集中式状态&#xff08;数据&#xff09;管理的一个 Vue 插件&#xff0c;对 vue 应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&am…
阅读更多...
安乃达：用CRM构建从销售到管理到售后的全链路数字化运营平台

安乃达：用CRM构建从销售到管理到售后的全链路数字化运营平台

安乃达驱动技术(上海)股份有限公司((简称&#xff1a;“安乃达”,股票代码为&#xff1a;“603350”))自2011年以来&#xff0c;公司通过多年的研发与积累现有直驱轮毂电机、减速轮毂电机和中置电机三大系列产品&#xff0c;并具备与电机相匹配的控制器、传感器、仪表等电驱动成…
阅读更多...
springboot旧物置换网站

springboot旧物置换网站

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…
阅读更多...
ThinkPHP 3.2 + Nginx 页面404问题

ThinkPHP 3.2 + Nginx 页面404问题

学习公司Callout项目时&#xff0c;发现公司项目所使用的TP版本是3.2&#xff0c;所以才可以使用例如&#xff0c;C,M,A等方法 因此我用phpEnv搭建了一个项目&#xff0c;域名为thinkphp&#xff0c;所选根目录如下 我打开网页&#xff0c;访问 thinkphp/ 和 thinkphp/index.p…
阅读更多...
ROS 的 urdf 中 link 和 joint 的子标签中 origin 的含义

ROS 的 urdf 中 link 和 joint 的子标签中 origin 的含义

主要参考文章——主要文章&#xff0c;官方关于urdf的介绍和官方文档的翻译解析 link标签里面的origin含义 link标签里面有三个主要的子标签&#xff0c;分别是visual——连杆的外观和坐标系&#xff0c;collisoin——连杆的碰撞属性和inertial——连杆的惯性设置 首先&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023