如何通过Playwright模拟鼠标在Canvas绘制合规电子签名？

完全可以实现，codegen搞不定是因为它只能捕捉手动操作的离散点，没法生成连续的长轨迹。下面是具体的实现思路和代码示例：

核心思路 #

要模拟真实的长签名，关键是生成连续的鼠标移动路径，而非仅点击几个点。Playwright的mouse API支持down、move、up的连续操作，只要提供足够多的路径点，就能画出符合要求的长签名。

具体实现步骤 #

1. 定位Canvas元素并获取位置
   先找到目标canvas元素，获取它在页面上的绝对坐标（bounding box），后续鼠标操作基于这个坐标偏移计算签名路径点。

2. 准备签名路径点
   两种方式获取路径点：

   • 手动定义一组平滑坐标点（模拟手写签名轨迹）
   • 录制真实签名的坐标（比如用浏览器控制台记录mousemove事件的x/y值，导出成数组）

3. 模拟连续鼠标操作
   在签名起始点按下鼠标，依次移动到每个路径点（每个移动间加少量延迟，模拟真实书写速度），最后松开鼠标。

代码示例（JavaScript/TypeScript） #

const { test, expect } = require('@playwright/test');

test('模拟Canvas电子签名', async ({ page }) => {
  await page.goto('目标页面URL');
  
  // 定位canvas元素
  const canvas = await page.locator('canvas签名选择器');
  const canvasBox = await canvas.boundingBox();
  if (!canvasBox) throw new Error('未找到canvas元素');

  // 定义签名路径点（相对于canvas左上角的坐标，可按需调整）
  const signaturePoints = [
    { x: 20, y: 50 },
    { x: 30, y: 60 },
    { x: 50, y: 40 },
    { x: 80, y: 70 },
    { x: 120, y: 30 },
    { x: 160, y: 60 },
    { x: 200, y: 20 },
    { x: 220, y: 50 },
    { x: 250, y: 30 },
    { x: 280, y: 60 },
    // 可继续添加更多点，让签名更长更真实
  ];

  // 转换为页面绝对坐标
  const absolutePoints = signaturePoints.map(p => ({
    x: canvasBox.x + p.x,
    y: canvasBox.y + p.y
  }));

  // 开始签名
  const mouse = page.mouse;
  await mouse.move(absolutePoints[0].x, absolutePoints[0].y);
  await mouse.down();

  // 依次移动到每个路径点
  for (let i = 1; i < absolutePoints.length; i++) {
    await mouse.move(absolutePoints[i].x, absolutePoints[i].y, {
      steps: 5, // 分多步移动，让轨迹更平滑
      delay: 10 // 每步延迟10ms，模拟书写速度
    });
  }

  await mouse.up();
});

优化建议 #

• 让轨迹更平滑：用贝塞尔曲线生成路径点，或增加更多中间点，避免直线段生硬
• 模拟真实书写节奏：调整delay和steps参数，快速笔画减少延迟，转折处增加延迟
• 用真实签名轨迹：录制自己的签名坐标替换示例中的signaturePoints，签名样式会更贴近真实

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