Playwright中监听DOM节点增删需用page.evaluate()注入MutationObserver并配合page.expose_function()将变化传回Python，不能依赖page.on("domcontentloaded")或page.wait_for_function()。
Playwright里怎么监听DOM节点增删？
直接用 page.on("domcontentloaded") 不行——它只触发一次，没法捕获后续动态变化。真正能用的是 page.evaluate() 配合 MutationObserver，把浏览器端的原生观察逻辑跑起来。
关键点在于：Playwright本身不提供“监听DOM变化”的高层API，必须手动注入并维持一个 MutationObserver 实例，再通过 page.expose_function() 把回调暴露给前端，才能把变化传回Python端。
- 不要在每次操作后都重新
page.evaluate()一遍 observer——它得长期驻留，否则监听会中断 - 推荐在
page.goto()后立刻注入 observer，用page.wait_for_timeout(100)确保脚本已执行 - 监听
childList和subtree: true才能捕获深层嵌套节点的增删
如何把MutationObserver的变化传回Python？
靠 page.expose_function("onMutation", callback) 注册一个全局函数，再让 MutationObserver 的回调里调用它。Playwright会自动把 JS 传来的参数序列化为 Python 可用对象（如 dict、list）。
注意：暴露的函数名必须和 JS 里调用的名字完全一致，且不能含点号或中划线；传参尽量扁平，避免传 DOM 节点对象（会报 TypeError: Converting circular structure to JSON）。
让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac，无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启：辅助功能 + 屏幕录制权限
立即学习“Python免费学习笔记（深入）”；
- 只传
mutation.type、mutation.addedNodes的nodeName和textContent片段，别传mutation.target - 如果要过滤特定区域，可在 JS 注入时指定
document.querySelector("#target-container")作为 observer 的 root - Python 回调函数里加
print()或写日志，但别做耗时操作——会阻塞浏览器事件循环
为什么用page.wait_for_function()等不到DOM变化？
page.wait_for_function() 是轮询式检查，适合等某个表达式变为真（比如 document.querySelectorAll(".loading").length === 0），但它不监听变化事件，也不返回 mutation 记录。误用会导致超时或漏判。
典型错误场景：想等某个按钮出现后点击，却写成 page.wait_for_function('!!document.querySelector("button#submit")') ——这只能确认存在，无法知道它是刚插入的还是页面初始就有的。
- 需要“感知新增”时，必须走
MutationObserver+expose_function这条路 -
wait_for_function更适合做“守株待兔”式的状态断言，不是变化监听器 - 如果只是等元素出现，
page.wait_for_selector("button#submit", state="attached")更轻量、更可靠
实际监控中容易忽略的兼容性问题
Chrome 和 Firefox 对 MutationObserver 的行为基本一致，但 WebKit（Safari/Playwright 的 webkit channel）在某些低版本中对 characterData 监听支持不全；另外，单页应用（SPA）路由切换时，旧 observer 可能被销毁，需在 page.on("framenavigated") 后重建。
- 生产环境务必在所有三个浏览器通道（chromium/firefox/webkit）上测试 observer 是否持续生效
- 避免监听整个
document.body，优先缩小到具体容器，否则高频率更新（如实时聊天）会导致 Python 端消息洪峰 - 如果页面用了 Shadow DOM，普通 observer 看不到内部变化，得额外用
{shadowRoot: true}选项，并确保目标元素已 attach
