为何RSelenium执行点击TikTok表格的JS脚本无法生效？

问题描述 #

我需要抓取TikTok创意中心热门音乐页面的表格信息，该表格默认仅显示3条条目。在浏览器控制台执行以下JS脚本可以正常展开表格：

document.querySelector(".view-more-btn--VGYaj").click();

但在RSelenium中执行等效操作却无法生效，即使提前最大化窗口、滚动到页面底部（这两个操作本身有效），点击命令仍然没有反应。RSelenium代码如下：

remDr <- RSelenium::remoteDriver(port = 4445L)
remDr$open()
remDr$navigate(url)

js_script <- 'document.querySelector(".view-more-btn--VGYaj").click();'

remDr$executeScript(js_script, args = list("dummy"))

原因分析 #

• 动态元素类名：TikTok页面的元素类名可能是动态生成的，控制台中可用的类名在RSelenium运行时可能已发生变化，或者存在多个匹配元素导致querySelector选中的不是目标按钮。
• 元素未完全加载：页面导航完成后，按钮元素可能还未完全渲染到DOM中，此时执行脚本会找不到目标元素或无法触发事件。
• 事件绑定机制：TikTok这类现代前端应用（基于React等框架）的按钮事件通常不是直接绑定在DOM元素上，直接调用click()方法可能无法触发框架层面的事件处理逻辑。
• 视口与遮挡问题：即使滚动到页面底部，按钮可能仍未完全进入视口，或被其他元素（如悬浮导航栏）遮挡，导致点击无效。

解决方案 #

• 等待元素加载完成：使用显式等待确保按钮元素存在后再执行操作：

# 等待最多10秒，直到按钮元素出现
remDr$waitForElement("css", ".view-more-btn--VGYaj", timeout = 10000)

• 使用RSelenium原生点击方法：优先用Selenium的原生点击，而非直接调用JS的click()：

btn <- remDr$findElement("css", ".view-more-btn--VGYaj")
btn$clickElement()

• 更换稳定的选择器：如果类名动态变化，改用基于文本或父元素的稳定选择器：

# 通过按钮文本查找（假设按钮显示"View More"）
btn <- remDr$findElement("xpath", "//button[contains(text(), 'View More')]")
btn$clickElement()

• 精确滚动到按钮位置：先将按钮滚动到视口内，再执行点击：

btn <- remDr$findElement("css", ".view-more-btn--VGYaj")
# 滚动到按钮可见区域中心
remDr$executeScript("arguments[0].scrollIntoView({block: 'center'});", list(btn))
# 等待页面稳定
Sys.sleep(1)
btn$clickElement()

• 模拟真实鼠标点击事件：如果直接点击无效，用JS触发完整的鼠标事件：

js_script <- '
const btn = document.querySelector(".view-more-btn--VGYaj");
const clickEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: 100,
    clientY: 100
});
btn.dispatchEvent(clickEvent);
'
remDr$executeScript(js_script)

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