网站测试自动化入门 |无浏览器指南

奖励：如果您喜欢我们的内容和这篇“网络自动化测试”文章，您可以加入我们的网络浏览器自动化 松弛社区 .

软件开发生态系统处于不断变化的状态。在构建网站和其他应用程序时尤其如此。不仅您使用的技术在变化，而且要求和验收标准也在变化。这就是无头架构等技术可以帮助持续集成和持续交付 (CI/CD) 的地方。

在本文中，我们将介绍网站测试自动化。具体来说，我们将讨论使用 Puppeteer 和 Browserless 进行 UI 自动化测试。除了 Browserless（即 Playwright）之外，还有其他库可以用于网站测试自动化，但为了本文的目的，我们将使用 Puppeteer。如果您想了解有关选择哪种浏览器自动化工具的更多信息 查看 Browserless 博客上的另一篇文章 .

无浏览器 和 Puppeteer 无缝集成到您的项目中，让您随时掌握测试和不断变化的需求。我们将介绍这两种工具的含义，并做一些简单的示例。

顺便说一句，很多大品牌都使用 Browserless 来进行网站测试自动化，例如， 这是轮回的实现方式 .

无头浏览器测试

首先，让我们解释一下什么是无头浏览器测试。无头浏览器测试允许在没有任何图形用户界面 (GUI) 的情况下自动控制网页。这允许测试人员/用户/QA/开发人员做 在 Web 应用程序上进行自动化测试 无需手动测试我们在显示器上直观看到的浏览器的功能。想象一下让机器人为您测试您的应用程序！这几乎就是无头浏览器测试的内容，只是通常它是一个简单的脚本。无头浏览器测试加快了测试过程，同时还在开发过程中提供了快速反馈。

Puppeteer 和无浏览器

那么，您可能在想 Puppeteer 和 Browserless 如何适应这个等式？

Puppeteer 提供了一个很棒的高级 API 来控制 Chrome（无头和非无头）。 Puppeteer 由 Chrome DevTools 团队维护。您可以在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成。这让我们可以轻松地执行操作来测试我们 UI 的功能。 Puppeteer 还允许我们在对应用程序执行操作以进行测试时生成页面的屏幕截图和 PDF。

Puppeteer 本身就是用于网站测试自动化的好工具。但是，无浏览器可以将您的网络浏览器自动化提升到一个新的水平。假设您想在生产环境中运行测试，但不想将 Puppeteer 添加为额外的依赖项。这就是无浏览器来救援的地方。使用 Browserless，无需安装额外的包或依赖项，并且与 Puppeteer 兼容。 您需要做的就是即插即用 .这会减轻您的应用程序的巨大负担。您可以在开发环境中使用 Puppeteer 运行测试，同时在生产环境中运行无浏览器，而不必担心额外的负担。

Web自动化测试设置

在我们进入示例之前，让我们设置我们的环境。幸运的是，我们需要安装的依赖项并不多。只有一个……傀儡师。

 npm 我木偶师

运行该命令后，您就可以开始了！

我们正在使用的另一个工具 Browserless 的优点在于，除了创建帐户之外，不涉及任何设置。让我们去 www.browserless.io 并创建一个帐户。设置帐户后，您将被定向到无浏览器仪表板。

在这里，您可以找到您的会话使用图表、预付余额、API 密钥和所有其他帐户好东西。将您的 API 密钥放在手边，因为我们将在示例中使用它。

我还应该提到，无浏览器提供了一个很棒的 在线调试工具 这使您可以测试脚本以查看它们的工作方式。如果您不想经历设置本地计算机的麻烦，这是一个很好的选择。

网站测试自动化示例1：

在此示例中，我们将测试由 Tim Holman (@twholman) 和 Tobias van Schneider (@vanschneider) 创建的名为“被动攻击性密码机”的酷网站的功能。他们的网站要求您输入密码，它会告诉您密码有多好。这个测试将非常简单。我们将通过使用 Puppeteer 在输入区域输入密码来测试网站的功能。然后，我们将截取屏幕截图以验证网站是否提供了用户反馈。截屏是最简单的验证形式。如果您想让这个测试更加健壮，您可以以编程方式检查以确保网站对输入的密码提供更新的反馈。

请参阅下面的示例 1 的代码。请注意第 5 行的注释部分。您可以在此处添加无浏览器 API 令牌以在无浏览器环境中运行。

**常量** 木偶师 = 要求（“木偶师”）； **常量** 刮= **异步** () => {  
    **常量** 浏览器 = **等待** puppeteer.launch（{无头： **错误的** });  
 // const browser = await puppeteer.connect({ browserWSEndpoint: 'wss://chrome.browserless.io?token=[ADD BROWSERLESS API TOKEN HERE]' })    **常量** 页 = **等待** browser.newPage();    **等待** page.goto('https://trypap.com/');    **等待** page.setViewport({ 宽度: 1920, 高度: 1080 });    **等待** page.type('input[placeholder="请输入密码"]', 'BrowserlessIsCool1234');    **等待** page.waitForTimeout(2000);    **等待** page.screenshot({ path: "screenshot.png", fullPage: **真的** });    **等待** 浏览器.close();  
 };  
 刮（）;

在本地计算机上安装此脚本后，运行 节点 [脚本的标题] 在您的终端中，您应该将屏幕截图输出到目录的根目录中。

这是它的样子：

恭喜！您已经正式完成了一个简单的 UI 测试。

网站测试自动化示例2：

在这个例子中，我想展示 /统计 API Browserless 提供给我们的。 /stats API 由 Google 的 Lighthouse 项目提供支持，为您提供有关性能、可访问性、大小等方面的指标。如文档中所述，/stats API 非常易于使用。要收集此数据，请发送 邮政 请求 https://chrome.browserless.io/stats 使用包含有效 URL 的简单 JSON 有效负载。这会输出大量的数据，大约370kb。您可以通过添加 配置 具有您要查看的特定类别的对象。这类似于您使用 Lighthouse 节点 API 的方式。对于我们的示例，我们将只检查性能类别。

我们将运行 curl 命令来接收输出，但如果您想在 JavaScript 中运行它，您可以使用 获取 API .对于此示例，我们将在 被动攻击性密码机网站 我们在第一个例子中使用。下面是 curl 命令。

 卷曲-X POST \  
 https://chrome.browserless.io/stats?token=[在此处添加无浏览器 API 令牌] \  
 -H '缓存控制：无缓存' \  
 -H '内容类型：应用程序/json' \  
 -d'  
 {  
 "url": "https://trypap.com/",  
 “配置”：{  
 “扩展”：“灯塔：默认”，  
 “设置”：{  
 "onlyCategories": ["性能"]  
 }  
 }  
 }'

这应该返回一个带有 Lighthouse 性能分数的 JSON 对象。在撰写本文时，trypap.com 获得了 0.9 的性能得分（从 0 到 1）。非常好！

我希望这篇文章能帮助你打开一个全新的网站测试自动化世界。与往常一样，请务必查看 无浏览器博客 和 无浏览器 YouTube 频道 获取更多精彩的网络浏览器自动化内容！编码快乐！❤️

如果您喜欢我们的内容，您可以查看我们的客户如何将 Browserless 用于不同的用例：

• @IrishEnergyBot 使用网络抓取来帮助提高人们对绿色能源的认识
• Dropdeck 自动幻灯片平台导出为 PDF 并生成 PNG 缩略图
• BigBlueButton 是一个开源项目，使用无浏览器运行自动化 E2E 测试

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1582/54483005