
我写网页自动化脚本的时候,经常遇到各种弹窗:点了按钮弹出 alert 提示、删东西弹出确认框、有些还带输入框要填内容。
不管这些弹窗直接跑脚本,后面的操作会全部失效,因为焦点被弹窗占住了。
这篇文章我把Playwright里处理弹窗的方法说清楚。
配套文件:
测试页面: 05/demo_page_popup.html完整脚本:05/Playwrigh_05.py
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", 函数)dialog.accept()dialog.dismiss()page.remove_listener("dialog", 函数)btn-alertConfirm 框有确定和取消两个按钮,需要分别处理两种情况。
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()
关键点:
dialog.accept() 和 dialog.dismiss() 控制结果remove_listener,否则旧的监听器还在运行btn-confirm-accept(点确定)、btn-confirm-dismiss(点取消)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("内容")dialog.dismiss()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.messagebtn-multi-dialog自定义弹窗不是浏览器原生弹窗,不会触发dialog事件。处理方式和普通元素一样:用wait_for_selector()等出现,填表单,点按钮,等消失。
页面上有三种自定义模态框:登录弹窗、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}")# ========================================# 五、自定义模态框 - 登录弹窗# ======================================== 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()
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()
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()btn-delete-1/2/3、btn-restore-all
弹窗 vs 自定义模态框:

05/demo_page_popup.html05/Playwrigh_05.py下节预告:等待机制详解—Playwright 的自动等待、wait_for_load_state、wait_for_selector、wait_for_function,以及如何写出稳定的等待逻辑。
源码获取:公众号回复「Playwright05」即可
文章有用?关注、转发,点个“在看”不迷路~
有问题找小居,小居看到马上回!