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模式 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/66551.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

不同方式获取音频时长 - python 实现

不同方式获取音频时长 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式，会员享有 百种数据集，持续增加中。 需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(free)” -------------------------------------------------------------…
阅读更多...
数学建模入门——建模流程

数学建模入门——建模流程

摘要：本文介绍了数学建模的一般流程概述。 目录 一、前言 二、数据预处理 三、描述性统计分析 四、模型建立 五、模型评价 一、前言 本文将为想要入门数学建模的同学讲述数学建模的一般流程。但数学建模流程并非一成不变。虽有大致步骤，像分析问题、…
阅读更多...
人工智能及深度学习的一些题目（三）

人工智能及深度学习的一些题目（三）

1、【填空题】 使用RNNCTC模型进行语音识别，在产生预测输出时，对于输入的音频特征序列通过网络预测产生对应的字母序列，可以使用（ beamsearch ）算法进行最优路径搜索。 2、【填空题】 逻辑回归模型属于有监督学习中的&…
阅读更多...
Linux-Ubuntu之SPI串行通信陀螺仪和加速度计

Linux-Ubuntu之SPI串行通信陀螺仪和加速度计

Linux-Ubuntu之SPI串口通信陀螺仪和加速度计 一，SPI通信原理二，ICM-20608六轴传感器控制三，代码1.小tip 一，SPI通信原理 SPI：串行全双工通信，最高能达到百MHZ，通常一个主设备跟多个从设备&…
阅读更多...
【从零开始入门unity游戏开发之——unity篇04】unity6基础入门 —— 新建项目模板的选择（渲染管线相关的知识点）

【从零开始入门unity游戏开发之——unity篇04】unity6基础入门 —— 新建项目模板的选择（渲染管线相关的知识点）

文章目录 前言一、渲染管线相关知识1、什么是渲染管线（Render Pipeline）？2、渲染管线的历史背景3、什么是 Scriptable Render Pipeline（SRP）？4、Unity三种渲染管线4.1 **内置渲染管线（Built-in …
阅读更多...
AI也会犯错

AI也会犯错

一、缘起 1.1 问题的发现 AI模型在处理数值比较问题时，出现了一个有趣的现象：当被问到“9.9”和“9.11”哪个更大时，一些AI模型给出了错误的答案，认为“9.9”大于“9.11”。这一问题最初是由 Riley Goodside 发现的，…
阅读更多...
Telnet工具的使用

Telnet工具的使用

Mac 下载安装，双击打开Windows 默认自带，但需要开启使用，控制面板->启用或关闭windows功能->Telnet客户端 管理员身份启动终端，输入telnet。远程连接 telnet ip 端口号 #看到输出后再回车一次调用服务 首先明确项目中有哪些…
阅读更多...
Python的Matplotlib库应用（超详细教程）

Python的Matplotlib库应用（超详细教程）

目录 一、环境搭建 1.1 配置matplotlib库 1.2 配置seaborn库 1.3 配置Skimage库 二、二维图像 2.1 曲线（直线）可视化 2.2 曲线（虚线）可视化 2.3 直方图 2.4 阶梯图 三、三维图像 3.1 3D曲面图 3.2 3D散点图 3.3 3D散…
阅读更多...
一个个顺序挨着来 - 责任链模式（Chain of Responsibility Pattern）

一个个顺序挨着来 - 责任链模式（Chain of Responsibility Pattern）

责任链模式（Chain of Responsibility Pattern） 责任链模式（Chain of Responsibility Pattern）责任链模式（Chain of Responsibility Pattern）概述责任链结构图责任链模式概述责任链模式涉及的角色 talk is c…
阅读更多...
Laravel 新 WebSocket 服务 Reverb 使用指南

Laravel 新 WebSocket 服务 Reverb 使用指南

旧篇 > Laravel/Lumen 中使用 Echo Socket.IO-Client 实现网页即时通讯广播 https://blog.csdn.net/maxsky/article/details/130394420 已过时 与时俱进，Laravel 官方在 2024 年 7 月发布了 laravel/reverb 包的正式版，因为之前使用的 laravel-echo-…
阅读更多...
WEB攻防-通用漏洞_文件上传_黑白盒审计流程

WEB攻防-通用漏洞_文件上传_黑白盒审计流程

目录 前置知识点 Finecms-CMS文件上传 ​编辑 Cuppa-Cms文件上传 Metinfo-CMS 文件上传 前置知识点 思路： 黑盒就是寻找一切存在文件上传的功能应用 1 、个人用户中心是否存在文件上传功能 2 、后台管理系统是否存在文件上传功能 3 、字典目录扫描探针文件上传构…
阅读更多...
Agentic RAG 解释

Agentic RAG 解释

RAG（检索增强生成）通过提供来自外部知识源的相关背景来帮助提高 LLM 答案的准确性和可靠性。 Agentic RAG 是高级 RAG 版本，它使用 AI 代理来更加自主地行动。 Agentic RAG 执行以下操作 查询理解、分解和重写检索策略选择知识库管理结果综…
阅读更多...
apex安装

apex安装

安装过程复杂曲折，网上说的很多办法，貌似成功了，实际还是没起作用。 先说成功过程，执行下面命令，安装成功（当然，前提是你要先配置好编译环境）： （我的环境&a…
阅读更多...
基于FPGA的出租车里程时间计费器

基于FPGA的出租车里程时间计费器

基于FPGA的出租车里程时间计费器 功能描述一、系统框图二、verilog代码里程增加模块时间增加模块计算价格模块上板视频演示 总结 功能描述 （1）；里程计费功能：3公里以内起步价8元，超过3公里后每公里2元，其中…
阅读更多...
jdk8升级JDK21(Springboot2.7.18升级Springboot3.4.0)

jdk8升级JDK21(Springboot2.7.18升级Springboot3.4.0)

目录 背景： 一、maven升级 二、代码改造 2.1 javax替换为jakarta 2.2 swagger2升级swagger3相关更新 2.2.1 新增SpringDocConfig配置类 2.2.2 全局代码更新 2.2.3 全局代码替换（普通正则替换） 2.3 Mybatis Plus升级 2.4 logback.xm…
阅读更多...
AI赋能跨境电商：魔珐科技3D数字人破解出海痛点

AI赋能跨境电商：魔珐科技3D数字人破解出海痛点

跨境出海进入狂飙时代，AI应用正在深度渗透并重塑着跨境电商产业链的每一个环节，迎来了发展的高光时刻。生成式AI时代的大幕拉开，AI工具快速迭代，为跨境电商行业的突破与飞跃带来了无限可能性。 由于跨境电商业务自身特性鲜明&…
阅读更多...
【HarmonyOS NEXT】鸿蒙应用实现屏幕录制详解和源码

【HarmonyOS NEXT】鸿蒙应用实现屏幕录制详解和源码

【HarmonyOS NEXT】鸿蒙应用实现屏幕录制详解和源码 一、前言 官方文档关于屏幕录制的API和示例介绍获取简单和突兀。使用起来会让上手程度变高。所以特意开篇文章，讲解屏幕录制的使用。官方文档参见：使用AVScreenCaptureRecorder录屏写文件(ArkTS) 二…
阅读更多...
Android - NDK：编译可执行程序在android设备上运行

Android - NDK：编译可执行程序在android设备上运行

在android开发中，调试时会把C代码直接编译成可执行程序，运行在android设备上以确认其功能是否正常。 1、基于NDK编译可执行文件 2、push到 /data/local/tmp目录下 3、设置权限，执行。 ndk工程中build.gradle设置 groovy plugins {id com.a…
阅读更多...
用matlab调用realterm一次性发送16进制数

用matlab调用realterm一次性发送16进制数

realterm采用PutString接口进行发送，需要注意的是发送的16进制数前面要加入0x标志。只有这样，realterm才能将输入的字符串识别为16进制数的形式。 另外,PutString函数支持两个参数输入，第一个参数为字符串，第二个参数为发送形式&…
阅读更多...
Python3刷算法来呀，贪心系列题单

Python3刷算法来呀，贪心系列题单

1.7号题单 1、​​​​​​k次取反后最大值 2、柠檬水找零 3、分发糖果 示例 1： 输入：ratings [1,0,2] 输出：5 解释：你可以分别给第一个、第二个、第三个孩子分发 2、1、2 颗糖果。示例 2： 输入：ratings…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023