Web应用自动化测试实战——基于Playwright实现 键盘、鼠标以及组合操作

于 2024-11-28 18:13:54 发布
阅读量1.1k 收藏 27
点赞数 29
分类专栏： 自动化测试 职场经验 软件测试 文章标签： 前端 自动化测试 功能测试 程序员 职场经验 Web自动化测试 Playwright
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx17343624830/article/details/144117693
版权

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

Playwright对键盘的操作主要是键盘打字和按键。这里准备一个网页，用来学习键盘的操作。页面上有一个文本框，可以通过键盘向其输入字符。另外，还有三个单选按钮，可以通过键盘的上下箭头控制选中哪一个选项。

在这里插入图片描述网页源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playwright键盘操作</title>
  </head>
  <body>

    <span>①键盘操作：</span><br>
    <textarea rows="10" cols="30">
    </textarea>
    <button type="submit">提交</button>
    <br>
    <label> Key Up <input id="r1" type="radio" name="a"> </label><br>
    <label> Key Down <input id="r2" type="radio" name="a"> </label><br>
    <label> Key Press <input id="r3" type="radio" name="a"> </label><br>


  </body>
</html>

Playwright通过locator.type()可以模拟通过键盘一个字一个字输入的效果，其中delay参数控制每个字输入的间隔时间。大部分情况下， 我们会使用locator.fill()填充文本内容，locator.type()用的并不多。

通过locator.press()模拟对键盘上单个按键的操作。

下面代码是通过对上面网页进行的键盘操作。

def test_mouse_keyboard(page):
    page.goto("file:///Users/chunming.liu/PycharmProject/playwright_demo/html/keyboard.html")
    page.locator("textarea").type("大学之道在明明德在亲民在止于至善", delay=500)
    page.locator("textarea").press("$")
    page.locator("textarea").press('A')
    page.locator("textarea").press('0')
    page.locator("textarea").press("F1")
    page.locator("textarea").press("Escape")  #键入Esc键
    page.locator("textarea").press("Equal")  # 键入等号按键
    page.locator("textarea").press("Backspace")   # 键入退格按键
    page.locator("textarea").press("Enter")  # 键入回车键
    page.locator("textarea").press("Enter")  # 键入回车键
    page.get_by_text("Key Up").click()  # 点击Key Up按钮
    page.get_by_label("Key Up").press("ArrowDown") # 键入向下箭头按键
    page.get_by_label("Key Down").press("ArrowDown")# 键入向下箭头按键
    page.get_by_label("Key Press").press("ArrowUp")# 键入向上箭头按键
    page.pause()

这段代码中，通过locator.type()输入“大学之道在明明德在亲民在止于至善”的文本，每个字的输入间隔是500ms。另外通过locator.press()键入单个按键内容，具体内容参考代码中的注释。下面是键盘上一些不可打印的特殊按键的名字，供参考：

在这里插入图片描述Playwright支持的鼠标操作，常见的有单击、双击、右击、Hover等。下面设计一个测试网页，当用鼠标双击“DOUBLE_CLICK”按钮，上面文本框显示“[按钮被双击]”。当用鼠标单击“CLICK”按钮，上面文本框中显示“[按钮被单击]”。当用鼠标右击“RIGHT_CLICK”按钮，上面文本框中显示“[按钮被右击]”。当鼠标悬到“鼠标悬浮试验区”上时，下面文本框会显示“mouseOver”。

在这里插入图片描述网页源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playwright键盘操作</title>
  </head>
  <body>

    <span>①键盘操作：</span><br>
    <textarea rows="10" cols="30">
    </textarea>
    <button type="submit">提交</button>
    <br>
    <label> Key Up <input id="r1" type="radio" name="a"> </label><br>
    <label> Key Down <input id="r2" type="radio" name="a"> </label><br>
    <label> Key Press <input id="r3" type="radio" name="a"> </label><br>


  </body>
</html>

Playwright通过locator.type()可以模拟通过键盘一个字一个字输入的效果，其中delay参数控制每个字输入的间隔时间。大部分情况下， 我们会使用locator.fill()填充文本内容，locator.type()用的并不多。

通过locator.press()模拟对键盘上单个按键的操作。

下面代码是通过对上面网页进行的键盘操作。

def test_mouse_keyboard(page):
    page.goto("file:///Users/chunming.liu/PycharmProject/playwright_demo/html/keyboard.html")
    page.locator("textarea").type("大学之道在明明德在亲民在止于至善", delay=500)
    page.locator("textarea").press("$")
    page.locator("textarea").press('A')
    page.locator("textarea").press('0')
    page.locator("textarea").press("F1")
    page.locator("textarea").press("Escape")  #键入Esc键
    page.locator("textarea").press("Equal")  # 键入等号按键
    page.locator("textarea").press("Backspace")   # 键入退格按键
    page.locator("textarea").press("Enter")  # 键入回车键
    page.locator("textarea").press("Enter")  # 键入回车键
    page.get_by_text("Key Up").click()  # 点击Key Up按钮
    page.get_by_label("Key Up").press("ArrowDown") # 键入向下箭头按键
    page.get_by_label("Key Down").press("ArrowDown")# 键入向下箭头按键
    page.get_by_label("Key Press").press("ArrowUp")# 键入向上箭头按键
    page.pause()

这段代码中，通过locator.type()输入“大学之道在明明德在亲民在止于至善”的文本，每个字的输入间隔是500ms。另外通过locator.press()键入单个按键内容，具体内容参考代码中的注释。下面是键盘上一些不可打印的特殊按键的名字，供参考：

在这里插入图片描述Playwright支持的鼠标操作，常见的有单击、双击、右击、Hover等。下面设计一个测试网页，当用鼠标双击“DOUBLE_CLICK”按钮，上面文本框显示“[按钮被双击]”。当用鼠标单击“CLICK”按钮，上面文本框中显示“[按钮被单击]”。当用鼠标右击“RIGHT_CLICK”按钮，上面文本框中显示“[按钮被右击]”。当鼠标悬到“鼠标悬浮试验区”上时，下面文本框会显示“mouseOver”。

在这里插入图片描述网页源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playwright鼠标操作</title>
    <script>
      function rcl(e){
        if (!e) e = window.event;
        document.f1.t2.value += "[按钮被右击]";
      }
      function dcl(e){
        if (!e) e = window.event;
        document.f1.t2.value += "[按钮被双击]";
      }
      function cl(e){
        if (!e) e = window.event;
        document.f1.t2.value += "[按钮被单击]";
      }
      function showMouseOver(e){
        if (!e) e = window.event;
        var el = document.getElementById("result");
        var s = "";
        if (e.ctrlKey) s += "<ctrl>";
        if (e.altKey) s += "<alt>";
        if (e.shiftKey) s += "<shift>";
        if (e.metaKey) s += "<meta>";
        el.value = s + "mouseOver";
      }

    </script>
  </head>
  <body>

    <span>鼠标操作：</span><br>
    <form name="f1">
      <textarea name="t2" style="width:200px;height:100px;"></textarea><br>
      <input type="button" onclick="document.f1.t2.value=''" value="Clear" name="t1"><br>
      <input type="button" value="DOUBLE_CLICK" ondblclick="dcl(event)">
      <input type="button" value="CLICK" onclick="cl(event)">
      <input type="button" value="RIGHT_CLICK" oncontextmenu="rcl(event)">
      <div onmouseover="showMouseOver(event)" style="height:100px;width:250px;border:1px solid gray;">
        <div style=";padding:35px;text-align:center">鼠标悬浮试验区</div>
      </div>
      <input type="text" id="result">
    </form>


  </body>
</html>

下面代码是对这个网页进行的鼠标操作：

def test_mouse(page):
    page.goto("file:///Users/chunming.liu/PycharmProject/playwright_demo/html/form.html")
    page.get_by_role("button", name="DOUBLE_CLICK").dblclick()
    page.get_by_role("button", name="CLICK").click()
    page.get_by_role("button", name="RIGHT_CLICK").click(button="right")
    page.get_by_text("鼠标悬浮试验区").hover()

Playwright通过dblclick()实现鼠标双击，通过click()不带参数实现鼠标单击，带参数button="right"实现鼠标右击。通过hover()实现鼠标悬浮到元素上。

实际应用中，键盘和鼠标组合操作也是很常见的。例如按住Shift键+鼠标点击、按住Alt键+鼠标点击、按住Contrl键+鼠标点击等等。下面设计一个网页，当键盘上按下Ctrl、Shift、Command、option按键，并且点击“鼠标键盘组合试验区”按钮时，将会在上面的文本框中打印出此时的鼠标和键盘事件。

在这里插入图片描述网页源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playwright键盘鼠标组合操作</title>
    <script>
      function show(e){
        if (!e) e = window.event;
        var el = document.getElementById("tb");
        var s = "";
        if (e.ctrlKey) s += "<ctrl>";
        if (e.altKey) s += "<alt>";
        if (e.shiftKey) s += "<shift>";
        if (e.metaKey) s += "<meta>";
        el.value = s + "click";
      }
    </script>
  </head>
  <body>

    <span>鼠标和键盘组合：</span><input type="text" id="tb">
    <div onclick="show(event)" style="height:100px;width:300px;border:1px solid gray;">
      <div style=";padding:35px;text-align:center">鼠标键盘组合试验区</div>
    </div>
  </div>
  </body>
</html>

使用Playwright进行鼠标键盘的组合操作使用的依旧是click()方法，其中的modifiers参数带上点击鼠标时，键盘上的按键。

下面的代码是分别模拟按住Shift键、Alt键和Command键并配合鼠标点击的操作。

def test_example(page):
    page.goto("file:///Users/chunming.liu/PycharmProject/playwright_demo/html/form.html")
    page.get_by_text("鼠标键盘组合试验区").click(modifiers=["Alt"])
    time.sleep(2)
    page.get_by_text("鼠标键盘组合试验区").click(modifiers=["Shift"])
    time.sleep(2)
    page.get_by_text("鼠标键盘组合试验区").click(modifiers=["Meta"])
    page.pause()

执行代码可以看到文本框内容会依次显示：click、click、click。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取 【保证100%免费】
在这里插入图片描述
在这里插入图片描述

【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 5296
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
Playwright 精通系列第六篇：鼠标与键盘操作
最新发布
weixin_44872675的博客
01-18 1526
在自动化测试中，鼠标与键盘操作是高级交互的重要组成部分。Playwright提供了强大的API，支持模拟用户的各种操作，例如以及。相比Selenium，Playwright提供了更高的灵活性、更优雅的API设计和更稳定的行为模拟。本篇文章将深入讲解Playwright中的鼠标与键盘操作，通过丰富的示例代码展示其强大功能，同时对比Selenium的实现，突显Playwright的优势。
【python自动化】Playwright基础教程——Keyboard键盘
aobulaien001的博客
09-26 2965
playwright模拟键盘操作键盘事件提供了用于管理虚拟键盘的API，高级API是，它使用的是原始字符再页面上生成对应的keydownkeypressinput和keyup事件。模拟真实键盘操作进行更精细的控制可以使用和手动触发事件。
Hello Playwright：(7)模拟键盘和鼠标
biyusr的专栏
07-04 2546
尽管在上一节中，我们已经能够通过或来实现输入和点击元素。但是，还有其他场景，我们必须模拟用户使用键盘、鼠标与页面交互。例如在线文档：提供用于管理虚拟键盘的 API，它会在 page 上生成正确的 keydown、keypress 和 keyup 事件。例如，实现下列流程：按住 Shift 键输入字符 a，得到大写字母 A按实际大小写输入字符 Bc按住 Shift 键不放，再按 3 次左箭头， 再释放 Shift 键，达到选中 ABc 的目的输入 Backspace 键，删除选中文本输入文本 MyIO代码如下
使用Playwright进行键盘操作的详细指南
霍格沃兹测试学院的博客
06-12 939
Playwright是一款强大的自动化测试工具，提供对浏览器的高级控制。键盘操作是自动化测试中的常见任务之一。本文将详细介绍如何使用Playwright进行键盘操作，包括基本的键盘事件、组合键操作、文本输入、以及特殊键处理等。使用Playwright进行键盘操作非常灵活和强大。本文介绍了基本的键盘操作、组合键操作、特殊键处理、文本输入的高级操作以及复杂场景的模拟。通过掌握这些技巧，可以更高效地编写自动化测试脚本，提高测试覆盖率和准确性。获取更多软件测试技术资料/面试题解析，请点击！
最强自动化测试框架Playwright（31）-键盘事件
seanyang_的博客
08-17 1278
Keyboard对象提供api管理虚拟的键盘，高级别的接口是keyboard.type()，并且接受keydown，keypress,input，keyup事件。
【python自动化】Playwright基础教程(七)Keyboard键盘
qq_46158060的博客
11-13 1360
可以指定预期的keyboardEvent.key(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)值或单个字符生成的文本。值的超集(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)。需要注意的是，修饰键在这个方法里面不起作用，比如按住Shift再输字母不会输入大写字母。是单个字符，它是区分大小写的，因此值。
【python自动化】Playwright基础教程(八)鼠标操作
qq_46158060的博客
11-13 2060
打开在线画图：https://draw.yunser.com/，根据官网的示列画一个正方形。【python自动化】Playwright基础教程(八)鼠标操作。按下鼠标左键松开时，页面会显示粉红色的左键。playwright模拟鼠标操作，每个。长按鼠标左键时，页面会显示红色的左键。selenium中长按是有单独的方法。对象都有自己的鼠标事件，可以通过。dblclick模拟鼠标双击。未按鼠标时，不会显示其他颜色。click模拟鼠标点击。wheel模拟鼠标滚动。down模拟鼠标按下。move模拟鼠标移动。
【playwright篇】教程(八)键盘事件
qadnkz的专栏
09-29 591
模拟按下 Control + C 键（复制）# 模拟按下 Shift + A 键。在当前光标位置，输入。找到对应元素后，输入。
《最新出炉》系列入门篇-Python+Playwright自动化测试-44-鼠标操作-上篇
北京-宏哥的博客
05-28 1310
前边文章中已经讲解过鼠标的拖拽操作，今天宏哥在这里对其的其他操作进行一个详细地介绍和讲解，然后对其中的一些比较常见的、重要的操作单独拿出来进行详细的介绍和讲解。
【playwright】新一代自动化测试神器playwright+python系列课程22_playwright模拟鼠标操作_悬停_右击_双击
qq_35948955的博客
01-18 880
有些元素，只有你鼠标移动到它那个位置上，他才会展开或者显示一些内容，这时候就要用到hover()操作了。以弹出的右键菜单为例，看一下click(button=“right”)，实现鼠标右击。以双击关闭弹出的流程窗口为例，看一下dblclick()使用。以个人设置这个下拉菜单，来看一下hover的使用。
Playwright行为操作
我们一起进步吧
06-13 627
我们可以看到，筛选出了两个符合条件的elements。
【Python】Playwright常用操作方法
田豆芽的IT技术专栏
05-08 4445
今天田辛老师总结了11种Playwright的常用操作方法，包括获取页面元素、点击按钮和链接、获取标签页、获取元素属性、设置超时、单击元素、模拟鼠标点击和拖放操作等。这些方法可以帮助开发者更加高效地进行自动化测试和爬虫开发。
Python+Playwright自动化测试-鼠标操作
公众号【伤心的辣条】资料领取~
02-18 1064
前边文章中已经讲解过鼠标的拖拽操作，今天小编在这里对其的其他操作进行一个详细地介绍和讲解，然后对其中的一些比较常见的、重要的操作单独拿出来进行详细的介绍和讲解。
最强自动化测试框架Playwright（4）-控件操作
seanyang_的博客
08-12 711
如果某些文件路径是相对的，则相对于当前工作目录解析它们。此方法将发出所有必需的键盘事件，可以在按键之间指定可选，以模拟真实的用户行为。对单选框复选框进行勾选，使用is_checked()方法判断选中状态。可以对元素进行单击，双击、右键点击、组件键单击、悬浮、按照坐标单击。此字符区分大小写，因此 和 将产生不同的结果。可以根据value或者label来选择下拉框，也可以进行多选。在输入文本后，可以对元素发出键盘按键事件，如按下Enetr，适用于input、textarea、其他可编辑内容的元素。
python+playwright 学习-27 鼠标悬停 hover() 和listitem 定位
qq_27371025的博客
03-24 1498
鼠标悬停到某个元素上后出现一些选项，这是很常见的操作了，playwright 操作鼠标悬停非常简单，只需调用hover() 方法。
Playwright快速上手指南
热门推荐
行者AI
02-02 1万+
本文首发于：行者AI Playwright是由微软公司2020年初发布的新一代自动化测试工具，相较于目前最常用的Selenium，它仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作。作为针对 Python 语言纯自动化的工具，在回归测试中可更快的实现自动化。 1. 为什么选择Playwright 1.1 Playwright的优势 （1） Selenium需要通过WebDriver操作浏览器；Playwright通过开发者工具与浏览器交互，安装简洁，不需要安.
Web自动化测试之playwright：Web元素操作
测试开发小记
11-18 8118
定位到元素后就可以对其进行某些操作，比如输入文本，点击，获取属性等，本文来介绍playwright提供的元素操作方法。 目录文本输入模拟键盘输入点击Checkbox、Radio操作select选项上传文件截图获取、判断元素属性及状态 文本输入 文本输入使用 fill方法： page.fill("id=kw", "test") 模拟键盘输入 1、一个字符一个字符的输入，模拟真实的键盘输入 page.type("id=kw", "playwright") page.type("id=kw", "playwr
【playwright】使用playwright实现拖动功能
WEL测试
06-16 7348
【playwright】使用playwright实现拖动功能
掌握Playwright for Python的Web自动化测试技术
它允许开发者编写脚本来模拟用户与网页的交互，比如点击链接、填写表单、导航到不同的页面等，以实现自动化的测试和网页交互操作。 在Python社区中，Playwright通过一个专门的Python库来使用。这个库允许Python...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值