Puppeteer 模拟鼠标拖放

38 min read

Puppeteer 是一个用于控制 Chrome 或 Chromium 浏览器的 Node.js 库,可以模拟用户在浏览器中执行各种操作,包括鼠标拖放。

下面是使用 Puppeteer 模拟鼠标拖放的示例代码:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 导航到目标页面
  await page.goto('https://example.com');

  // 等待目标元素加载完毕
  await page.waitForSelector('#myElement');

  // 获取源元素和目标元素的位置和尺寸
  const sourceElement = await page.$('#myElement');
  const sourceBox = await sourceElement.boundingBox();
  const targetElement = await page.$('#targetElement');
  const targetBox = await targetElement.boundingBox();

  // 计算目标元素的中心点
  const targetCenterX = targetBox.x + targetBox.width / 2;
  const targetCenterY = targetBox.y + targetBox.height / 2;

  // 模拟鼠标按下事件
  await page.mouse.move(sourceBox.x + sourceBox.width / 2, sourceBox.y + sourceBox.height / 2);
  await page.mouse.down();

  // 模拟鼠标移动事件,拖拽到目标元素的中心点
  await page.mouse.move(targetCenterX, targetCenterY);

  // 模拟鼠标释放事件
  await page.mouse.up();

  // 关闭浏览器
  await browser.close();
})();

在上述示例代码中,我们使用 Puppeteer 打开一个 Chrome 浏览器实例,并导航到目标页面。然后,我们等待目标元素加载完毕,并获取源元素和目标元素的位置和尺寸。接下来,我们计算目标元素的中心点,并使用 page.mouse.move 方法模拟鼠标按下、移动和释放事件,实现鼠标拖放操作。

需要注意的是,鼠标拖放操作依赖于目标页面的交互响应,某些页面可能无法正确地模拟鼠标拖放。你还可以根据目标页面的具体结构和操作方式进行相应的修改和调整。