UI自动化测试框架playwright--初级入门

 一、背景：UI自动化的痛点：

1、设计脚本耗时：

需要思考要如何模拟用户的操作，如何触发页面的事件，还要思考如何设计脚本，定位和操作要交互的元素、路径、位置，再编写代码逻辑，往复循环数次，要不停在浏览器和代码编辑器中进行切换。

2、调试脚本耗时：

初步完成元素定位和操作的脚本后，还要一 一进行测试验证程序运行是否符合预期，要反复进行调试。

3、维护成本较高：

面向用户的界面的迭代变化频率较高，基于界面元素构建的测试脚本也要跟着变，那么我们面临的就是不停的更新维护既有的UI自动化脚本

思考：如何可以不用考虑定位元素、不用手写代码、并且降低维护成本地完成UI自动化流程？

二、简介与安装

1、介绍-特点

Playwright是一个由微软开发的自动化测试框架，通过“录制为主，编写为辅”的方式来完成测试脚本。

1）playwright的优点

1）支持所有主流浏览器
•支持所有主流浏览器：基于Chromium内核的Chrome 和 Edge浏览器, WebKit内核的Safari 和 Firefox浏览器。
•支持跨平台：Windows、Linux 和macOS
•可用于模拟移动端WEB应用的测试，不支持在真机上测试。
•支持无头模式（默认）和有头模式2）快速可靠的执行
•自动等待元素（默认30s）
•Playwright基于Websocket协议，可以接受浏览器（服务端）的信号，也可在后台服务器完成。selenium采用的是HTTP协议，只能客户端发起请求。
•浏览器上下文并行：单个浏览器实例下创建多个浏览器上下文，每个浏览器上下文可以处理多个页面。
•有弹性的元素选择：可以使用文本、可访问标签选择元素。3）强大的自动化能力
•playwright不受页面内JavaScript执行范围的限制，可以自动化控制多个页面。
•自动生成测试代码：Playwright提供了一个CLI工具，可以记录用户在浏览器中的操作，并生成相应的测试代码。
•强大的网络控制：Playwright 引入了上下文范围的网络拦截来存根和模拟网络请求。
•现代web特性：支持Shadow DOM选择，元素位置定位，页面提示处理，Web Worker等Web API。
•覆盖所有场景：支持文件下载、上传、输入、点击，暗黑模式等。
•支持主流编程语言：python、Java、Node.js、C#、.Net等

2）playwright的局限性

1） Playwright不支持旧版Microsoft Edge或IE11。所以对浏览器版本有硬性要求的项目不适用。2） 需要SSL证书进行访问的网站可能无法录制，该过程需要单独定位编写。3） 移动端测试是通过桌面浏览器来模拟移动设备，无法控制真机。4） Playwright的社区规模相对较小，可能会导致在解决问题时的资源有限

3）与传统的selenium对比

2、安装playwright

建议使用镜像，不然比较慢

pip install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple

安装成功

3、安装浏览器环境

此命令会一次性安装Chromium, Firefox 和 WebKit 内置浏览器，playwright就是通过这些浏览器操作web应用

playwright install

三、UI脚本录制：

1、录制脚本

在控制台，通过codegen命令，使用playwright进行脚本录制

#默认使用Chromium
playwright codegen URL#指定浏览器：
playwright codegen -- browser firefox URL#录制脚本自动保存到本地
playwright codegen -o D:\demo.py -b chromium URL
-o 生成自动化脚本的目录（默认地址为cmd运行命令的地址）
-b 指定浏览器驱动  

示例：

2、录制浏览器操作-自动生成脚本

playwright codegen https://www.baidu.com/

3、生成的脚本语言种类

支持自动生成：python、Java、Node.js、C#、.Net等编程语言

四、UI自动化结合接口自动化使用

通过调用提供出的接口，可以做UI自动化的前置或者后置的 造数、清数、设置mock，以及调用各业务线维护的P0级用例等等均可

1、接口的token

2、示例

使用 Playwright 框架模拟了一个 POST 请求，完成接口的调用，在发起放款流程前，清除在途贷款单。

plywright本身也可以应用在接口自动化

五、UI自动化断言

page = browser.new_page(timeout=60000)  # 设置 timeout 为 60 秒
page.goto("https://example.com", wait_until="networkidle")  # 使用 waitUntil将等待网络请求停止后再继续执行

1、自动断言

playwright本身支持自动生成对元素的基本断言代码，例如：元素是否可见、元素的文本是否匹配、元素的属性值是否一致、元素的快照等

2、常用的用于断言方法

对页面文本断言、对元素断言 ,对URL断言

    # 断言页面标题expect(page).to_have_title("Example Domain")# 断言 h1 文本内容expect(page.locator('h1')).to_have_text('Example Domain')# 断言元素可见expect(page.locator('text="More information..."')).to_be_visible()# 断言元素不可见# 假设页面上有一个隐藏的元素，ID为hidden-element# expect(page.locator('#hidden-element')).not_to_be_visible()# 断言元素属性# 假设页面上有一个按钮，ID为submit-button，其属性为disabled# expect(page.locator('#submit-button')).to_have_attribute('disabled', 'true')# 断言元素数量# 假设页面上有三个div元素，类名为item# expect(page.locator('div.item')).to_have_count(3)# 断言 URLexpect(page).to_have_url('https://example.com')# 断言输入框的值# 假设页面上有一个输入框，名称为username，其值为testuser# expect(page.locator('input[name="username"]')).to_have_value('testuser')# 断言元素的 CSS 属性# 假设页面上有一个按钮，其背景颜色为rgb(0, 123, 255)# expect(page.locator('button')).to_have_css('background-color', 'rgb(0, 123, 255)')# 断言元素可编辑# 假设页面上有一个输入框# expect(page.locator('input')).to_be_editable()# 断言复选框已选中# 假设页面上有一个复选框# expect(page.locator('input[type="checkbox"]')).to_be_checked()

六、截图比对

可以对页面、元素等，进行截图并比对

1、图像比对方法：

本次介绍的图片比对方法：ImageChops.difference（）需要引入pillow库，pip install pillow原理：将图像数据转换为 Image 对象，然后使用像素值进行比较1）图像对齐：首先，该方法会对齐两幅图像的大小和位置。如果两幅图像的大小不同，较小的图像会被扩展到与较大图像相同的大小。如果它们的位置不同，difference() 会尝试将它们对齐到相同的位置。2）像素值比较：然后，对于每个对应的像素点，该方法会计算它们的RGB值之间的差异。也就是计算每个通道（红、绿、蓝）中像素值的绝对差异，并将这些差异值合并成一个新的像素值。3）差异图像生成：最后，该方会创建一个新的图像：差异图像，其中每个像素的值表示了原始图像中对应像素的差异程度。差异图像通常显示为黑白图像，白色表示两个图像在该位置完全不同，黑色表示它们完全相同。

图像比对方法介绍：

选择哪种方法取决于你的具体需求和图像特性。

如果需要非常精确的对比，像素级对比可能是最好的选择；

如果你希望对比结果更符合人类视觉感知，SSIM 或 EMD 可能更合适。

1）Pillow (PIL)：提供了基本的图像处理功能，包括像素级对比。
2）imagehash：实现了 Perceptual Hashing 算法。
3）scikit-image：提供了 SSIM 和其他图像相似性度量的计算函数。
4）pyemd：实现了 Earth Mover's Distance 算法。
5）TensorFlow 或 PyTorch：可以使用这些深度学习框架来构建和训练自己的图像对比模型。

2、截取某个元素

#定位元素
element = page.get_by_role("button", name="立即登录")# 对元素进行截图
screenshot = element.screenshot()

3、截取页面

#打开页面
page.goto('https://www.baidu.com/')#截取页面
page.screenshot(path='page.png')

4、比对方式

1）本地图片与测试流程中图片比对：

  #在URL页面中截图page1page.goto("URL1")page.screenshot(path='page1.png')image1 = Image.open('page1.png')#在本地通过绝对路径获取图片2image2 = Image.open('local path')diff = ImageChops.difference(image1, image2)if diff.getbbox():print("The two pages are different.")else:print("The two pages are same.")

2）测试流程中图片比对：

    page.goto("URL1")page.screenshot(path='page1.png')page.goto("URL2")page.screenshot(path='page2.png')image1 = Image.open('page1.png')image2 = Image.open('page2.png')diff = ImageChops.difference(image1, image2)if diff.getbbox():print("The two pages are different.")else:print("The two pages are same.")

七、模拟移动端

1、说明

playwright支持模拟特定设备的浏览器行为，例如用户代理、屏幕尺寸、视口以及是否启用了触摸。所有测试都将使用指定的设备参数运行。

2、示例：

通过配置UA结合device模拟移动端，小贷日常用于移动端测试、用户鉴权等场景

browser = playwright.chromium.launch(headless=False)
# browser2 = playwright.chromium.launch(channel='chrome', args=['--device', 'iPhone 15 Pro Max'])mobile_context = browser.new_context(user_agent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148/application=JDJR-App&clientType=ios&iosType=iphone&clientVersion=6.8.70&HiClVersion=6.8.60&isUpdate=0&osVersion=16.6.1&osName=iOS&screen=932*430&src=App Store&netWork=2&netWorkType=5&CpayJS=UnionPay/1.0 JDJR&stockSDK=stocksdk-iphone_4.2.3&sPoint=&jdPay=(*#@jdPaySDK*#@jdPayChannel=jdfinance&jdPayChannelVersion=6.8.60&jdPaySdkVersion=4.01.17.00&jdPayClientName=iOS*#@jdPaySDK*#@)",viewport={'width': 400, 'height': 700})page2 = mobile_context.new_page()

八、可视化测试报告输出

1、allure下载与安装

allure下载地址：Central Repository: io/qameta/allure/allure-commandline

需要配置环境变量

一切安装好之后，在cmd里面查看安装的版本号

allure --version

2、安装依赖

pip install -i https://pypi.douban.com/simple allure-pytest
npm install -g allure-playwright@2.13.5

3、应用

用例文件里分层标识信息

标题：
@allure.title("用例标题")步骤：
with allure.step("执行步骤"):描述：
def test_function（）：'''描述'''

main文件里使用

# 获得测试结果，并以allure的数据格式保留下来
1）pytest.main(["--alluredir", "allure_result", "--clean-alluredir","test_loan_pc_old.py"])•["--alluredir", "allure_result"] 表示将测试结果保存在 allure_result 文件夹中，用于后续生成报告。
•["--clean-alluredir"] 表示在运行测试之前，清空 allure_result 文件夹中的内容，避免与上一次测试的结果混淆。
•["test_loan_pc_old.py"] 指定要运行的测试用例文件名。# 通过allure的数据，进行报告的生成
2）allure generate --clean ./allure_result -o ./allure_report
根据 allure_result 的数据生成测试报告，并将报告保存在 allure_report 文件夹中
--clean 选项表示在生成报告之前清空 allure_result 文件夹中的内容。

4、运行结果

自动化脚本里面，对断言失败和用例执行情况进行可视化输出

1）一成功，一失败

对断言失败和用例执行情况进行可视化输出

2）用例执行均成功

九、PO模式