Karate测试场景中如何模拟canvas元素上的手写签名交互

所有前端手写签名组件的有效判定逻辑，完全不依赖Canvas上的像素内容，而是靠捕获绑定在Canvas元素上的原生输入事件（pointerdown/pointermove/pointerup、touchstart/touchmove/touchend等），实时将输入轨迹点存储在组件内部的状态数组中，最后再将这些轨迹点渲染到Canvas上。
直接通过Canvas 2D上下文调用fillRect、moveTo等方法绘制像素的操作，完全绕过了组件的事件监听逻辑，组件内部根本记录不到任何输入轨迹，自然会判定为没有有效签名。

方案1：使用Karate内置鼠标交互API（优先选择，稳定性最高） #

Karate的鼠标API会直接触发浏览器层面的原生输入事件，和用户真实手写的事件链完全一致，所有签名组件都能正常捕获轨迹，不会出现识别失效的问题。
对应Karate步骤参考：

# 定位目标Canvas元素
* def signatureCanvas = locate('canvas')
# 鼠标移动到签名起始位置，按下左键模拟笔尖落下
* mouse(signatureCanvas, 100, 200).down()
# 逐段移动鼠标，模拟手写拖动轨迹，设置50ms的移动间隔避免组件漏检快速连续事件
* mouse(signatureCanvas, 220, 180).move(50)
* mouse(signatureCanvas, 350, 210).move(50)
* mouse(signatureCanvas, 480, 170).move(50)
* mouse(signatureCanvas, 600, 200).move(50)
* mouse(signatureCanvas, 720, 190).move(50)
* mouse(signatureCanvas, 850, 220).move(50)
# 抬笔模拟签名完成
* mouse(signatureCanvas, 850, 220).up()

注意：因为目标Canvas设置了touch-action: none，浏览器会屏蔽默认的触摸滑动行为，用鼠标API模拟的拖动操作不会被页面拦截。

方案2：JS合成事件模拟（适合需要精确控制轨迹的场景） #

如果需要在脚本层面自定义任意签名轨迹，可以通过JS创建合成的输入事件，直接派发到Canvas元素上触发组件的监听逻辑，注意必须处理Canvas显示尺寸和内部分辨率的坐标换算，避免轨迹偏移。
对应可在Karate中执行的JS代码：

const canvas = document.getElementsByTagName('canvas')[0];
// 计算DOM显示尺寸与Canvas内部分辨率的缩放比
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
// 自定义手写轨迹点
const signaturePoints = [
  {x: 100, y: 200},
  {x: 220, y: 180},
  {x: 350, y: 210},
  {x: 480, y: 170},
  {x: 600, y: 200},
  {x: 720, y: 190},
  {x: 850, y: 220}
];
// 触发按下事件
canvas.dispatchEvent(new PointerEvent('pointerdown', {
  clientX: rect.left + signaturePoints[0].x / scaleX,
  clientY: rect.top + signaturePoints[0].y / scaleY,
  bubbles: true,
  cancelable: true,
  pointerType: 'pen'
}));
// 逐点触发移动事件
for (let i = 1; i < signaturePoints.length; i++) {
  canvas.dispatchEvent(new PointerEvent('pointermove', {
    clientX: rect.left + signaturePoints[i].x / scaleX,
    clientY: rect.top + signaturePoints[i].y / scaleY,
    bubbles: true,
    cancelable: true,
    pointerType: 'pen'
  }));
}
// 触发抬笔事件
canvas.dispatchEvent(new PointerEvent('pointerup', {
  clientX: rect.left + signaturePoints.at(-1).x / scaleX,
  clientY: rect.top + signaturePoints.at(-1).y / scaleY,
  bubbles: true,
  cancelable: true,
  pointerType: 'pen'
}));

• 不要尝试直接操作Canvas上下文绘制像素来模拟签名，这类操作永远绕过不了组件的事件监听校验逻辑。
• 如果遇到签名组件仅监听触摸事件不监听指针事件，只需要将代码中的PointerEvent替换为对应的TouchEvent，整体逻辑保持不变即可。
• 事件触发速度不要过快，部分签名组件会过滤时间间隔小于10ms的连续轨迹点，避免被判定为误触。

内容的提问来源于stack exchange，提问作者Radim Bukovský