更新文章：Playwright学习 - 为什么要学Playwright
This commit is contained in:
@@ -0,0 +1,196 @@
|
||||
## 1.1 Selenium发展史
|
||||
|
||||
### 1.1.1 Selenium 1.0
|
||||
在 Selenium 1.0 发布的 2006 年，Google 工程师 Simon Stewart 发起了一个名为 WebDriver 的项目。它也是一个自动化测试工具，彼时刚刚起步，后来它也将成为 Selenium 的竞品之一。
|
||||
|
||||
|
||||
|
||||
### 1.1.2 Selenium 2.0
|
||||
2009 年，在 Google 测试自动化会议上，两个团队的开发人员在沟通后决定合并这两个项目，新项目被命名为 Selenium Web Driver，也就是 Selenium 2.0。
|
||||
|
||||
WerDriver 的作者是这样解释二者合并的原因的：“一方面 WebDriver 解决了 Selenium 存在的缺点（例如可以绕过 JavaScript 沙箱，WebDriver 有出色的API），另一方面是 Selenium 解决了 WebDriver 存在的问题，还有就是 Selenium 的主要贡献者和我都以为合并项目是为用户提供最优秀框架的最佳途径。”
|
||||
|
||||
Selenium 2.x (WebDrive) 真正的兴起是在 2014 年开始，到 2016 年左右成为 web 自动化最热门的框架。几乎只要一说web 自动化，那就是 selenium ，它不仅仅在web 自动化测试领域很火，在爬虫领域也是非常热门的，可以说全国不管哪行的都开始学 selenium 了。
|
||||
|
||||
Selenium Remote Control (RC) ：支持多种平台(Windows，Linux，Solaris)和多种浏览器(IE，Firefox，Opera，Safari)，可以用多种语言(Java，Ruby，Python，Perl，PHP，C#)。
|
||||
|
||||
### 1.1.3 Selenium 3.0
|
||||
2016 年，Selenium 3 发布。这个版本并没有引入新的工具，主要加强了对浏览器的支持。相较 Selenium 2 的主要的变动有：
|
||||
|
||||
- 完全移除了 Selenium RC。
|
||||
- WebDriver 暴露一个供浏览器接入的 API，通过各浏览器厂商提供的 Driver 来接入。
|
||||
- 将 Firefox Driver 剔除（之前 Firefox Driver 是内置的）。
|
||||
- 支持 Firefox 通过 GECKO Driver 来接入 Selenium。
|
||||
- 通过 Apple 提供的 Safari Driver，Selenium 可以支持 Safari 接入。
|
||||
- 通过 Edge Driver 支持 IE 接入。
|
||||
|
||||
### 1.1.4 Selenium 4.0
|
||||
2021 年，Selenium 发布 Selenium 4。
|
||||
在 Selenium 3 中，与浏览器的通信基于 JSON-wire 协议，因此 Selenium 需要对 API 进行编解码。而 Selenium 4 遵循 W3C 标准协议，Driver 与浏览器之间通信的标准化使得他们可以直接通信。
|
||||
|
||||
除此之外，Selenium 4 还做了很多改动。包括：
|
||||
|
||||
- 优化了对浏览器的支持。
|
||||
- 使用新的设计优化了 Selenium Gird。
|
||||
- 标准化了 Selenium 的文档（你敢信从 Selenium 2.0 开始，文档就没更新过…）。
|
||||
- IDE 中的 CLI Runner 变更为基于 NodeJS（之前是 HTML Runner）。
|
||||
- Client 和 Driver 支持了新的元素定位 API。
|
||||
- 支持屏幕截图。
|
||||
- 改进了 Chrome Dev Tools。之前 Chrome Driver 直接继承自 Remote Web Driver 类，现在继承自
|
||||
Chromium Driver 类，这个改动使得 IDE 开发可以使用更多的 API。
|
||||
|
||||
## 1.2 后 Selenium 时代
|
||||
Selenium 的辉煌时代源于 webdriver 的引入，在2020年逐步走向没落，最终成也 webdriver 败也webdriver!
|
||||
|
||||
在2020年左右，Cypress、TestCafe、Puppeteer在技术雷达中被誉为后Selenium时代Web UI测试的三驾马车。
|
||||
|
||||
|
||||
### 1.2.1 Cypress
|
||||
Cypress 的第一版于2015年发布, _并于2018年开始真正流行 ,2020年,Cypress正式开源。
|
||||
Cypress官网地址：https://docs.cypress.io
|
||||
|
||||
随便着Web应用项目的不断发展，测试也要不断发展，Cypress是为现代网络打造的，基于JavaScript语言的一种前端自动化测试工具，测试也是如此，对浏览器中运行的所有内容进行快速，轻松和可靠的测试。Cypress是自集成的，这类测试框架统称为e2e测试，即end to end（端到端）测试。理论上前端页面由前端框架来测试确实更为合适。它提供了一套完整的端到端的测试体验，正如官网上所说：
|
||||
|
||||
1. 安装Cypress很简单,无需依赖项,无需额外下载或更改代码。
|
||||
2. 轻松，快速地编写测试，并在构建Web应用程序时观察它们的实时执行。
|
||||
3. 在CI中调试测试就像在本地运行测试一样容易。具有内置的并行化和负载平衡功能。
|
||||
4. 记录CI测试数据，屏幕截图和视频-并在“ 仪表盘”中查看汇总的下一级见解。
|
||||
|
||||
**八大功能：**
|
||||
1. 时间穿梭：Cypress会在测试运行时拍摄快照。只需将鼠标悬停在“ 命令日志”中的命令上，即可准确查看每一步都发生了什么
|
||||
2. 可调试性：停止猜测你的测试失败的原因。直接从熟悉的工具如Chrome DevTools进行调试。我们可读的错误和堆栈跟踪使调试更加快速便捷。
|
||||
3. 实时重载：每当你对测试进行更改时，Cypress都会自动重新加载。查看应用程序中实时执行的命令。
|
||||
4. 自动等待：不要在测试中添加等待或休眠。Cypress在继续下一步之前会自动等待元素至可操作状态时才会执行命令或断言。异步操作不再是噩梦。
|
||||
5. 间谍，存根和时钟：Cypress允许你验证并控制函数行为，Mock服务器响应或更改系统时间，你喜欢的单元测试就在眼前。
|
||||
6. 网络流量控制：Cypress可以Mock服务器返回结果，无须连接后端服务器即可实现轻松控制，模拟网络请求。
|
||||
7. 运行结果一致性：Cypress架构不使用Selenium或Webdriver,在运行速度，可靠性测试，测试结果一致性上均有良好的保障。
|
||||
8. 截图和视频：Cypress在测试运行失败时自动截图，在无头运行时录制整个测试套件的视频，使你轻松掌握测试运行情况。
|
||||
|
||||
### 1.2.2 Puppeteer
|
||||
Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包, puppeteer是google公司出品，对于运行无界面chrome (学名headless) 。
|
||||
|
||||
Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或Chrome。
|
||||
|
||||
Puppeteer 默认以无头模式（headless）运行，也就是运行一个无界面的 Chrome 浏览器。
|
||||
|
||||
**应用场景：**
|
||||
1） 页面生成 PDF
|
||||
Puppeteer 提供了页面生成 PDF 的方法，我们可以利用这个方法来将页面导出为 PDF ，导出的 PDF 效果和 Chrome 浏览器打印功能导出的 PDF 一致。
|
||||
|
||||
具体的应用场景有：
|
||||
• 报表导出 PDF
|
||||
• 在线文档导出 PDF
|
||||
|
||||
2）页面截图
|
||||
Puppeteer 提供了截图的方法，我们可以利用这个方法来将页面的指定区域导出为 jpeg 或 png图片。
|
||||
|
||||
具体的应用场景有：
|
||||
• 报表导出图片
|
||||
• 在线文档导出图片
|
||||
• 营销页面生成预览图、封面图
|
||||
• 生成骨架屏图片
|
||||
|
||||
3）服务端渲染
|
||||
单页应用（SPA）的主要内容是在 JavaScript 向服务端请求数据后渲染的，存在爬虫难以抓取主要内容、首屏加载慢等问题，而使用 Next.js、Nuxt.js 等服务端渲染框架改造的成本较高。
|
||||
如果只是为了搜索引擎优化，我们可以考虑利用 Puppeteer 来实现。我们可以在网关层判断请求的来源，如果是爬虫，直接返回由 Puppeteer 服务端渲染的 html 文件。
|
||||
|
||||
4） 自动化UI测试
|
||||
使用 Puppeteer 可以模拟 Chrome 浏览器环境，结合 JavaScript 测试框架（如 Jest）可以实现自动化 UI 测试。
|
||||
Puppeteer 提供了 Mouse 类来模拟鼠标操作，提供了 Keyboard 类来模拟键盘操作，提供了Touchscreen 类来模拟触屏操作，并且 Puppeteer 提供的 Page 类里有很多方法可以用来操作元素，比如点击元素、聚焦元素等操作。
|
||||
|
||||
|
||||
### 1.2.3 TestCafe
|
||||
2018 年11月TestCafe首次进入技术雷达_,处于评估阶段,2019年4月的技术雷达里,它的状态更新为试验阶段。
|
||||
|
||||
TestCafe 是一款 Node.js 库，用来实现 web页面的自动化测试，支持多种浏览器，将来还有接口测试的计划。
|
||||
|
||||
|
||||
|
||||
### 1.2.4 为什么要学Playwright
|
||||
2020年微软开源一个UI 自动化测试工具 Playwright, 支持 Node.js、Python、C# 和 Java 语言。
|
||||
|
||||
当 Microsoft 于2020 年 1 月 31 日发布Playwright的第一个公共版本时，我们获得了一个新选项。
|
||||
|
||||
如果您比较Playwright和 Puppeteer的贡献者页面 ，您会注意到Puppeteer的前两个贡献者现在在Playwright 上工作。Puppeteer 团队实质上是从 Google 转移到 Microsoft 并成为 Playwright团队。
|
||||
|
||||
因此，Playwright 在很多方面与 Puppeteer 非常相似。API 方法在大多数情况下是相同的，并且默认情况下 Playwright 还捆绑了兼容的浏览器。
|
||||
|
||||
Playwright 最大的区别在于跨浏览器支持。它可以驱动 Chromium、WebKit（Safari 的浏览器引擎）和 Firefox。
|
||||
|
||||
那么现在微软推出的 Playwright 到底有没必要去学呢？
|
||||
先看下官方介绍： https://playwright.dev/python/
|
||||
|
||||
|
||||
文档：https://playwright.dev/python/docs/intro
|
||||
API： https://playwright.dev/python/docs/api/class-playwright
|
||||
|
||||
**跨浏览器和平台**
|
||||
• 跨浏览器。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit （Safari的浏览器引擎）和 Firefox。
|
||||
• 跨平台。在 Windows、Linux 和 macOS 上进行本地测试或在 CI 上进行无头或有头测试。
|
||||
• 跨语言。在TypeScript、JavaScript、Python、.NET、Java中使用 Playwright API。
|
||||
• 测试移动网络。适用于 Android 和 Mobile Safari 的 Google Chrome 浏览器的本机移动仿真。相同的渲染引擎适用于您的桌面和云端。
|
||||
|
||||
**稳定性**
|
||||
• 自动等待。Playwright 在执行动作之前等待元素可操作。它还具有一组丰富的内省事件。两者的结合消除了人为超时的需要——这是不稳定测试的主要原因。
|
||||
• Web优先断言。Playwright 断言是专门为动态网络创建的。检查会自动重试，直到满足必要的条件。
|
||||
• 追踪。配置测试重试策略，捕获执行 跟踪、视频、屏幕截图以定位问题。
|
||||
|
||||
**运行机制**
|
||||
浏览器在不同进程中运行属于不同来源的 Web 内容。Playwright 与现代浏览器架构保持一致，并在进程外运行测试。这使得 Playwright 摆脱了典型的进程内测试运行器的限制。
|
||||
• 多重一切。测试跨越多个选项卡、多个来源和多个用户的场景。为不同的用户创建
|
||||
具有不同上下文的场景，并在您的服务器上运行它们，所有这些都在一次测试中完成。
|
||||
• 可信事件。悬停元素，与动态控件交互，产生可信事件。Playwright 使用与真实用户无法区分的真实浏览器输入管道。
|
||||
• 测试框架，穿透 Shadow DOM。Playwright 选择器穿透影子 DOM 并允许无缝地输入帧。
|
||||
|
||||
**完全隔离-快速执行**
|
||||
• 浏览器上下文。Playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当
|
||||
于一个全新的浏览器配置文件。这提供了零开销的完全测试隔离。创建一个新的浏览器上下文只需要几毫秒。
|
||||
• 登录一次。保存上下文的身份验证状态并在所有测试中重用它。这绕过了每个测试中的重复登录操作，但提供了独立测试的完全隔离。
|
||||
|
||||
**强大的工具**
|
||||
• 代码生成器。通过记录您的操作来生成测试。将它们保存为任何语言。
|
||||
• 调试。检查页面、生成选择器、逐步执行测试、查看点击点、探索执行日志。
|
||||
• 跟踪查看器。捕获所有信息以调查测试失败。Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等。
|
||||
|
||||
## 1.3 Playwright 和 Selenium 的区别
|
||||
| 编号 | 功能 | Playwright | Selenium | 哪个更优秀 |
|
||||
|------|------------------|--------------------------------------------------|--------------------------------------------------|-----------------|
|
||||
| 1 | 学习资料 | 相对少 | Selenium | Selenium |
|
||||
| 2 | 用户群体 | 出现的比较晚，用户量相对少 | 出现的早，用户量多 | Selenium |
|
||||
| 3 | 支持语言 | TypeScript, JavaScript, Python, .NET, Java | C#, Java, Perl, PHP, Python, Ruby | Playwright |
|
||||
| 4 | 支持浏览器 | Chromium (包含chrome, msedge), WebKit, Firefox | IE (7, 8, 9, 10, 11), Firefox, Safari, Google Chrome, Opera, Edge等 | Selenium |
|
||||
| 5 | 跨平台 | Windows，Linux(只支持Ubuntu部分系统)，Mac | Windows, Linux, Mac 都支持 | Selenium |
|
||||
| 6 | 浏览器安装 | 命令行安装 | 自己安装 | Playwright |
|
||||
| 7 | 浏览器驱动 | 不需要驱动 | 下载对应版本驱动 | Playwright |
|
||||
| 8 | 启动速度 | 快 | 慢 | Playwright |
|
||||
| 9 | context 环境隔离 | 有 | 无 | Playwright |
|
||||
| 10 | headless 无头模式 | 就认headless，也可以设重GUI | 默认GUI模式，也可以设重headless | Playwright |
|
||||
| 11 | 无痕模式 | 默认无痕模式，对应测试很有帮助，对于爬虫用户可能访问页面不通过 | 默认非无痕默认，相虫用户特别喜欢 | Playwright |
|
||||
| 12 | 页面等待 | wait_for_load_state可以精准等待commit,domcontentloaded,load,networkidle四种状态 | implicitly_wait等待页面加载完成 | Playwright |
|
||||
| 13 | 元素定位 | 提供多个内重定位器，定位方式更贴近业务，定位方式更多 | 八大定位 | Playwright |
|
||||
| 14 | 元素等待 | 定位元素自带等待机制 | 需要自己封装等待方法 | Playwright |
|
||||
| 15 | 点击元素等操作 | 会判断元素状态，出现位量，是否可点击智能判断 | 需要自己封装webdriverwait.until方法,难度较大 | Playwright |
|
||||
| 16 | 定位报错 | 会人性化告诉你定位到几个元素，并推荐定位方式 | 报错需要自己去清谜，自己排除各种可能性 | Playwright |
|
||||
| 17 | 元素不在当前屏幕 | 会判断元素位重，自动滚动元素出现位重 | 需要自己去判断滚动 | Playwright |
|
||||
| 18 | iframe | 通过对象操作，不用切换 | 需要来回切换 | Playwright |
|
||||
| 19 | alert | 默认监听自动关闭，可以异步监听 | 需要自己判断，无异步监听 | Playwright |
|
||||
| 20 | 文件上传 | 监听文件上传时间，处理优雅 | 无法解决非input 上传 | Playwright |
|
||||
| 21 | 文件下载 | 可以监听下载 | 只能设量划览器默认位重 | Playwright |
|
||||
| 22 | 多窗口标签 | 可以监听窗口事件，操作方便 | 需要来回切换 | Playwright |
|
||||
| 23 | 事件监听 | 可以监听各种事件 | 无法监听 | Playwright |
|
||||
| 24 | 捕获ajax请求 | 可以捕获ajax请求和返回 | 无法捕获 | Playwright |
|
||||
| 25 | mock 功能 | 可以模拟想要的任何接口数据 | 无mock 功能 | Playwright |
|
||||
| 26 | 断言 | 提供expect 丰富断言 | 需要自己封装webdriverwait.until方法,难度较大 | Playwright |
|
||||
| 27 | 录制视频 | 录制用例视频 | 无 | Playwright |
|
||||
| 28 | trace 追踪 | 有 | 无 | Playwright |
|
||||
| 29 | 断点调试 | 有 | 无 | Playwright |
|
||||
| 30 | 录制 | 可以生成pytest用例 | 录制功能比较简单 | Playwright |
|
||||
| 31 | 鼠标键盘操作 | 调用简单方便 | 导入模块，操作复杂 | Playwright |
|
||||
| 32 | base_url | 可以添加全局base_url | 无此功能 | Playwright |
|
||||
| 33 | 接口测试 | 提供接口测试 | 无 | Playwright |
|
||||
| 34 | grid 分布式 | 无 | selenium-grid 分布式 | Selenium |
|
||||
| 35 | 协议 | websocket协议，可以实时获取页面状态 | http协议，只能获取当时的状态，需自己轮询判断 | Playwright |
|
||||
| 36 | 执行JavaScript | 可以在page,iframe,元素对象执行JavaScript | 只能在driver对象执行JavaScript | Playwright |
|
||||
| 37 | async异步 | 有同步和异步2种方式 | 无异步代码 | Playwright |
|
||||
| 38 | 面试 | 要求playwright 比较少 | 问selenium 比较多 | Selenium |
|
||||
| 39 | 学习难易程度 | 难度较大，需要封装 | 容易，无需封装，直接用 | Selenium |
|
||||
Reference in New Issue
Block a user