《刚刚问世》系列初窥篇-Java+Playwright自动化测试-18- 操作模态对话框弹窗（详细教程）

原创

北京-宏哥

发布于 2025-01-19 20:04:09

11500

代码可运行

运行总次数：0

代码可运行

1.简介

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

2.弹框分类

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

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

3.dialog 弹窗

Dialog 对象通过 Page.onDialog（handler）事件按页面调度。

使用 class 的示例：Dialog

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      Browser browser = chromium.launch();
      Page page = browser.newPage();
      page.onDialog(dialog -> {
        System.out.println(dialog.message());
        dialog.dismiss();
      });
      page.evaluate("alert('1')");
      browser.close();
    }
  }
}

敲黑板！！！注意：对话框会自动关闭，除非有 Page.onDialog（handler）侦听器。当侦听器存在时，它必须 Dialog.accept（）或 Dialog.dismiss（）对话框 - 否则页面将冻结等待对话框，并且单击等操作将永远不会完成。

3.1dialog方法

3.1.1accept()

用法：

Dialog.accept();
Dialog.accept(promptText);

参数：

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

3.1.2defaultValue()

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

Dialog.defaultValue();

3.1.3dismiss()

当对话框被关闭时返回。

Dialog.dismiss();

3.1.4message()

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

Dialog.message();

3.1.5page()

启动此对话框的页面（如果可用）。

Dialog.page();

3.1.6type()

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

Dialog.type();

3.2dialog 事件监听

Playwright 可以与网页对话框进行交互，例如 alert、confirm、prompt 以及 beforeunload 确认。playwright 框架可以监听dialog事件，不管你alert 什么时候弹出来，监听到事件就自动处理了。

默认情况下，Playwright 会自动关闭对话框，因此您不必处理它们。但是，可以在触发对话的操作之前注册对话处理程序 Dialog.accept（）或 Dialog.dismiss（）它。

page.onDialog(dialog -> dialog.accept());
page.getByRole(AriaRole.BUTTON).click();

Page.onDialog（handler）侦听器必须处理对话。否则，你的操作将停止，无论是 Locator.click（）还是其他内容。这是因为 Web 中的对话框是模态对话框，因此会阻止进一步的页面执行，直到它们被处理。

因此，以下代码段将永远无法解析：

page.onDialog(dialog -> System.out.println(dialog.message()));
page.getByRole(AriaRole.BUTTON).click(); // Will hang here

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

4.模态框的定义

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

4.1警告框

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

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

语法：

alert("文本")

4.2确认框

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

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

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

语法：

confirm("文本")

4.3提示框

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

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

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

语法：

prompt("文本","默认值")

4.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>

浏览器打开页面并触发相应弹窗，如下图所示：

5.牛刀小试

下边宏哥就利用上边准备好的模态框例子进行一下演示。分别演示当监听器存在和不存在时测试场景，来看一下宏哥如何处理的，供大家学习和参考。

5.1监听器存在

监听器存在，简单地就是在代码中出现：Page.onDialog（handler），那么就表示监听器存在，按照上边的理论知识，我们知道：必须处理弹窗才可以进行后续测试，否则就会一致停留在弹出处，不执行后续操作。

5.1.1代码设计

5.1.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-18- 操作模态对话框弹窗 （详细教程）
 *
 * 2025年1月20日
 */
public class Test_ModalDialog {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
          Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
          //创建page
          Page page = context.newPage();
          //3.浏览器本地demo
          page.navigate("file:///E:/Desktop/test/ModalDialogueBox.html");
          //Dialog监听器存在
          page.onDialog(dialog -> {
              System.out.println(dialog.message());
              //Dialog.accept()或 Dialog.dismiss()必须处理 它。
              dialog.accept();
            });
          //定位到要操作的alert警告框并点击
          page.locator("#input_1").click();
          //定位到要操作的confirm警告框并点击
          page.locator("#input_2").click();
          //定位到要操作的prompt警告框并点击
          page.locator("#input_3").click();
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }
}

5.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

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

5.2监听器不存在

监听器不存在，简单地就是在代码中不出现：Page.onDialog（handler），那么就表示监听器不存在，按照上边的理论知识，我们知道：不需要处理弹窗就可以进行后续测试，因为此时playwright会帮你自动处理好，不影响执行后续操作。

5.2.1代码设计

5.2.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-18- 操作模态对话框弹窗 （详细教程）
 *
 * 2025年1月20日
 */
public class Test_ModalDialog {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
          Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
          //创建page
          Page page = context.newPage();
          //3.浏览器本地demo
          page.navigate("file:///E:/Desktop/test/ModalDialogueBox.html");
          //Dialog监听器不存在--注销掉即可！
//          page.onDialog(dialog -> {
//              System.out.println(dialog.message());
//              //Dialog.accept()或 Dialog.dismiss()必须处理 它。
//              dialog.accept();
//            });
          //定位到要操作的alert警告框并点击
          page.locator("#input_1").click();
          //定位到要操作的confirm警告框并点击
          page.locator("#input_2").click();
          //定位到要操作的prompt警告框并点击
          page.locator("#input_3").click();
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }
}

5.2.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

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

6.小结

Page.onDialog（handler）监听器存在必须处理该对话框。否则您的操作将停止，无论是 locator.click（）还是其他内容。这是因为Web中的对话框是模态，因此在处理它们之前会阻止进一步的页面执行。

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

          page.onDialog(dialog -> {
              System.out.println(dialog.message());
              //Dialog.accept()或 Dialog.dismiss()必须处理 它。
//              dialog.accept();
            });

运行代码后电脑端的浏览器的动作（可以看到playwright没有自动处理弹窗，而是弹出后卡主不动了，当然此时你若是手动点击确定或者取消，就会继续执行测试，有兴趣的可以自己试一下）。如下图所示：

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

教程

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度