长沙知名网站,网站制作公司,优秀设计案例,房产管理局信息查询入口一、背景#xff1a;UI自动化的痛点#xff1a;
1、设计脚本耗时#xff1a;
需要思考要如何模拟用户的操作#xff0c;如何触发页面的事件#xff0c;还要思考如何设计脚本#xff0c;定位和操作要交互的元素、路径、位置#xff0c;再编写代码逻辑#xff0c;往复循… 一、背景UI自动化的痛点
1、设计脚本耗时
需要思考要如何模拟用户的操作如何触发页面的事件还要思考如何设计脚本定位和操作要交互的元素、路径、位置再编写代码逻辑往复循环数次要不停在浏览器和代码编辑器中进行切换。
2、调试脚本耗时
初步完成元素定位和操作的脚本后还要一 一进行测试验证程序运行是否符合预期要反复进行调试。
3、维护成本较高
面向用户的界面的迭代变化频率较高基于界面元素构建的测试脚本也要跟着变那么我们面临的就是不停的更新维护既有的UI自动化脚本 思考如何可以不用考虑定位元素、不用手写代码、并且降低维护成本地完成UI自动化流程
二、简介与安装
1、介绍-特点
Playwright是一个由微软开发的自动化测试框架通过“录制为主编写为辅”的方式来完成测试脚本。
1playwright的优点
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等
2playwright的局限性
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(timeout60000) # 设置 timeout 为 60 秒
page.goto(https://example.com, wait_untilnetworkidle) # 使用 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(textMore 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[nameusername])).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[typecheckbox])).to_be_checked()
六、截图比对
可以对页面、元素等进行截图并比对
1、图像比对方法
本次介绍的图片比对方法ImageChops.difference需要引入pillow库pip install pillow原理将图像数据转换为 Image 对象然后使用像素值进行比较1图像对齐首先该方法会对齐两幅图像的大小和位置。如果两幅图像的大小不同较小的图像会被扩展到与较大图像相同的大小。如果它们的位置不同difference() 会尝试将它们对齐到相同的位置。2像素值比较然后对于每个对应的像素点该方法会计算它们的RGB值之间的差异。也就是计算每个通道红、绿、蓝中像素值的绝对差异并将这些差异值合并成一个新的像素值。3差异图像生成最后该方会创建一个新的图像差异图像其中每个像素的值表示了原始图像中对应像素的差异程度。差异图像通常显示为黑白图像白色表示两个图像在该位置完全不同黑色表示它们完全相同。
图像比对方法介绍
选择哪种方法取决于你的具体需求和图像特性。
如果需要非常精确的对比像素级对比可能是最好的选择
如果你希望对比结果更符合人类视觉感知SSIM 或 EMD 可能更合适。
1Pillow (PIL)提供了基本的图像处理功能包括像素级对比。
2imagehash实现了 Perceptual Hashing 算法。
3scikit-image提供了 SSIM 和其他图像相似性度量的计算函数。
4pyemd实现了 Earth Movers Distance 算法。
5TensorFlow 或 PyTorch可以使用这些深度学习框架来构建和训练自己的图像对比模型。
2、截取某个元素
#定位元素
element page.get_by_role(button, name立即登录)# 对元素进行截图
screenshot element.screenshot()
3、截取页面
#打开页面
page.goto(https://www.baidu.com/)#截取页面
page.screenshot(pathpage.png)
4、比对方式
1本地图片与测试流程中图片比对 #在URL页面中截图page1page.goto(URL1)page.screenshot(pathpage1.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(pathpage1.png)page.goto(URL2)page.screenshot(pathpage2.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(headlessFalse)
# browser2 playwright.chromium.launch(channelchrome, args[--device, iPhone 15 Pro Max])mobile_context browser.new_context(user_agentMozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148/applicationJDJR-AppclientTypeiosiosTypeiphoneclientVersion6.8.70HiClVersion6.8.60isUpdate0osVersion16.6.1osNameiOSscreen932*430srcApp StorenetWork2netWorkType5CpayJSUnionPay/1.0 JDJRstockSDKstocksdk-iphone_4.2.3sPointjdPay(*#jdPaySDK*#jdPayChanneljdfinancejdPayChannelVersion6.8.60jdPaySdkVersion4.01.17.00jdPayClientNameiOS*#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-playwright2.13.5
3、应用
用例文件里分层标识信息
标题
allure.title(用例标题)步骤
with allure.step(执行步骤):描述
def test_function描述
main文件里使用
# 获得测试结果并以allure的数据格式保留下来
1pytest.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的数据进行报告的生成
2allure generate --clean ./allure_result -o ./allure_report
根据 allure_result 的数据生成测试报告并将报告保存在 allure_report 文件夹中
--clean 选项表示在生成报告之前清空 allure_result 文件夹中的内容。
4、运行结果
自动化脚本里面对断言失败和用例执行情况进行可视化输出
1一成功一失败 对断言失败和用例执行情况进行可视化输出 2用例执行均成功 九、PO模式
