当前位置:首页>python>Python自动化测试必踩坑!Playwright处理Alert/Confirm/Prompt弹窗的终极方案(保姆级教程)【05】

Python自动化测试必踩坑!Playwright处理Alert/Confirm/Prompt弹窗的终极方案(保姆级教程)【05】

  • 2026-10-11 08:35:23
Python自动化测试必踩坑!Playwright处理Alert/Confirm/Prompt弹窗的终极方案(保姆级教程)【05】
Python自动化测试:Playwright从入门到精通系列

我写网页自动化脚本的时候,经常遇到各种弹窗:点了按钮弹出 alert 提示、删东西弹出确认框、有些还带输入框要填内容。

不管这些弹窗直接跑脚本,后面的操作会全部失效,因为焦点被弹窗占住了。

这篇文章我把Playwright里处理弹窗的方法说清楚。

配套文件:

  • 测试页面:05/demo_page_popup.html
  • 完整脚本:05/Playwrigh_05.py

01、Alert 提示框

Alert 弹窗只有一个提示信息和确定按钮,是最简单的一种。

原理:page.on("dialog")注册监听器,弹窗出现时自动执行回调函数。dialog.accept()点确定。

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 一、Alert 提示框# ========================================defhandle_alert(dialog):        print(f" [Alert] 弹窗内容: {dialog.message}")        dialog.accept() # 点击"确定"# 注册监听器    page.on("dialog", handle_alert)# 触发 alert(点击页面上的按钮)    page.get_by_test_id("btn-alert").click()    page.wait_for_timeout(500)# 移除监听器(避免影响后面的操作)    page.remove_listener("dialog", handle_alert)    print(" [OK] Alert 已处理完毕")    browser.close()

关键点:

  • page.on("dialog", 函数)
     — 注册监听器到当前 page,所有弹窗都会触发
  • dialog.accept()
     — 点确定/接受
  • dialog.dismiss()
     — 点取消/拒绝
  • page.remove_listener("dialog", 函数)
     — 移除监听器,切换不同处理逻辑时必须调用
  • 按钮 testid:btn-alert

二、Confirm 确认框

Confirm 框有确定和取消两个按钮,需要分别处理两种情况。

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 二、Confirm 确认框# ========================================# 2.1 点击"确定"分支defhandle_confirm_accept(dialog):        print(f" [Confirm] 弹窗内容: {dialog.message}")        dialog.accept() # 点击确定    page.on("dialog", handle_confirm_accept)    page.get_by_test_id("btn-confirm-accept").click()    page.wait_for_timeout(500)    page.remove_listener("dialog", handle_confirm_accept)    print(" [OK] Confirm → 用户点了「确定」")# 2.2 点击"取消"分支defhandle_confirm_dismiss(dialog):        print(f" [Confirm] 弹窗内容: {dialog.message}")        dialog.dismiss() # 点击取消    page.on("dialog", handle_confirm_dismiss)    page.get_by_test_id("btn-confirm-dismiss").click()    page.wait_for_timeout(500)    page.remove_listener("dialog", handle_confirm_dismiss)    print(" [OK] Confirm → 用户点了「取消」")    browser.close()

关键点:

  • 同一个监听器同时监听 confirm 弹窗,通过 dialog.accept() 和 dialog.dismiss() 控制结果
  • 切换处理逻辑前必须 remove_listener,否则旧的监听器还在运行
  • 按钮 testid:btn-confirm-accept(点确定)、btn-confirm-dismiss(点取消)

三、Prompt 输入框

Prompt 带一个输入框,需要填入内容再点确定。dialog.accept("内容")填入内容并确定。

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 三、Prompt 输入框# ========================================defhandle_prompt(dialog):        print(f" [Prompt] 提示文字: {dialog.message}")        dialog.accept("张三") # 填入内容并点击确定        print(" [Prompt] 已填入内容: 张三")    page.on("dialog", handle_prompt)    page.get_by_test_id("btn-prompt").click()    page.wait_for_timeout(500)    page.remove_listener("dialog", handle_prompt)    print(" [OK] Prompt 已处理完毕")    browser.close()
  • dialog.accept("内容")
     是 Prompt 专属方法,填入文本并确定
  • dialog.dismiss()
     取消 Prompt(不填内容)
  • 按钮 testid:btn-prompt

四、多弹窗连续监听

有些操作会连续触发多个弹窗,用一个监听器统一处理,根据dialog.type判断类型。

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 四、多弹窗连续监听# ========================================defhandle_any_dialog(dialog):        dialog_type = dialog.type # 弹窗类型:alert / confirm / prompt        message = dialog.message # 弹窗文本内容        print(f" [{dialog_type.upper()}] {message}")if dialog_type == "alert":            dialog.accept()elif dialog_type == "confirm":            dialog.accept()elif dialog_type == "prompt":            dialog.accept("测试用户") # Prompt 填入默认值    page.on("dialog", handle_any_dialog)# 触发连续 3 个弹窗(Alert → Confirm → Prompt)    page.get_by_test_id("btn-multi-dialog").click()    page.wait_for_timeout(500)    page.remove_listener("dialog", handle_any_dialog)    print(" [OK] 连续 3 个弹窗全部处理完毕")    browser.close()

关键点:

  • dialog.type
     区分弹窗类型:"alert""confirm""prompt"
  • dialog.message
     读取弹窗显示的文本内容
  • 一个监听器处理多种弹窗,根据type 走不同的分支
  • 按钮 testid:btn-multi-dialog

五、自定义模态框

自定义弹窗不是浏览器原生弹窗,不会触发dialog事件。处理方式和普通元素一样:用wait_for_selector()等出现,填表单,点按钮,等消失。

页面上有三种自定义模态框:登录弹窗、VIP 提示、信息弹窗。

5.1 登录弹窗

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 五、自定义模态框 - 登录弹窗# ========================================    page.get_by_test_id("btn-open-login").click() # 打开登录弹窗    page.wait_for_selector("[data-testid='modal-login']", state="visible") # 等弹窗出现    print(" [OK] 登录弹窗已打开")# 填写用户名和密码    page.get_by_test_id("login-username-input").fill("admin")    page.get_by_test_id("login-password-input").fill("Admin@123")    print(" 用户名已填写: admin")    print(" 密码已填写: Admin@123")# 点击登录    page.get_by_test_id("login-submit-btn").click()    page.wait_for_selector("[data-testid='modal-login']", state="hidden") # 等弹窗消失    print(" [OK] 登录成功,弹窗已关闭")    browser.close()

5.2 VIP 提示弹窗

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 五、自定义模态框 - VIP 提示弹窗# ========================================    page.get_by_test_id("btn-open-vip").click()    page.wait_for_selector("[data-testid='modal-vip']", state="visible")    print(" [OK] VIP 提示弹窗已打开")# 点击「以后再说」(不升级)    page.get_by_test_id("vip-later-btn").click()    page.wait_for_selector("[data-testid='modal-vip']", state="hidden")    print(" [OK] 用户点击了「以后再说」,弹窗已关闭")    browser.close()

5.3 信息提示弹窗

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 五、自定义模态框 - 信息提示弹窗# ========================================    page.get_by_test_id("btn-open-info").click()    page.wait_for_selector("[data-testid='modal-info']", state="visible")    print(" [OK] 信息提示弹窗已打开")# 读取弹窗内容    case_id = page.get_by_test_id("info-case-id").inner_text()    print(f" 用例 ID: {case_id}")# 点击「我知道了」关闭    page.get_by_test_id("info-ok-btn").click()    page.wait_for_selector("[data-testid='modal-info']", state="hidden")    print(" [OK] 弹窗已关闭")    browser.close()

自定义模态框通用模式:

# 打开 → 等待出现 → 操作 → 等待消失page.get_by_test_id("btn-open-xxx").click()page.wait_for_selector("[data-testid='modal-xxx']", state="visible")# 填表单、点按钮...page.wait_for_selector("[data-testid='modal-xxx']", state="hidden")

六、完整实战:文章删除确认流程

综合实战:列表中有文章,点击删除按钮弹出 confirm 框,分别测试「确定」和「取消」两种情况,最后恢复全部。

from playwright.sync_api import sync_playwrightimport sysimport ioif sys.stdout.encoding != 'utf-8':    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')DEMO_HTML = "E:/PythonProject/Playwrigh/05/demo_page_popup.html"with sync_playwright() as p:    browser = p.chromium.launch(headless=False)    page = browser.new_page(viewport={"width": 1280, "height": 900})    page.goto(f"file:///{DEMO_HTML}")# ========================================# 六、完整实战:文章删除确认流程# ========================================defconfirm_accept(dialog):        dialog.accept() # 点确定defconfirm_dismiss(dialog):        dialog.dismiss() # 点取消# ---- 第一次删除:点确定 ----    page.on("dialog", confirm_accept)    count_before = page.locator("[data-testid='article-list'] li").count()    print(f" 文章总数: {count_before}")    page.get_by_test_id("btn-delete-1").click()    page.wait_for_timeout(500)    is_deleted_1 = "deleted"in (page.get_by_test_id("article-1").get_attribute("class") or"")    print(f" [OK] 删除文章#1 → 已标记为删除: {is_deleted_1}")# ---- 第二次删除:继续点确定 ----    page.get_by_test_id("btn-delete-2").click()    page.wait_for_timeout(500)    is_deleted_2 = "deleted"in (page.get_by_test_id("article-2").get_attribute("class") or"")    print(f" [OK] 删除文章#2 → 已标记为删除: {is_deleted_2}")# ---- 第三次删除:这次点取消 ----    page.remove_listener("dialog", confirm_accept) # 先移除 accept 监听器    page.on("dialog", confirm_dismiss) # 切换为 dismiss 监听器    page.get_by_test_id("btn-delete-3").click()    page.wait_for_timeout(500)    is_deleted_3 = "deleted"in (page.get_by_test_id("article-3").get_attribute("class") or"")    print(f" [OK] 删除文章#3(用户取消)→ 已标记为删除: {is_deleted_3}(应为 False)")# ---- 恢复全部文章 ----    page.remove_listener("dialog", confirm_dismiss)    page.get_by_test_id("btn-restore-all").click()    page.wait_for_timeout(300)    is_deleted_1_after = "deleted"in (page.get_by_test_id("article-1").get_attribute("class") or"")    is_deleted_3_after = "deleted"in (page.get_by_test_id("article-3").get_attribute("class") or"")    print(f" [OK] 全部恢复后 → 文章#1 已恢复: {not is_deleted_1_after},"f"文章#3 保持未删除: {not is_deleted_3_after}")    browser.close()

关键点:

  • 删除成功时,文章 <li> 会加上 class="deleted"(视觉上划线+变灰)
  • 切换监听器必须 remove_listener → 再 page.on 新的,否则两个监听器同时生效
  • page.locator("[data-testid='article-list'] li").count()
     统计列表项数量
  • 按钮 testid:btn-delete-1/2/3、btn-restore-all

知识点总结

弹窗 vs 自定义模态框:


相关文件

  • 测试页面:
    05/demo_page_popup.html
  • 完整脚本:
    05/Playwrigh_05.py

下节预告:等待机制详解—Playwright 的自动等待、wait_for_load_state、wait_for_selector、wait_for_function,以及如何写出稳定的等待逻辑。

源码获取:公众号回复「Playwright05」即可


文章有用?关注、转发,点个“在看”不迷路~

有问题找小居,小居看到马上回!

最新文章

随机文章