devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《最新出炉》系列初窥篇-Python+Playwright自动化测试-16-处理模态对话框弹窗_playwright 弹窗

作者：小桥流水78 | 2024-07-30 01:44:48

赞

踩

playwright 弹窗

1.简介

我们在日常工作中，会经常遇到弹出警告框的问题，弹框无法绕过，必须处理才可以执行后续的测试，所以弹框处理也是我们必须掌握的一个知识。宏哥在java+selenium系列文章中介绍过这部分内容。那么，playwright对于弹框的处理是怎样的？是否比selenium更加简单呢？下面我们就来介绍一下playwright对于弹框的处理。

2.弹框分类

弹框通常分为3种，分别为alert，confirm，promot。

  • alert弹框：只有信息和确定按键
  • confirm弹框：在alert弹窗基础上增加了取消按钮
  • prompt弹框：在confirm的基础上增加了可输入文本内容的功能

3.dialog 弹窗

3.1dialog属性和方法

accept()当对话框被接收时返回。

dialog.accept()
dialog.accept(**kwargs)

参数 prompt_text（可选), 要在提示中输入的文本。如果对话框 type 没有提示，则不会产生任何影响.

default_value, 如果对话框是提示的，则返回默认提示值。否则，返回空字符串。

dialog.default_value

dismiss 关闭对话框

dialog.dismiss()

message 获取对话框中显示的消息

dialog.message

type返回对话框的类型，可以是alert, beforeunload, confirm或 prompt其中一个

dialog.type

3.2dialog 事件监听

playwright 框架可以监听dialog事件，不管你alert 什么时候弹出来，监听到事件就自动处理了。

当出现 JavaScript 对话框时发出，例如alert、prompt。监听器必须dialog.accept()或dialog.dismiss()对话框 - 否则页面将冻结等待对话框，并且单击等操作将永远不会完成。

  1. #弹窗中确认
  2. page.on("dialog", lambda dialog: dialog.accept())
  3. page.locator("button").click()
  4. #弹窗中取消
  5. page.on("dialog", lambda dialog: dialog.dismiss())
  6. page.locator("button").click()

注:当没有page.on("dialog")侦听器存在时，所有对话框都会自动关闭。

语法如下：

page.on("dialog", handler)

3.模态框的定义

　　模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

3.1警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("文本")
3.2确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("文本")
3.3提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")
3.4测试页面准备

ModalDialogueBox.html页面参考代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模态框</title>
  6. </head>
  7. <script type="text/javascript">
  8. window.onload = function(){
  9.     document.getElementById("input_1").onclick = function(){
  10.         alert("您关注了‘北京宏哥’微信公众号！");
  11.     };
  12.     document.getElementById("input_2").onclick = function(){
  13.         confirm("确定关注微信公众号：北京宏哥？")
  14.     };
  15.     document.getElementById("input_3").onclick = function(){
  16.         prompt("请输入微信公众号：","北京宏哥");
  17.     };
  18. }
  19.  
  20. </script>
  21. <style>
  22. .button1 {
  23.     background-color: #f44336; 
  24.     border: none;
  25.     color: white;
  26.     padding: 15px 32px;
  27.     text-align: center;
  28.     text-decoration: none;
  29.     display: inline-block;
  30.     font-size: 28px;
  31.     margin-bottom: 100px;
  32.     text-decoration:none;
  33.     color: white;
  34. }
  35. .button {
  36.     background-color: #4CAF50;
  37.     border: none;
  38.     color: white;
  39.     padding: 15px 32px;
  40.     text-align: center;
  41.     text-decoration: none;
  42.     display: inline-block;
  43.     font-size: 16px;
  44.     margin: 4px 2px;
  45.     cursor: pointer;
  46. }
  47. #myAnchor
  48. {
  49.   text-decoration:none;
  50.   color: white;
  51. }
  52. </style>
  53. <body>
  54.     <div style=" text-align:center;">
  55.         <div style="height: 100px;margin-top: 200px;">
  56.             <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
  57.             测试练习模态框的处理：<br><br>
  58.             1.警告框
  59.             <input class="button" type="button" id="input_1" value="点击弹出警告框"><br><br>
  60.             2.确认框
  61.             <input class="button" type="button" id="input_2" value="点击弹出确认框"><br><br>
  62.             3.提示框
  63.             <input class="button" type="button" id="input_3" value="点击弹出提示框"><br><br>
  64.         </div>
  65.     </div
  66. </body>
  67. </html>

浏览器打开页面如下图所示：

4.牛刀小试

下边宏哥就利用上边准备好的模态框例子进行一下演示。首先演示当监听器存在时，我们如何处理。

监听器存在

4.1代码设计

4.2参考代码
  1. # coding=utf-8声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。