如何编写自动化脚本打开模态框并自动点击模态框内的.success元素

触发按钮点击后模态框属于动态渲染的DOM元素，同步执行查询会因为元素还没插入到DOM树中匹配不到，以下是两种可直接使用的实现方案：

方案1：MutationObserver 监听（推荐，性能更优无延迟） #

// 先触发原按钮点击
document.querySelector("#profile > article.player-stats.protected > footer > .button:nth-child(13)").click()

// 监听DOM变化，匹配模态框中的.success元素
const observer = new MutationObserver((mutations) => {
  const targetBtn = document.querySelector('.success')
  // 确保元素存在且可见时再点击
  if (targetBtn && targetBtn.offsetParent !== null) {
    targetBtn.click()
    // 触发点击后停止监听避免重复执行
    observer.disconnect()
  }
})

// 监听整个document的子节点变化，可根据模态框实际挂载的父节点缩小监听范围优化性能
observer.observe(document.body, {
  childList: true,
  subtree: true
})

方案2：定时轮询检测（写法简单，适合临时脚本使用） #

document.querySelector("#profile > article.player-stats.protected > footer > .button:nth-child(13)").click()

// 每50ms检测一次目标元素是否存在
const checkInterval = setInterval(() => {
  const targetBtn = document.querySelector('.success')
  if (targetBtn && targetBtn.offsetParent !== null) {
    targetBtn.click()
    clearInterval(checkInterval)
  }
}, 50)

// 超时兜底：3秒后还没找到就清除定时器避免内存占用
setTimeout(() => clearInterval(checkInterval), 3000)

补充说明 #

• 如果页面内存在多个匹配.success的元素，可将querySelector替换为querySelectorAll遍历点击符合条件的元素
• 若模态框挂载在Shadow DOM内部，需要先获取对应Shadow Root再执行选择器查询

内容的提问来源于stack exchange，提问作者Christopher Young