如何使用 Puppeteer 和 Browserless 运行自动化测试？

news2024/10/9 5:04:32

Puppeteer：什么是 Puppeteer 及其功能

Puppeteer 是一个 Node.js 库。使用 Puppeteer，您可以在所有基于 Chromium 的浏览器上测试您的网站，包括 Chrome、Microsoft Edge Chrome 和 Chromium。此外，Puppeteer 可用于网页抓取、自动化和测试目的。

由于 Puppeteer 只通过 DevTools 协议进行通信，因此只支持实现此协议的浏览器。因此，Safari（WebKit）、Firefox 和 IE 目前尚不支持。

什么是无头浏览器测试？

无头浏览器测试允许在不使用图形用户界面 (GUI) 的情况下自动控制网页。

这使测试人员、用户、QA 团队或开发人员能够在不手动与显示屏上看到的浏览器交互的情况下，对 Web 应用程序进行自动化测试。

本质上，无头浏览器测试的工作原理是这样的，尽管它通常是通过简单的脚本完成的。它加速了测试过程，并在开发过程中提供快速反馈。

什么是 Browserless？

Browserless 是一个功能强大的基于云的解决方案，用于无缝的浏览器自动化、网页抓取和测试。它利用 Nstbrowser 的高级指纹库进行随机指纹切换，确保不间断的数据收集和自动化。

借助其强大的云基础设施，Browserless 允许轻松访问多个浏览器实例，简化自动化任务的管理。

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

为什么 Puppeteer 比类似的测试平台更好？

强大的功能集: Puppeteer 提供对 Chrome 和 Chromium 浏览器的完全控制，支持页面导航、表单填写、屏幕截图、PDF 生成等自动化任务。它可以模拟浏览器中的用户操作，进行高度复杂的测试。
无头模式: Puppeteer 支持无头浏览器模式，这使得它在后台执行自动化任务时更加高效和轻量级，无需加载图形界面，从而提高速度和资源利用率。
跨浏览器支持: 除了 Chromium 之外，Puppeteer 还通过 WebDriver 协议支持跨浏览器测试，具有强大的兼容性和对多种浏览器环境的适应性。
社区支持和完整文档: Puppeteer 拥有一个活跃的开发人员社区和详细的文档，使开发人员能够快速上手并获得社区的支持。
与 Chrome 紧密集成: Puppeteer 与 Chrome/Chromium 的深度集成使其在浏览器自动化任务方面表现出色，特别是在页面性能监控和爬取准确性方面。

使用 Browserless 进行 Puppeteer 自动化测试

我们需要

访问 NstbrowserNstbrowser 客户端
然后通过 puppeteer 的自动化程序填写帐户和密码
最后，点击登录按钮登录

第 1 步：安装 Puppeteer。

这里我们选择更轻量级的 puppeteer-core：

pnpm install puppeteer-core

第 2 步：获取您的 API 密钥。

您可以在 Browserless 面板中找到您的 API 密钥：

第 3 步：连接到 Browserless

import puppeteer from "puppeteer-core";

const token = "您的 api 密钥";

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 = `https://less.nstbrowser.io/connect?${query.toString()}`;

const getBrowser = async () =>
  puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });

const main = async (req, res) => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.goto("https://app.nstbrowser.io/login");
  } catch (error) {
    console.error(error);
  }
};

main();

现在，我们已经成功连接 Browserless 并访问了我们的目标网站，让我们完成测试流程，并通过截取屏幕截图来验证结果。

await page.waitForSelector('input');

const inputs = await page.$$('input');

await inputs[0].type('18552540330@163.com', { delay: 100 });
await inputs[1].type('9KLYUWn3GmrzHPRGQl0EZ1QP3OWPFwcB', { delay: 100 });

const buttons = await page.$$('button');
await buttons[1].click();

await page.waitForResponse((req) => {
  const url = "https://api.nstbrowser.io/api/v1/passport/login";
  if (req.url() === url) {
    return true;
  }
});

await page.screenshot({ fullPage: true, path: "./nstbrowser.png" });

我们可以看到，我们已经成功登录到 Nstbrowser 并被重定向到仪表盘，表明我们的测试已经通过。

Puppeteer 与其他平台的区别

以下是 Puppeteer 与各种其他测试平台的详细比较：

1. Puppeteer 与 WebKit/Blink：

Puppeteer 是一个 Node.js 库，提供高级 API 来控制无头 Chrome 或 Chromium 浏览器。
WebKit 和 Blink 分别是 Safari 和 Chromium 浏览器使用的布局引擎。它们负责渲染网页，而 Puppeteer 控制浏览器以执行自动化任务。

2. Puppeteer 与 Selenium：

Puppeteer 通过调试协议直接与 Chrome/Chromium 通信，使其与这些浏览器紧密集成。
Selenium 使用 Chromedriver 来管理和控制浏览器，这使其能够支持多个浏览器（例如 Firefox、Safari、Edge）。另一方面，Puppeteer 侧重于 Chrome/Chromium。

3. Puppeteer 与 PhantomJS：

Puppeteer 是一个现代的基于 Node.js 的库，用于控制无头 Chrome/Chromium。
PhantomJS 是一个基于 WebKit/Blink 的无头浏览器。但是，PhantomJS 已经过时，不再积极维护，这使得 Puppeteer 成为大多数自动化任务的更可靠和高效的选择。

4. Puppeteer 与 Nightmare.js：

Puppeteer 使用 Chrome DevTools 协议来控制 Chrome/Chromium，使其能够深入访问浏览器的功能。
Nightmare.js 是一个 JavaScript 库，使用 Electron 来渲染网页。它是为了易用性而构建的，但缺乏 Puppeteer 提供的性能和现代浏览器支持。

5. Puppeteer 与 Cypress：