【原创】Playwright 实战技巧大揭秘

lsekfe

一：实施的背景

相信使用过Selenium WebDriver的小伙伴对其最大的诟病有3点，一是浏览器的driver和版本对应问题，第二是Selenium的执行速度，最后一个槽点是对页面元素文本值的断言非常不便。在我们长期维护大量UI自动化测试用例的过程中这两个痛点会让我们耗费不少精力和时间。

二：PlayWright最佳实践2.1为何要选择PlayWright？

对Selenium的痛点，PlayWright给出了完美的解决方案！

PlayWright的架构：

Playwright使用Chrome DevTools 协议与 Chromium 通信。一旦触发测试，client端代码将被转换为JSON格式，然后使用websocket协议发送到服务器。
Playwright通过单个 websocket 协议连接传达所有请求，该连接将保持不变，直到所有测试执行完成。由于命令是在单个连接上发送的，因此测试失败或不稳定的可能性较小，并且命令可以快速执行。

Playwright启动速度比较快,拥有更多的定位方式,不需要安装驱动,能够在多个平台上运行,提供录制功能实现录制用例视屏,使用上来说Playwright也比较容易,无需过多封装即可直接使用.

2.2 环境部署

安装playwright前先配置好node和python环境，之后通过pip来安装playwright和其他库。
以Mac OS为例，执行如下命令:

安装playwright库

pipinstall playwright

然后安装browsers(会安装chromium,firefox,webkit浏览器)

playwrightinstall

如果只想安装指定的browser，则执行如下命令
playwright installchromium

2.3 重要的名词

在开始尝试使用playwright之前，需要先了解它的几个重要概念。

Browser：是一个浏览器实例，代表一个浏览器会话。它是一个全局的上下文，可以包含多个BrowserContext。

使用：创建浏览器实例管理浏览器生命周期：可以启动浏览器、关闭浏览器等。

1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
   
2. def test_api_show(playwright: Playwright):
   
3.     browser = playwright.chromium.launch()
   
4. </font>

复制代码

BrowserContext：是浏览器中的一个隔离环境，可以包含多个 Page。每个BrowserContext有自己的浏览器存储，例如 cookies 和本地存储。

使用：创建新的上下文，管理上下文。可以添加页面、关闭页面等。

1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
   
2. def test_api_show(playwright: Playwright):
   
3.     browser = playwright.chromium.launch()
   
4.     context = browser.new_context()
   
5. </font>

复制代码

Page：是浏览器中的一个标签页，可以进行页面导航、操作 DOM 元素、捕获页面截图等。

使用：导航页面，操作 DOM 元素，捕获页面截图，处理页面事件。

1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
   
2. def test_api_show(playwright: Playwright):
   
3.     browser = playwright.chromium.launch()
   
4.     context = browser.new_context()
   
5.     page = context.new_page()
   
6.     page.goto("")
   
7. </font>

复制代码

2.4 元素定位

元素定位是PlayWright的核心部分，我们会详细演示常用方法的使用。

get_by_placeholder：根据页面元素的placeholder属性值定位