如何用Selenium在React Web应用中实现类似gremlinsjs的随机点击（JS版）

核心逻辑 #

gremlinsjs的点击器本质是随机选取页面可交互元素并触发点击，完全可以用JavaScript实现这个逻辑，再通过Selenium的executeScript方法在浏览器上下文执行这段代码，就能达到类似效果。

具体实现步骤 #

1. 筛选可点击元素 #

先遍历页面，筛选出可见、可交互的元素，排除隐藏、禁用或不在视口内的元素：

function getClickableElements() {
  // 先选取常见可交互元素类型
  const elements = document.querySelectorAll('button, a, input[type="submit"], input[type="button"], [onclick], [role="button"]');
  return Array.from(elements).filter(el => {
    const rect = el.getBoundingClientRect();
    // 验证元素可见、有尺寸、未禁用
    return rect.width > 0 && rect.height > 0 &&
           window.getComputedStyle(el).display !== 'none' &&
           window.getComputedStyle(el).visibility !== 'hidden' &&
           !el.disabled;
  });
}

2. 随机触发点击 #

从筛选后的元素列表里随机选一个，模拟真实鼠标点击事件（会触发click相关的所有冒泡事件）：

function randomClick() {
  const clickableElements = getClickableElements();
  if (clickableElements.length === 0) return;
  
  const randomIndex = Math.floor(Math.random() * clickableElements.length);
  const target = clickableElements[randomIndex];
  
  // 模拟真实鼠标点击，参数确保事件能正常冒泡和被捕获
  target.dispatchEvent(new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: target.getBoundingClientRect().x + Math.random() * target.offsetWidth,
    clientY: target.getBoundingClientRect().y + Math.random() * target.offsetHeight
  }));
}

3. 在Selenium中调用 #

以JS版Selenium为例，将上述代码注入浏览器执行，还可以循环多次模拟持续随机操作：

const { Builder } = require('selenium-webdriver');
const driver = new Builder().forBrowser('chrome').build();

async function simulateRandomClicks() {
  await driver.get('你的目标页面URL');
  
  // 循环执行15次随机点击，每次间隔随机时长
  for (let i = 0; i < 15; i++) {
    await driver.executeScript(`
      function getClickableElements() {
        const elements = document.querySelectorAll('button, a, input[type="submit"], input[type="button"], [onclick], [role="button"]');
        return Array.from(elements).filter(el => {
          const rect = el.getBoundingClientRect();
          return rect.width > 0 && rect.height > 0 &&
                 window.getComputedStyle(el).display !== 'none' &&
                 window.getComputedStyle(el).visibility !== 'hidden' &&
                 !el.disabled;
        });
      }
      function randomClick() {
        const clickableElements = getClickableElements();
        if (clickableElements.length === 0) return;
        
        const randomIndex = Math.floor(Math.random() * clickableElements.length);
        const target = clickableElements[randomIndex];
        
        target.dispatchEvent(new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window,
          clientX: target.getBoundingClientRect().x + Math.random() * target.offsetWidth,
          clientY: target.getBoundingClientRect().y + Math.random() * target.offsetHeight
        }));
      }
      randomClick();
    `);
    // 模拟真实操作的间隔，500-2500毫秒随机
    await driver.sleep(Math.floor(Math.random() * 2000) + 500);
  }
  
  await driver.quit();
}

simulateRandomClicks();

优化方向 #

• 扩展元素筛选规则：可以加入select、textarea等可交互元素，或根据业务自定义选择器
• 处理页面跳转/弹窗：如果点击后打开新标签页或弹窗，需要在Selenium中切换窗口上下文继续操作
• 增加异常捕获：比如元素点击后页面加载超时，可添加超时处理逻辑

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