谷歌浏览器插件 使用 playwright 回放slide 拖动动作

背景

在 Playwright 中需要模拟比如 Element UI 组件库中滑块组件的滑动操作，可以通过下面方式实现。Element UI 的滑块组件通常由轨道（track）、滑块按钮（thumb）和进度条（bar）组成，我们需要定位滑块按钮并模拟拖动操作。

解决方案

模拟鼠标事件实现精确控制

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://your-elementui-page.com');
  
  const sliderThumb = page.locator('.el-slider__button');
  const sliderTrack = page.locator('.el-slider__runway');
  
  // 获取轨道尺寸和位置
  const trackBox = await sliderTrack.boundingBox();
  if (!trackBox) throw new Error('Slider track not found');
  
  // 计算目标位置（示例：拖动到 75% 位置）
  const targetX = trackBox.x + trackBox.width * 0.75;
  const targetY = trackBox.y + trackBox.height / 2;
  
  // 模拟完整拖拽过程
  await sliderThumb.hover();
  await page.mouse.down();
  // 添加微小偏移避免直接跳转
  await page.mouse.move(targetX + 10, targetY, { steps: 5 });
  // 精确移动到目标位置
  await page.mouse.move(targetX, targetY, { steps: 20 });
  await page.mouse.up();
  
  // 验证结果（示例）
  const sliderValue = await page.locator('.el-slider__input input').inputValue();
  console.log('Final slider value:', sliderValue);
  
  await browser.close();
})();

关键点说明：

1. 定位元素：

   • 滑块按钮：.el-slider__button
   • 滑动轨道：.el-slider__runway
   • 值输入框（可选）：.el-slider__input input

2. 计算位置：

   • 使用 boundingBox() 获取元素位置和尺寸
   • 通过百分比计算目标坐标：targetX = track.x + track.width * (percentage/100)

3. 拖动技巧：

   • 手动 mouse.down() → move() → up() 可实现更精细控制
   • 添加 steps 参数使移动更平滑（模拟真人操作）

4. 注意事项：

   • 使用 waitForSelector 确保组件加载完成
   • 根据实际页面结构调整选择器