JavaScript版Selenium WebDriver如何实现Shift+鼠标点击多选元素

Selenium 原生API完全支持Shift+鼠标点击的组合操作，不需要额外引入第三方库，核心通过Actions动作链控制修饰键按下状态即可实现多元素选择。

标准实现（官方Actions API） #

Actions类支持键鼠连续动作编排，操作逻辑和真实用户操作完全一致：先按住Shift键不松开，依次点击所有需要选中的元素，全部点击完成后释放Shift键即可。
示例代码：

const { Builder, By, Key, until } = require('selenium-webdriver');

(async function multiSelectDemo() {
  const driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('目标页面URL');
    // 定位所有需要选择的元素
    const selectItems = [
      await driver.wait(until.elementLocated(By.css('第一个待选元素选择器')), 10000),
      await driver.wait(until.elementLocated(By.css('第二个待选元素选择器')), 10000),
      await driver.wait(until.elementLocated(By.css('第三个待选元素选择器')), 10000)
    ];

    // 构建动作链执行Shift+多选
    const actionChain = driver.actions({ async: true });
    actionChain.keyDown(Key.SHIFT);
    for (const item of selectItems) {
      actionChain.click(item);
    }
    await actionChain.keyUp(Key.SHIFT).perform();

  } finally {
    // 操作完成后按需关闭浏览器
    // await driver.quit();
  }
})();

注意事项 #

• 不要在单次点击前后重复执行keyDown(Key.SHIFT)和keyUp(Key.SHIFT)，必须保持Shift键的按下状态覆盖所有待选元素的点击操作，否则会丢失多选状态。
• 待点击元素如果不在可视区域内，会触发点击坐标偏移错误，点击前先滚动元素到可视区域即可：

  await driver.executeScript("arguments[0].scrollIntoView({block: 'center'});", targetElement);
  

• 极少数场景下Actions API触发的操作不被页面识别，可以用原生事件注入的方式兜底，优先推荐使用官方Actions API，注入的伪造事件可能被前端框架的事件校验拦截：

  async function nativeShiftClick(driver, element) {
    await driver.executeScript(`
      const el = arguments[0];
      const eventOpts = { bubbles: true, cancelable: true, view: window, shiftKey: true };
      el.dispatchEvent(new MouseEvent('mousedown', eventOpts));
      el.dispatchEvent(new MouseEvent('mouseup', eventOpts));
      el.dispatchEvent(new MouseEvent('click', eventOpts));
    `, element);
  }
  

如果是选择列表内连续区间的元素，只需要按住Shift点击区间首尾两个元素即可，不需要逐个点击中间元素，和真实用户操作逻辑一致。

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