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

最新,出炉,系列,python,playwright,自动化,测试,处理,模态,对话框,弹窗 · 浏览次数 : 229

小编点评

**HTML代码** ```html <div style=" text-align:center;"> <div style="height: 100px;margin-top: 200px;"> <button class="button1" ><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">&北京-宏哥</a></br> 测试练习模态框的处理:
<br> 1.警告框 <input class="button" type="button" id="input_1" value="点击弹出警告框"><br><br> 2.确认框 <input class="button" type="button" id="input_2" value="点击弹出确认框"><br><br> 3.提示框 <input class="button" type="button" id="input_3" value="点击弹出提示框"><br><br> &;/div> &;/div</body></html> ``` **运行结果** 浏览器打开页面后,监听器会监听“dialog”事件,并打印出“警告框”、“确认框”、“提示框”的提示信息。当用户点击确定按钮时,事件会触发页面执行其他操作。 **代码注释** ```html <div style=" text-align:center;"> ... <button class="button1" ><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></br> ... ``` * `id="myAnchor"` 是一个内部链接的 ID,用于指向网页中的目标链接。 * `href="https://www.cnblogs.com/du-hong/"` 是一个指向网页的链接。 * `<a>` 是一个 HTML 标签,用于创建一个链接。 * `<a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a>` 是一个包含 ID 的超链接。 **其他说明** * `page.on("dialog", lambda dialog: dialog.accept())` 监听 “dialog” 事件,并调用 `dialog.accept()` 方法来处理事件。 * `page.on("dialog", lambda dialog: print(dialog.message))` 监听 “dialog” 事件,并打印出事件的提示信息。

正文

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()对话框 - 否则页面将冻结等待对话框,并且单击等操作将永远不会完成。

#弹窗中确认
page.on("dialog", lambda dialog: dialog.accept())
page.locator("button").click()
#弹窗中取消
page.on("dialog", lambda dialog: dialog.dismiss())
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页面参考代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模态框</title>
</head>
<script type="text/javascript">
window.onload = function(){
    document.getElementById("input_1").onclick = function(){
        alert("您关注了‘北京宏哥’微信公众号!");
    };
    document.getElementById("input_2").onclick = function(){
        confirm("确定关注微信公众号:北京宏哥?")
    };
    document.getElementById("input_3").onclick = function(){
        prompt("请输入微信公众号:","北京宏哥");
    };
}

</script>
<style>
.button1 {
    background-color: #f44336; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 28px;
    margin-bottom: 100px;
    text-decoration:none;
    color: white;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#myAnchor
{
  text-decoration:none;
  color: white;
}
</style>
<body>
    <div style=" text-align:center;">
        <div style="height: 100px;margin-top: 200px;">
            <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
            测试练习模态框的处理:<br><br>
            1.警告框
            <input class="button" type="button" id="input_1" value="点击弹出警告框"><br><br>
            2.确认框
            <input class="button" type="button" id="input_2" value="点击弹出确认框"><br><br>
            3.提示框
            <input class="button" type="button" id="input_3" value="点击弹出提示框"><br><br>
        </div>
    </div
</body>
</html>

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

4.牛刀小试

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

监听器存在

4.1代码设计

4.2参考代码

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-15-处理模态对话框弹窗
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.goto("C:/Users/DELL/Desktop/test/ModalDialogueBox.html")
    page.on("dialog", lambda dialog: dialog.accept())
    page.on("dialog", lambda dialog: print(dialog.message))
    # 点击弹出警告框
    page.locator("#input_1").click()
    # 点击弹出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_2").click()
    # 点击弹出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_3").click()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

监听器不存在

4.4代码设计

4.5参考代码

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-15-处理模态对话框弹窗
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.goto("C:/Users/DELL/Desktop/test/ModalDialogueBox.html")
    # page.on("dialog", lambda dialog: dialog.accept())
    # page.on("dialog", lambda dialog: print(dialog.message))
    # 点击弹出警告框
    page.locator("#input_1").click()
    # 点击弹出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_2").click()
    # 点击弹出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_3").click()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.6运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

5.项目实战

宏哥继续用java+selenium中的一个alert例子(http://news.cyol.com/node_60799.htm),只有点击确定这个按钮,alert框才会消失。

5.1参考代码

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-15-处理模态对话框弹窗
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.on("dialog", lambda dialog: dialog.accept())
    page.on("dialog", lambda dialog: print(dialog.message))
    page.goto("http://news.cyol.com/node_60799.htm")
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

5.2运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

6.小结

page.on(“dialog”)监听器必须处理该对话框。否则您的操作将停止,无论是 locator.click() 还是其他内容。这是因为Web中的对话框是模态,因此在处理它们之前会阻止进一步的页面执行。

例如下边宏哥演示的是:只打印message,而没有处理就会一直卡在那个弹出框不继续往下操作了。宏哥就是将处理代码注释,打印代码留下。不过这种情况你手动点击“确定”,代码也是可以向下执行的。

# page.on("dialog", lambda dialog: dialog.accept())
page.on("dialog", lambda dialog: print(dialog.message))

 运行代码后电脑端的浏览器的动作(可以看到卡主不动了,也就是代码不向下执行了)。如下图所示:

 好了,今天时间也不早了,宏哥就讲解和分享到这里,感谢您耐心的阅读,希望对您有所帮助。

与《最新出炉》系列初窥篇-Python+Playwright自动化测试-16-处理模态对话框弹窗相似的内容:

《最新出炉》系列初窥篇-Python+Playwright自动化测试-1-环境准备与搭建

1.简介 有很多人私信留言宏哥问能不能介绍一下Playwright这款自动化神器的相关知识,现在网上的资料太少了。其实在各大博客和公众号也看到过其相关的介绍和讲解。要不就是不全面、不系统,要不就是系统全面但是人家是收费的。当然了宏哥接下来也可能介绍的不全面或者不系统,能力有限望大家理解。 2.Pla

《最新出炉》系列初窥篇-Python+Playwright自动化测试-2-playwright的API及其他知识

1.简介 上一篇宏哥已经将Python+Playwright的环境搭建好了,而且也简单的演示了一下三款浏览器的启动和关闭,是不是很简单啊。今天主要是把一篇的中的代码进行一次详细的注释,然后说一下playwright的API和其他相关知识点。那么首先将上一篇中的代码进行一下详细的解释。 2.代码解释

《最新出炉》系列初窥篇-Python+Playwright自动化测试-3-离线搭建playwright环境

1.简介 有些小伙伴或者童鞋们私信留言说自己是在公司局域网办公,或者公司为了安全对网络管控比较严格(尤其是一些大的国企、央企),总之就是一句话无法连到外网去在线下载,宏哥刚看到留言时觉得这问题还留言问啊,你找个有网的电脑下载好安装包然后安装就可以用了。(第一种情况及解决办法:带要搭建环境的电脑到有网

《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright等待浅析

1.简介 在介绍selenium的时候,宏哥也介绍过等待,是因为在某些元素出现后,才可以进行操作。有时候我们自己忘记添加等待时间后,查了半天代码确定就是没有问题,奇怪的就是获取不到元素。然后搞了好久,或者经过别人的提示才恍然大悟没有添加等待时间。而playwright为了避免我们犯这么low的错误,

《最新出炉》系列初窥篇-Python+Playwright自动化测试-5-元素定位大法-上篇

1.简介 说到元素定位,小伙伴或者童鞋们肯定会首先想到 selenium 的八大元素定位大法。同理Playwright也有自己的元素定位的方法。今天就给小伙伴或者童鞋们讲解和分享一下Playwright的元素定位方法。 宏哥对UI自动化的理解:定位元素 >操作元素 >断言。 2.定位器 定位器(Lo

《最新出炉》系列初窥篇-Python+Playwright自动化测试-6-元素定位大法-下篇

1.简介 上一篇主要是讲解我们日常工作中在使用Playwright进行元素定位的一些比较常用的定位方法的理论基础知识以及在什么情况下推荐使用。今天这一篇讲解和分享一下,在日常中很少用到或者很少见的定位,但是遇到了我们也要会,俗话说:手里有粮心里不慌。 2.阴影定位-Shadow DOM 在做web自

《最新出炉》系列初窥篇-Python+Playwright自动化测试-11-playwright操作iframe-上篇

1.简介 原估计宏哥这里就不对iframe这个知识点做介绍和讲解了,因为前边的窗口切换就为这种网页处理提供了思路,另一个原因就是虽然iframe很强大,但是现在很少有网站用它了。但是还是有小伙伴或者童鞋们私下问这个问题,那么宏哥就单独写一篇关于iframe网页处理的文章。iframe 是web自动化

《最新出炉》系列初窥篇-Python+Playwright自动化测试-12-playwright操作iframe-中篇

1.简介 按照计划今天就要用实际的例子进行iframe自动化测试。经过宏哥长时间的查找,终于找到了一个含有iframe的网页(QQ邮箱和163邮箱),别的邮箱宏哥就没有细看了。所以今天这一篇的主要内容就是用这两个网页的iframe结合上一篇的理论知识,宏哥给小伙伴或者童鞋们演示一下。 2.QQ邮箱

《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe-下篇

1.简介 通过前边两篇的学习,想必大家已经对iframe有了一定的认识和了解,今天这一篇主要是对iframe做一个总结,主要从iframe的操作(输入框、点击等等)和定位两个方面进行总结。 2.iframe是什么? iframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简

《最新出炉》系列初窥篇-Python+Playwright自动化测试-14-playwright操作iframe-番外篇

1.简介 通过前边三篇的学习,想必大家已经对iframe有了一定的认识和了解,今天这一篇主要是对iframe的一些特殊情况的介绍和讲解,主要从iframe的定位、监听事件和执行js脚本三个方面进行展开介绍。 2.iframe定位 2.1动态id属性如何定位 有时候,我们可能看到的iframe 的id