自动化神器 Playwright 的 Web 自动化测试解决方案

news/2024/7/27 8:14:23/文章来源:https://blog.csdn.net/m0_58552717/article/details/135566990

 

1. 主流框架的认识

image.png

  • 总结:
    • 由于Selenium在3.x和4.x两个版本的迭代中并没有发生多大的变化,因此Selenium一统天下的地位可能因新框架的出现而变得不那么稳固。
    • 后续的Cypress、TestCafe、Puppeteer被誉为后Selenium时代Web UI自动化的三驾马车。但是由于这三个框架都是基于JavaScript开发的,且都不支持Python,所以使用率并没有很高。
    • playwright则是综合了上述框架的优点,提供了很好的体验,将来可能成为流行的趋势。

2. Playwright认识

  • Playwright简介

    • 2020年,微软(Microsoft)开源了一个名为Playwright的工具,与Selenium一样入门简单,支持多语言(Python、Java、Node.js、.NET),支持多浏览器(Chromium、Firefox、Webkit),可跨平台(Windwos、Linux、Mac OS)
    • Playwright同时支持接口自动化和UI自动化,为现代web应用提供了可靠的端到端的测试能力。
  • Playwright优势

    • 1)自动等待功能让自动化更可靠
    • 2)自动追踪:可以很方便地配置重试策略,自动的追踪结果,以截图和录屏的方式进行记录。
    • 3)断言机制:会根据网络环境进行自动断言,直到满足某种条件为止。
    • 4)异步执行:Playwright基于socket进行双向通讯,支持同步与异步执行两种方式
    • 5)可运行多页仿真场景:Playwright是通过上下文管理浏览器,相当于每一个测试用例都会创建一个独立的上下文,浏览器的上下文其实就是一个全新的浏览器,这种方式的好处就是在提速的同时又实现测试与测试之间的隔离,使得测试结果更加准确,所以可以实现并行执行。
    • 6)强大的工具集:还我们提供了强大的工具集,例如:脚本录制工具codegen、脚本编写以及调试工具playwright等

3. Playwright环境搭建

  • Python环境:python解释器+IDE工具,不知道怎么安装的可参考: python3.4 + pycharm 环境安装 + pycharm 使用

  • Playwright环境:

    • 安装Playwright:pip install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple

image.png

  • 安装内置浏览器(chromium,firefox,webkit):playwright install

image.png

4. Playwright入门实战

1)脚本录制
  • 案例1:实现Web ui自动化,打开浏览器,访问测试派(商城首页),点击登录后在进行登录操作(输入用户名、密码,点击登录按钮)
  • 操作步骤:
    • 第一步:pycharm--Terminal中输入命令:playwright codegen,会自动打开浏览器和Playwright Inspector工具,Playwright Inspector工具自动开启录制功能
    • 第二步:在打开的浏览器中进行相关的操作,如访问地址、点击或输入操作
    • 第三步:操作完成后,在Playwright Inspector中点击Record停止录制,然后复制代码即可
from playwright.sync_api import Playwright, sync_playwright, expectdef run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()page = context.new_page()page.goto("http://175.178.53.95:8081/")page.get_by_text("登录").click()page.get_by_placeholder("用户名/邮箱/手机号").click()page.get_by_placeholder("用户名/邮箱/手机号").fill("kemi")page.get_by_placeholder("用户名/邮箱/手机号").press("Tab")page.get_by_placeholder("密码").fill("123456")page.pause()  # 断点调试功能page.get_by_role("button", name="登录").click()# ---------------------context.close()browser.close()with sync_playwright() as playwright:run(playwright)

2)录制工具快速定位元素
  • 如果我自己写代码,需要定位元素,通过Playwright Inspector工具的Pick locator可以快速获取元素定位的信息,具体操作如下截图:

image.png

  • Playwright支持两大类元素定位方式,包括:
  • 1)get_by方式
    • get_by_id: 通过元素的 id 属性来查找元素,例如:element = page.get_by_id("my-id")
    • get_by_name: 通过元素的 name 属性来查找元素,例如:element = page.get_by_name("my-name")
    • get_by_text: 通过元素的文本内容来查找元素,例如:element = page.get_by_text("Submit")
    • get_by_title: 通过元素的 title 属性来查找元素,例如:element = page.get_by_title("my-title")
    • get_by_placeholder: 通过元素的 placeholder 属性来查找元素,例如:element = page.get_by_placeholder("my-placeholder")
    • get_by_selector: 通过 CSS 选择器来查找元素,例如:element = page.get_by_selector("#submit-button")
    • get_by_xpath: 通过 XPath 表达式来查找元素,例如:element = page.get_by_xpath("//div[@class='my-class']")
    • get_by_label: 根据label属性值查找元素,类似于HTML中的label标签和对应的for属性。
    • get_by_role: 通过角色方式定位元素,例如:element = page.get_by_role("button", name="Submit")
  • 2)page.locator方式
    • 通过ID定位元素:使用page.locator("#element-id")page.locator('id=element-id')定位。
    • 通过CSS选择器定位元素:使用page.locator("css=selector")定位。例如:element = page.locator("button#submit-button")
    • 通过XPath表达式定位元素:使用page.locator("xpath=expression")定位。例如:element = page.locator("//button[@id='submit-button']")
    • 通过名称定位元素:使用page.locator("name=element-name")定位。
    • 通过链接文本定位元素:使用page.locator("text=link-text")定位。
    • 通过部分链接文本定位元素:使用page.locator("partial_text=partial-link-text")定位。
    • 通过元素属性定位元素:使用page.locator("[attribute=value]")定位。
    • 通过标签名定位元素:使用page.locator("tag=tag-name")定位。

4. Pytest+Allure+Playwright完整项目演示

1)脚本转为测试用例
  • 案例需求:将上面测试派(商城首页)的登录操作转为测试用例
  • 操作步骤:
    • 第一步:pycharm--Terminal中输入命令:playwright codegen,会自动打开浏览器和Playwright Inspector工具,Playwright Inspector工具自动开启录制功能
    • 第二步:在打开的浏览器中进行相关的操作,如访问地址、点击或输入操作
    • 第三步:操作完成后,在Playwright Inspector中点击Record停止录制
    • 第四步:在Target中选择Python下的pytest,就会自动化将录制的代码转为测试用例,然后复制代码即可。具体操作如下截图所示:

image.png

  • 代码如下:
 
from playwright.sync_api import Page, expectdef test_example(page: Page) -> None:page.goto("http://175.178.53.95:8081/")page.get_by_text("登录").click()page.get_by_placeholder("用户名/邮箱/手机号").click()page.get_by_placeholder("用户名/邮箱/手机号").fill("kemi")page.get_by_placeholder("用户名/邮箱/手机号").press("Tab")page.get_by_placeholder("密码").fill("123456")page.get_by_role("button", name="登录").click()

  • 执行用例前必须先安装插件,否则会报错,因为用例只有核心的业务操作,没有浏览器、上下文、页面的初始化,装了插件后会自动做这些初始化的操作,从而执行用例不会报错。命令:pip install pytest-playwright

image.png

2)数据驱动
  • 集合pytest的parametrize实现数据驱动
import pytest
from playwright.sync_api import Page, expect# 测试用例数据
case_data = [{'caseid':1,'username':'kemi123', 'password':'kemi123'},{'caseid':2,'username':'zhangsan', 'password':'123456'},{'caseid':3,'username':'lisi', 'password':'123456'}]# 数据驱动
@pytest.mark.parametrize('case', case_data)
def test_example(page: Page,case) -> None:username = case['username']password = case['password']page.goto("http://175.178.53.95:8081/")page.get_by_text("登录").click()page.get_by_placeholder("用户名/邮箱/手机号").click()page.get_by_placeholder("用户名/邮箱/手机号").fill(username)page.get_by_placeholder("用户名/邮箱/手机号").press("Tab")page.get_by_placeholder("密码").fill(password)page.get_by_role("button", name="登录").click()page.screenshot(path=f"images/login/登录{case['caseid']}.png")  # 截图保存到指定位置

3)报告显示
  • 通过pytest执行用例后,通过命令生成报告:allure serve outputs/allure,查看报告显示,截图如下:

image.png



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

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

相关文章

ES数据聚合

1.数据聚合 聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如: 什么品牌的手机最受欢迎? 这些手机的平均价格、最高价格、最低价格? 这些手机每月的销售情况如何? 实现这些…

Python办公自动化 – 自动化文本翻译和Oracle数据库操作

Python办公自动化 – 自动化文本翻译和Oracle数据库操作 以下是往期的文章目录,需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自…

Smallpdf扫描、转换、压缩、编辑、签名PDF

【应用名称】:Smallpdf: 扫描、转换、压缩、编辑、签名PDF 【适用平台】:#Android 【软件标签】:#Smallpdf 【应用版本】:1.71.0 【应用大小】:150MB 【软件说明】:通过 Smallpdf,您可以&…

【河海大学论文LaTeX+VSCode全指南】

河海大学论文LaTeXVSCode全指南 前言一、 LaTeX \LaTeX{} LATE​X的安装二、VScode的安装三、VScode的配置四、验证五、优化 前言 LaTeX \LaTeX{} LATE​X在论文写作方面具有传统Word无法比拟的优点,VScode作为一个轻量化的全功能文本编辑器,由于其极强的…

Python 二维平面Delaunay三角网建立

目录 一、算法概念二、代码实现三、结果示例根据二维平面内的离散点建立平面三角网。 一、算法概念 三角剖分与Delaunay剖分定义:如何把一个散点集剖分成不均匀的三角形网格,即在给定的平面点集上,生成三角形集合的过程。考虑平面点集P={p1,p2,p3,…,pn},我们希望得到三…

Kibana:使用反向地理编码绘制自定义区域地图

Elastic 地图(Maps)附带预定义区域,可让你通过指标快速可视化区域。 地图还提供了绘制你自己的区域地图的功能。 你可以使用任何您想要的区域数据,只要你的源数据包含相应区域的标识符即可。 但是,当源数据不包含区域…

前端安全专题

xss (Cross Site Scripting) 跨站脚本攻击 原理 通常指黑客通过"HTML注入"篡改了网页,插入了恶意的脚本,从而在用户浏览网页时,控制用户浏览器的一种攻击。 常见攻击类型 存储型XSS 攻击者将恶意的 JavaScript 脚本存储在网站…

模板设计模式-实例

在软件开发中,有时也会遇到类似的情况,某个方法的实现需要多个步骤(类似“请客”),其 中有些步骤是固定的(类似“点单”和“买单”),而有些步骤并不固定,存在可变性&…

redis之单线程和多线程

目录 1、redis的发展史 2、redis为什么选择单线程? 3、主线程和Io线程是怎么协作完成请求处理的? 4、IO多路复用 5、开启redis多线程 1、redis的发展史 Redis4.0之前是用的单线程,4.0以后逐渐支持多线程 Redis4.0之前一直采用单线程的主…

【GitHub项目推荐--一行命令下载全网视频】【转载】

项目地址:https://github.com/soimort/you-get 首先声明,请不要使用该项目从事违法活动哦~仅供学习使用! 解决痛点 如果你上网的时候看了一些东西不错,想下载下来,或者在线观看喜欢的视频,但是没有找到网…

Android Studio 如何设置中文

Android Studio 是一个为 Adndroid 平台开发程序的集成开发环境(IDE)。 如何安装中文插件 在 Jetbrains 家族的插件市场上,是能够搜到语言包插件的,正常情况下安装之后只需要重启即可享受中文界面,可AndroidStudio 中…

物联网介绍

阅读引言: 本文从多方面叙述物联网的定义以及在物联网当中的各种通信的介绍。 一、物联网的定义 1.1 通用的定义 物联网(Internet of Things,IOT;也称为Web of Things)是指通过各种信息传感设 备,如传感器、…

Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹&#xff0c;用来存放接口类型 2定义一个接口&#xff0c;用于限制person对象的具体属性 当需要用这个类型形成数组时&#xff0c;有2种写法 export type Persons Array<PersonInter> export type Persons PersonInter[] 3在文件中使…

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

C#--核心

CSharp核心知识点学习 学习内容有&#xff1a; 绪论&#xff1a;面向对象的概念 Lesson1&#xff1a;类和对象 练习&#xff1a; Lesson2&#xff1a;封装--成员变量和访问修饰符 练习: Lesson3:封装--成员方法 Lesson4&#xff1a;封装--构造函数和析构函数 知识点四 垃圾回收…

git主分支合并到本地分支起冲突的解决办法

1.原因&#xff1a;一个项目几个人共同承担&#xff0c;难免有交叉的部分&#xff0c;这个时候交叉部分的提交就会导致冲突 2.方法&#xff1a;点开该类手动进行更改&#xff1a; 一般会有两种情况&#xff1a;一个是更改&#xff0c;一个是冲突(IDEA右上角会显示)&#xff1b;…

meter报OOM错误,如何解决?

根据在之前的压测过程碰到的问题&#xff0c;今天稍微总结总结&#xff0c;以后方便自己查找。 一、单台Mac进行压测时候&#xff0c;压测客户端Jmeter启动超过2000个线程&#xff0c;Jmeter报OOM错误&#xff0c;如何解决&#xff1f; 解答&#xff1a;单台Mac配置内存为8G&…

详解java中ArrayList

目录 前言 一、ArrayList是什么 二、ArrayList使用 1、ArrayList的构造 2 、ArrayList常见操作 3、 ArrayList的遍历 4、 ArrayList的扩容机制 三、来个练习 前言 当你看到这篇文章我觉得很好笑&#xff0c;因为我开始也不懂ArrayList现在轮到你了&#xff0c;嘻嘻嘻&am…

GRE隧道(初级VPN)配置步骤

一、拓朴图&#xff1a; 要求&#xff1a;1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤&#xff1a; 1、配置IP 2、R1、R2 配置nat&#xff0c;代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…

Nginx配置负载均衡实例

Nginx配置反向代理实例二 提醒一下&#xff1a;下面实例讲解是在Mac系统演示的&#xff1b; 负载均衡实例实现的效果 浏览器地址栏输入地址http://192.168.0.101/test/a.html&#xff0c;刷新页面进行多次请求&#xff0c;负载均衡效果&#xff0c;平均分配到8080端口服务和8…