想要上手playwright？看这篇文章就够了！（文章有点长，建
本文系统地介绍了playwright的基础概念，架构，安装过程，编码demo（python实例），常用API，录制脚本的方法以及playwright在无头模式的应用和其与selenium的对比。相信大家认真阅读本文后一定会对playwright有一个概括的认识，并可以编写自动化测试脚本在实际工作中进行应用，文章较长建议收藏多读几遍！
概述
playwright是由微软开发的Web UI自动化测试工具， 支持的浏览器包括：Chromium, Firefox and WebKit，支持的编码语言包括：Node.js、Python、C# 和 Java语言。
官网https://playwright.dev/
playwright具有以下特点：
一、支持所有主流浏览器并跨平台
支持所有主流浏览器：基于Chromium内核的Google Chrome 和 Microsoft Edge浏览器), WebKit内核的Apple Safari 和 Mozilla Firefox浏览器，不支持IE11。
跨平台：Windows、Linux 和macOS
可用于模拟移动端WEB应用的测试，不支持在真机上测试。
支持无头模式（默认）和有头模式
二、快速可靠的执行
自动等待元素
Playwright基于Websocket协议，可以接受浏览器（服务端）的信号
浏览器上下文并行：单个浏览器实例下创建多个浏览器上下文，每个浏览器上下文可以处理多个页面。
有弹性的元素选择：可以使用文本、可访问标签选择元素。
架构
如下图所示
具体解释：
client：在客户端是我们用不同的编程语言编写的代码，如JavaScript，Java，Python，C#等。
server：Playwright的server通过nodejs构建并负责与client 以及不同的 Web 浏览器引擎进行通信。
通信协议：client通过WebSocket 协议与Playwright server 通信；
Playwright使用 Chrome DevTools 协议 （CDP） 与 Chromium 通信。对于Firefox和WebKit，Playwright实现了自己的协议，类似于CDP。一旦触发测试，client端代码将被转换为JSON格式，然后使用websocket 协议发送到服务器。palywright通过单个 websocket 协议连接传达所有请求，该连接将保持不变，直到所有测试执行完成。由于命令是在单个连接上发送的，因此测试失败或不稳定的可能性较小，并且命令可以快速执行。这种架构与Selenium相反，Selenium使用HTTP连接协议，并将每个命令（如浏览器打开，单击，发送密钥或关闭浏览器）作为单独的HTTP请求发送。此外，在Selenium中，服务器和客户端之间的连接将在每次请求后终止，并为下一个请求重新建立。最后划重点：这就是Playwright比selenium快的原因！
安装
我们以python为例，python版本需要3.7+
pip install playwright
playwright install
pip install msvc-runtime
备注：如果是java编码，需要通过maven构建，pom.xml如下
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.28.1</version>
</dependency>
基础编码
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(channel="chrome", headless=False)
page = browser.new_page()
page.goto("http://www.baidu.com")
print(page.title())
browser.close()
无头模式
Playwright 默认是使用无头模式，在上面的代码中如果修改为
browser = p.chromium.launch(channel="chrome")
大家运行代码时会发现：脚本依然会运行，但是测试全程并没有启动浏览器。
无头浏览器，即 Headless Browser，是一种没有界面的浏览器。它拥有完整的浏览器内核，包括 JavaScript 解析引擎、渲染引擎等。与普通浏览器最大的不同是，无头浏览器执行过程中看不到运行的界面，但是我们依然可以用 GUI 测试框架的截图功能截取它执行中的页面。
无头浏览器的主要应用场景
无头浏览器主要应用在： GUI 自动化测试、页面监控、网络爬虫以及没有桌面的linux系统中。在这里我们重点说一下 GUI 自动化测试，在 GUI 测试过程中，使用无头浏览器的好处主要体现在以下几个方面：
测试执行速度更快。 无头浏览器无需加载 CSS 以及渲染页面，在测试用例的执行速度上有很大的优势，个人觉得适合在接口测试中通过页面造数据或者删数据的场景。
减少对测试执行的干扰。 可以减少操作系统以及其他软件（比如杀毒软件等）不可预期的弹出框，对浏览器测试的干扰。
一台机器上同时运行不同厂商的无头浏览器（无头浏览器占用内存资源，要比正常浏览器小），实现测试用例的并发执行。
无头浏览器缺点
1. 不能完全模拟真实的用户行为
2. 不便于调试（各个浏览器的开发者工具）
主流的无头浏览器概述
Chrome Headless，Chrome从59版本开始支持
Firefox Headless，Firefox从56版本开始支持
PhantomJS，使用JavaScript编写的无头浏览器，能够支持Windows, macOS, Linux
Splash，使用Python编写的无头浏览器，使用WebKit作为引擎
HtmlUnit，使用Java编写的无头浏览器，使用Rhino engine作为引擎
录制脚本
Playwright可以使用codegen来录制脚本，使用方式非常简单，只要大家玩过ui自动化测试的录制相关工具三分钟就可以学会上手！
使用命令
playwright codegen https://www.baidu.com/
会启动浏览器页面，然后识别页面中的元素，并记录操作过程
操作的过程会通过playwright Inspector记录，这就是自动化测试中的录制工具，相信做过自动化测试的同学都会懂
使用命令
playwright codegen --target python -o baidu_test.py -b chromium https://www.baidu.com/
会把我们在浏览器中的操作脚本化并保存到baidu_test.py中
常用API
大家可以相关文档查看api
https://playwright.bootcss.com/python/docs/intro
识别元素
page.get_by_role()通过显式和隐式可访问性属性定位。
page.get_by_text()按文本内容定位。
page.get_by_label()通过关联标签的文本查找表单控件。
page.get_by_placeholder()按占位符查找输入。
page.get_by_alt_text()通过其文本替代品定位元素，通常是图像。
page.get_by_title()通过标题属性定位元素。
page.get_by_test_id()根据其data-testid属性定位元素（可以配置其他属性）。
playwright除了上述定位方式，还支持selenium的8种by元素定位，id、xpath、css等等，另外还有W3C标准规定的webDriver协议为5种定位方式
CSS、Link text、Partial link text、Tag name、XPath
playwright把这些定位归类成3种，分别是：css、xpath、text
定位器的断言操作
https://playwright.dev/python/docs/api/class-locatorassertions
判断元素状态
is_checked
is_disabled
is_editable
is_enabled
is_hidden
is_visible
操控元素
写相关操作：clear、fill
点击：click、dbclick
下拉选择框：select_option
文件上传：set_input_files
鼠标拖动：down、up、move、wheel
触摸屏幕：tap
键盘按键：press
截屏：screenshot
页面切换expect_popup
执行js：evaluate
更多操作请参考
https://playwright.dev/python/docs/next/api/class-locator#locator-fill
playwright与selenium对比
我初步学习了Playwright之后，第一感受是Playwright就是来对标selenium的，这是在网上找到的二者对比列表
总体感受是：
优点：
比selnium执行速度快
缺点
与Selenium相比，Playwright没有一个很大的社区；
它不适用于旧版浏览器和设备，如果项目需要在比较旧的浏览器上运行，那么Playwright不适合。
