实现原理介绍
在接触一款工具之前我们首先要了解他们的实现原理，才能知道它是否满足我们对UI自动化测试的需求，接下来就简单讲一下两款工具的区别。最开始我们先介绍一下大家熟知的selenium来作为对比。
selenium
基于selenium的测试用例运行在浏览器外部，通过webdriver协议(JSON over HTTP)与运行在浏览器内部的被测应用程序进行交互，程序的运行是需要网络通信。
优势：虽然selenium几乎支持所有主流浏览器，支持多种编程语言，社区活跃，文档丰富
劣势：selenium环境配置复杂，执行速度慢，用例不稳定
Cypress
Cypress Framework是一个用于 Web 应用测试的开源自动化工具。Cypress 和 Webdriver 方式完全相反，它与应用程序在相同的生命周期里执行。
优势：
- 测试代码和应用程序均运行在由 Cypress 全权控制的浏览器中，且它们运行在同一个Domain 下的不同 iframe 中，所以 Cypress 的测试代码可以直接操作 DOM、Window Objects、Local Storages而无须通过网络访问。
- 可以在网络层进行即时读取和更改网络流量的操作，也可以 Mock 服务器返回的结果，无须依赖后端服务器，即可实现模拟网络请求。
- 无须在测试中添加 强制等待、隐性等待、显性等待，Cypress 会自动等待元素至可靠操作状态时才执行命令或断言
劣势：
- 目前只支持chrome
-
不支持多页面(TAB)和多窗口(Window)
image.png
Playwright
Playwright 框架是一个开源的、基于 Nodejs 的端到端测试自动化框架，它是由微软开发和维护的。它的工作原理更贴近与selenium，也是使用websocket协议与浏览器的debugger进行通信，实现对浏览器的操作。
Playwright 支持大部分的语言，Node.js,Python,Java,.net，并且支持谷歌，火狐浏览器，WebKit，对于移动端也支持，可以在 Windows、Linux、Mac 等机器上运行。脚本执行支持同步或者异步的方式。
优势：
- Playwright 支持当前所有主流浏览器，包括 Chrome 和 Edge（基于 Chromium）、Firefox、Safari（基于 WebKit） ，提供完善的自动化控制的 API。
- Playwright 支持移动端页面测试，使用设备模拟技术可以使我们在移动 Web 浏览器中测试响应式 Web 应用程序。
- Playwright 支持所有浏览器的 Headless 模式和非 Headless 模式的测试。
- Playwright 的安装和配置非常简单，安装过程中会自动安装对应的浏览器和驱动，不需要额外配置 WebDriver 等。
- Playwright 提供了自动等待相关的 API，当页面加载的时候会自动等待对应的节点加载，大大简化了 API 编写复杂度。
| categories | Playwright | Selenium | Cypress |
|---|---|---|---|
| 支持语言 | JS&TS、python、C#、Go、Java | java、python、ruby、C#、C++、JavaScript | JS&TS |
| 覆盖浏览器 | Chrome、Firefox、Safari | 目前全部主流浏览器 | Chrome |
| 多标签&表单 | 更直接的API支持 | 经过 switch_to 切换，但很难用 |
不支持 |
| 测试编写速度 | 支持录制 | 支持录制 | 不支持录制 |
| 稳定性 | 最好等待某些元素，但必须手工等待其余元素 | 复杂的自动等待机制 | 复杂的机制，而且不能与框架一起工作 |
| 文档和资源 | 工具比较新，API也在变化，文档和教程可能跟不上 | 丰富的第三方资料、社区 | 优秀的官方文档及一些社区 |
playwright 实践
录制
npx playwright codegen {url:想要进行自动化测试的网址}
将会启动浏览器和代码生成器，在页面进行操作时可以自动生成代码，而且可以选择不同语言。
ps:亲测录制下来的元素定位不靠谱，还是得自己调。
元素定位
更便捷的元素定位，当有多个元素class相同时，可以使用:has-text()来匹配文本包含指定字符串的元素。不必在使用xpath或遍历所有同名元素查找。
检查接口请求和返回
可以检查请求和返回的内容，也可以简单的判断一下状态码。有较为丰富的api支持。
