Playwright 测试:如何在云端使用 Browserless 运行?

news/2024/9/19 18:37:35/ 标签: 爬虫

什么是 Playwright?

Playwright 是由微软开发的一个功能强大且用途广泛的自动化库。它使开发人员和测试人员能够轻松地跨多个浏览器自动化 Web 应用程序。

Playwright 自动化支持 Chromium、Firefox 和 WebKit,允许您跨不同浏览器进行测试。它支持 Java、Python、C# 和 NodeJS 等编程语言。Playwright 采用 Apache 2.0 许可证,在 NodeJS 和 Javascript/Typescript 中最受欢迎。

什么是 Browserless?

Browserless 是一种基于云的浏览器解决方案,专为高效的自动化、网络抓取和测试而设计。利用 Nstbrowser 的指纹库,Browserless 提供随机指纹切换,以实现流畅的数据收集和自动化流程。

其强大的云基础设施允许轻松管理多个浏览器实例,简化了自动化任务的处理。

您对网络抓取和 Browserless 有什么很棒的想法或疑问吗?
让我们看看其他开发者在 Discord 和 Telegram 上分享了什么!

为什么选择 Playwright 自动化?

Playwright 自动化的优势包括:

  1. 跨浏览器支持: Playwright 可与 Chromium、Firefox 和 WebKit 配合使用,使您能够使用单个框架跨多个浏览器进行测试。

  2. 端到端测试: 它支持从前端交互到后端 API 的全栈测试。

  3. 无头模式: Playwright 可以在无头模式下运行测试,以实现更快的执行速度和更高的资源效率。

  4. 多标签和多浏览器控制: 它允许同时控制多个标签和浏览器。

  5. 自动等待: Playwright 会自动等待元素准备就绪,然后再进行交互,从而减少测试的脆弱性。

  6. 网络拦截: 它可以拦截网络请求,从而更轻松地模拟不同的网络条件或模拟 API。

  7. 跨平台支持: Playwright 在 Windows、macOS 和 Linux 上运行,使其适用于不同的环境。

  8. CI/CD 集成支持: Playwright 支持 CI/CD 集成。它甚至为某些语言绑定提供了 Docker 镜像。

  9. 开箱即用的 Typescript 支持: Typescript 语言支持无需配置,因为它可以理解您的 Typescript 和 JavaScript 代码。

  10. 调试工具支持: Playwright 测试支持不同的调试选项,使其对开发人员友好。一些调试选项包括 Playwright Inspector、VSCode 调试器、浏览器开发者工具和跟踪查看器控制台日志。

Playwright 自动化测试框架

Playwright 架构专门为浏览器自动化而设计,提供了一个强大、灵活、高性能的框架。它支持多种浏览器引擎、独立的浏览器环境和强大的 API,适用于 Web 爬取和自动化测试等浏览器自动化任务。其架构确保测试和脚本的可靠性、效率和易维护性。

主要组件和流程

1. 客户端(自动化脚本):

Playwright 原生支持 JavaScript 和 TypeScript,并提供 Java、Python 和 C# 的绑定,允许用户使用这些语言编写自动化脚本。
用户使用他们喜欢的语言编写测试脚本,包括测试用例、交互命令和断言。JSON 通常用于配置和数据交换,以确保高效的数据传输。

2. WebSocket 连接:

  • 握手: 执行测试脚本时,客户端将与 Playwright 服务器(Node.js)建立连接并执行初始握手,以确保通信的建立。

  • 全双工通信: 连接建立后,将在客户端和服务器之间打开一个双向通信通道,用于实时向浏览器发送命令并接收响应或事件。

  • 打开和持久连接: WebSocket 连接将在整个会话期间保持打开和持久,允许测试脚本继续与浏览器交互。

  • 连接关闭: 当测试完成后,客户端或服务器可以关闭连接,标志着会话结束。

3. 服务器端 (Node.js):

  • Node.js 服务器: 服务器端由 Node.js 应用程序管理,协调客户端脚本与浏览器之间的交互。
  • 处理命令和事件: Node.js 服务器接收来自客户端的命令,处理并将它们转换为浏览器指令,监听来自浏览器的事件,并将它们转发给客户端。

4. 浏览器自动化 (CDP 和 CDP+):

  • CDP (Chrome DevTools 协议): Playwright 使用 CDP 与基于 Chromium 的浏览器交互。CDP 管理浏览器的渲染、会话和网络进程,以确保页面渲染、会话管理和网络交互顺畅。
  • CDP+: 对于 Firefox 和 WebKit (Safari) 等浏览器,Playwright 使用类似于 CDP 的协议扩展来确保跨不同浏览器的 API 一致性。每个浏览器进程(如渲染和网络)都得到精确管理,以模拟用户实际交互。

如何使用 Browserless 在云端运行 Playwright 自动化?

环境预设

在我们开始之前,我们需要有一个 Browserless 服务。使用 Browserless 可以解决复杂的网页爬取和大型自动化任务,目前已经实现了完全托管的云部署。

Browserless 采用以浏览器为中心的理念,提供强大的无头部署功能,并提供更高的性能和可靠性。有关 Browserless 的更多信息,您可以 点击此处 了解更多。

  1. 获取 API KEY 并进入 Nstbrowser 客户端的 Browserless 菜单页面,或您可以 点击此处 访问

确定测试目标

在开始之前,让我们确定此测试的目标。我们将使用 Playwright 进行表单验证并获取网站提供的错误信息。从正常的页面访问交互中,我们将体验到:

  1. 访问目标网站 Airbnb | Vacation rentals, cabins, beach houses, & more。
  2. 点击右上角的“个人中心面板”。
  3. 点击表单中的“继续”按钮以触发表单提交。
  4. 查看错误反馈信息。

项目初始化

按照以下步骤安装 Playwright 并运行测试脚本

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

步骤 2: 打开 Vs code 终端并运行以下命令

npm init -y
npm install playwright @playwright/test

步骤 3: 创建相关文件

  1. playwright.config.ts 文件
import { defineConfig } from '@playwright/test';export default defineConfig({//  要运行的测试文件testDir: './tests',// 每个测试的超时时间timeout: 30 * 1000,// 整个测试运行的超时时间expect: {timeout: 30 * 1000,},// 要使用的报告器reporter: 'html',// 要忽略的测试文件的通配符模式或正则表达式。testIgnore: '*test-assets',// 匹配测试文件的 Glob 模式或正则表达式。testMatch: '*tests/*.spec.ts',
});
  1. tests/browserless.spec.ts 测试脚本
  • 启动浏览器需要传入相关配置(完整配置,请参见 LaunchNewBrowser)
  • kernelMilestone 参数目前固定为 124
  • proxy 参数是必需的
import { chromium } from 'playwright';
import { test, expect, Page } from '@playwright/test';let page: Page;async function createBrowser() {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: '124', // 支持:113, 120, 124// 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',// },};const query = new URLSearchParams({token: token, // 必需config: JSON.stringify(config),});const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;const browser = await chromium.connectOverCDP(browserWSEndpoint);const context = await browser.newContext();const page = await context.newPage();return page;
}function logger(text: string) {console.log(text);
}test.beforeEach(async () => {if (!page) {page = await createBrowser();}await page.goto('https://www.airbnb.com/');
});test.describe('Browserless 测试', () => {test('验证 Airbnb 网站登录错误信息', async () => {try {logger(`转到目标页面 ${await page.url()}`);// 判断页面标题const title = await page.title();logger(`页面标题: ${title}`);// 等待选择按钮 aria-label="Main navigation menu"await page.waitForSelector('[aria-label="Main navigation menu"]');// 点击按钮 aria-label="Main navigation menu"await page.click('[aria-label="Main navigation menu"]');// 等待文本为 Sign up 的 a 标签await page.waitForSelector('a:has-text("Sign up")');// 点击文本为 Sign up 的 a 标签await page.click('a:has-text("Sign up")');await page.click('span:has-text("Continue")');// // 通过 id="phone-number-error-phone-login" 获取错误消息const text = await page.textContent('#phone-number-error-phone-login');logger(`错误消息: ${text}`);expect(text).toBe('Phone number is required.');await page.close();await page.context().close();} catch (error) {console.error(error);}});
});

项目文件结构如下

项目执行

经过上面的项目初始化,我们就可以开始运行我们的项目了!现在打开Vs code终端,运行:

npx playwright test

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

  • 使用npx命令执行playwright命令
  • Playwright会找到当前项目的playwright.config.ts配置文件,并获取基本配置信息
  • 根据配置文件的内容,在当前项目目录下找到匹配的测试文件并开始执行

结果输出

执行完上面的命令后,我们会看到以下输出结果,这里输出了测试执行过程的每一个重要结果,可以看到我们的测试用例已经通过了。

我们可以通过运行以下命令查看测试报告:

npx playwright show-report

该报告详细展示了每个执行命令的步骤、执行状态和最终输出结果。

总结

Playwright 提供了一个强大且通用的测试自动化框架,使其成为开发人员和测试人员的宝贵工具。它能够处理多个浏览器,提供跨平台支持,并提供丰富的交互和验证 API,使其在测试自动化领域脱颖而出。

通过本博客中的全面逐步教程,我们学习了:

  1. Browserless 的强大功能
  2. 如何使用 Browserless 轻松抓取数据
  3. 有意义的结果分析

结合 Browserless,用户可以利用 Playwright 的强大功能来创建可靠、高效且可扩展的自动化测试,简化测试流程,减少人工工作量,并确保更强大、无缝的用户体验。

立即开始体验 Browserless 的强大功能!


http://www.ppmy.cn/news/1524031.html

相关文章

yield return request.SendWebRequest()

yield return request.SendWebRequest(); 是 Unity 中用于处理异步网络请求的一个常见语句,特别是在使用 UnityWebRequest 类时。下面对其进行详细解释: 1. UnityWebRequest 和异步操作 UnityWebRequest 是 Unity 提供的一个用于发送 HTTP 请求&#…

spring如何整合druid连接池?

spring整合druid连接池 1.新建maven项目 打开IDE(比如IntelliJ IDEA, Eclipse等)。选择新建项目: 在IntelliJ IDEA中,选择File > New > Project。在Eclipse中,选择File > New > Maven Project。选择Maven…

IP学习——twoday

双层Vlan标签 路由器常用命令: 查看当前端口,路由等的信息和配置:display this 查看当前路由器的所有信息: display current-configuration 查看当前路由器的指定信息: display current-configuration | include ip a…

Linux:五种IO模型

1:五种IO模型 1:阻塞IO 阻塞IO: 在内核将数据准备好之前,系统调用会一直等待.所有的套接字,默认 都是阻塞方式。 2:非阻塞 IO 非阻塞 IO: 如果内核还未将数据准备好, 系统调用仍然会直接返回, 并且返回EWOULDBLOCK 错误码。 非阻塞 IO 往往需…

Spring Boot详解

好的!Spring Boot 是一个基于 Spring 框架的项目,它为简化配置、快速启动项目而生。它使得构建独立运行、生产级别的 Spring 应用变得非常简单,让开发者专注于业务逻辑而不再被繁琐的配置所困扰。接下来,我将从以下几个方面为你详…

数据结构10

文章目录 两两交换链表中的节点括号生成I2009 408应用题42题 两两交换链表中的节点 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullp…

嵌入式软件--51单片机 DAY 3

一、独立按键 按键的作用相当于一个开关,按下时接通(或断开),松开后断开(或接通)。 (1)需求 通过SW1、SW2、SW3、SW4四个独立按键分别控制LED1、LED2、LED3、LED4的亮灭&#xff0…

在Unity环境中使用UTF-8编码

为什么要讨论这个问题 为了避免乱码和更好的跨平台 我刚开始开发时是使用VS开发,Unity自身默认使用UTF-8 without BOM格式,但是在Unity中创建一个脚本,使用VS打开,VS自身默认使用GB2312(它应该是对应了你电脑的window版本默认选取了国标编码,或者是因为一些其他的原因)读取脚本…

如何评价BEV seg模型的指标

1 可视化 seg PRED GT # 传进来的时没经过sigmoid激活的[1,1,200,200]的featuremap def seg_vis(pred,name):# ---- 区分前景,背景

Python利用pyecharts实现数据可视化

小编会持续更新知识笔记,如果感兴趣可以三连支持。闲来无事,水文一篇,不过上手实践一下倒还是挺好玩的,这一块知识说不定以后真可以尝试拿来做数据库的报表显示。 有梦别怕苦,想赢别喊累。 目录 前言 JSON数据格式的…

风中摇曳的小萝卜(机器学习)笔记 支持向量机

支持向量机就是找到一条直线,让两边的点与它的距离是最大的 只想两边的点为y1和y-1 然后就可以列出到直线的距离了 看分子的正负就可以区分点在直线的哪一边了 上面的表示为函数间隔 下面表示为函数范数 然后我们找到间隔最小的那些点,让最终直线距离…

# 键盘字母上有下标数字,输入时怎么一键去掉,关闭键盘上的下标数字。‌

键盘字母上有下标数字,输入时怎么一键去掉,关闭键盘上的下标数字。‌ 一、问题描述: 如下图,有的笔记本电脑键盘上,没有数字小键盘,数字小键盘会和字母混和在一起,这样打字时,不容…

期权不同手续费怎么收取?期权手续费要交多少?

今天期权懂带你了解期权不同手续费怎么收取?期权手续费要交多少?期权手续费是指在进行期权交易时需要支付的费用,这些费用通常包括交易佣金、交易所费用等等,期权手续费按张数收费。 50ETF期权交易所手续费要交多少? …

一文说清什么是数据仓库

01 数据仓库的概念 数据仓库的概念可以追溯到20世纪80年代,当时IBM的研究人员开发出了“商业数据仓库”。本质上,数据仓库试图提供一种从操作型系统到决策支持环境的数据流架构模型。 目前对数据仓库(Data Warehouse)的标准定义&a…

【MATLAB】模拟退火算法

模拟退火算法的MATLAB实现 模拟退火算法简介模拟退火算法应用实例关于计算结果 模拟退火算法简介 1982年,Kirkpatrick 将退火思想引入组合优化领域,提出了一种能够有效解决大规模组合优化问题的算法,尤其对 NP 完全问题表现出显著优势。模拟…

跨部门SOP与统一知识库:打破信息孤岛,促进团队协作

引言: 在当今这个快速变化且高度竞争的商业环境中,企业面临着前所未有的挑战,其中之一便是如何高效地跨越部门界限,实现无缝协作。传统的组织结构往往导致信息孤岛的出现,不同部门间流程不一致、信息不共享&#xff0…

写在OceanBase开源三周年

我收获的深刻感触get 感触1:解决问题才有生存价值 [产品力] 感触2:永无止境的“易用性” [易用性] 感触3:立下“双赢”的flag 感触4:社区建设离不开用户和开发者参与 感触5:从易用到用户自助 [自助能力] 当时想法很简…

ARM 全局变量更换基址寄存器

思索了两个晚上,一直没有弄清几万条指令里唯一的 [x27, #80] 来自哪里,结合上下文判定是个全局变量,通过动态调试给main传参数,确认参数 s 时会改变 [x27, #80] 的值,由 0 变 1。于是反推到 case s 处,发现…

leaflet【十】实时增加轨迹点轨迹回放效果实现

实时轨迹回放 在前面有用leaflet-trackplayer实现了一个轨迹回放的效果,单击前往:轨迹回放效果&控制台控制轨迹运动效果 这篇文章主要是实现一下实时增加轨迹点,不改变原来运行轨迹和速度。这里是简易做了一个demo效果,大概…

想要从OPPO手机恢复数据?免费OPPO照片视频恢复软件

此实用程序可帮助那些寻找以下内容的用户: 在OPPO手机中格式化存储卡后可以恢复图片吗?我删除了 OPPO上的视频和图片,我感觉很糟糕,因为里面有我在拉斯维加斯拍摄的视频和照片 免费OPPO照片视频恢复软件 您能恢复OPPO上已删除的…