如何在Typescript/Jest中让Selenium滚动到元素以实现点击？

你之前的代码错误在于scrollIntoView是DOM元素的方法，必须加括号调用，少了括号会被当成属性而非函数，导致JS报错。下面提供几种可行的解决方式：

1. 修正scrollIntoView调用 #

直接修复脚本语法，同时可以配置参数让元素滚动到视口合适位置，避免被页脚遮挡：

// 滚动元素到视口中心，避免被顶部/底部元素挡住
this.driver.executeScript("arguments[0].scrollIntoView({ behavior: 'auto', block: 'center' });", element);
// 之后执行点击
await element.click();

• block: 'center'：让元素滚动到视口中间，避开粘性页脚的遮挡
• behavior: 'auto'：快速滚动，也可以换成'smooth'实现平滑滚动

2. 直接通过JS脚本触发点击 #

如果滚动后仍存在遮挡问题，可以绕开Selenium的点击逻辑，直接在DOM层面触发元素点击：

// 直接通过JS执行点击，不受页面元素遮挡影响
await this.driver.executeScript("arguments[0].click();", element);

3. 使用Selenium Actions类模拟用户操作 #

如果更倾向于用Selenium原生API模拟真实用户行为，可以用Actions类先移动到元素再点击：

import { Actions } from 'selenium-webdriver';

const actions = new Actions(this.driver);
// 自动滚动到元素位置，然后执行点击
await actions.moveToElement(element).click().perform();

额外注意事项 #

• 确保元素已完全加载：如果元素是动态渲染的，点击前需添加等待逻辑：

  import { until } from 'selenium-webdriver';
  
  await this.driver.wait(until.elementIsVisible(element), 5000);
  

• 临时隐藏粘性页脚：如果页脚层级过高始终遮挡，可临时修改其样式：

  // 隐藏页脚
  await this.driver.executeScript("document.querySelector('.sticky-footer').style.display = 'none';");
  await element.click();
  // 点击后恢复页脚
  await this.driver.executeScript("document.querySelector('.sticky-footer').style.display = 'block';");
  

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