使用Chrome DevTools点击Follow按钮的JS脚本失效该如何调整

• 原有脚本的CSS选择器存在语法错误：匹配同时携带多个类名的同一个DOM元素时，类名之间不能添加空格，空格代表「后代选择器」，会匹配.components-button元素内部的components-button-size-mini标签，完全不符合实际元素结构。之前能运行是站点旧的DOM结构巧合适配了错误选择器，站点结构更新后就会失效。

调整后可用脚本 #

最简修复版（仅修正原有选择器语法） #

document.querySelectorAll('.components-button.components-button-size-mini.components-button-type-orange.desktop.components-button-inline').forEach(btn => btn.click());

更稳定的兼容版（不受类名变动影响，自动跳过已关注按钮） #

// 仅匹配文本为Follow的按钮点击，适配性更强
Array.from(document.querySelectorAll('button')).forEach(btn => {
  if (btn.textContent.trim() === 'Follow') btn.click()
})

防限流版（避免批量点击触发站点反爬限制） #

// 每100ms点击一个，降低操作频率
const followBtns = Array.from(document.querySelectorAll('button')).filter(btn => btn.textContent.trim() === 'Follow')
let idx = 0
const clickTimer = setInterval(() => {
  if (idx >= followBtns.length) {
    clearInterval(clickTimer)
    console.log('所有Follow按钮点击完成')
    return
  }
  followBtns[idx].click()
  idx++
}, 100)

补充排查方案 #

如果上述脚本仍然不生效，可以在Chrome DevTools的「元素」面板右键点击目标Follow按钮，依次选择「复制」-「复制选择器」，将得到的选择器替换querySelectorAll内的参数即可适配最新的页面结构。

内容的提问来源于stack exchange，提问作者Digital Farmer