如何使用Playwright实现GoJS面板节点拖拽至HTML div元素中

结论 #

完全可以用Playwright实现该需求，你目前写的基础鼠标操作逻辑方向是对的，未生效主要是忽略了GoJS canvas元素的交互特性，按以下规则调整代码即可：

• 优先校准坐标，不要直接使用页面绝对坐标，要基于GoJS palette对应的canvas元素边界计算相对坐标：

// 替换为你页面中GoJS palette对应的canvas选择器
const paletteCanvas = page.locator('canvas.gojs-palette'); 
const canvasBounds = await paletteCanvas.boundingBox();

// 计算节点在页面中的绝对坐标 = canvas左上角坐标 + 节点在canvas内的相对坐标
const dragStartX = canvasBounds.x + 节点在palette canvas内的相对X值;
const dragStartY = canvasBounds.y + 节点在palette canvas内的相对Y值;

• 增加必要延迟和步进移动，适配GoJS内部的拖拽识别逻辑：
  GoJS内置了拖拽触发阈值，鼠标按下后直接快速移动会被识别为普通点击而非拖拽动作，需要在按下后增加短等待，移动时拆分多步执行：

const { page } = this.helpers.Playwright;
// 移动到目标节点位置
await page.mouse.move(dragStartX, dragStartY);
await page.mouse.down();
// 等待100-200ms让GoJS识别到拖拽初始化
await page.waitForTimeout(150);
// 替换为目标div的中心坐标，建议提前通过目标div的boundingBox计算
const targetX = 目标div中心点X坐标;
const targetY = 目标div中心点Y坐标;
// 分10步移动，避免速度过快GoJS识别失败
await page.mouse.move(targetX, targetY, { steps: 10 });
await page.waitForTimeout(100);
await page.mouse.up();

• 可直接调用GoJS实例API获取节点坐标，避免手动计算误差：
  如果你初始化的GoJS Palette实例挂载在window全局下，可以直接通过Playwright的evaluate方法调用GoJS原生API拿到目标节点的准确相对坐标，不需要手动硬编码：

const nodeRelativePos = await page.evaluate(() => {
  // 替换为你自己定义的Palette实例变量名
  const paletteInstance = window.myPalette;
  // 替换为你要拖拽的节点的key值
  const targetNode = paletteInstance.findNodeForKey('target-node-key');
  // 将节点的文档坐标转为canvas视图坐标
  const viewPos = paletteInstance.transformDocToView(targetNode.location);
  return { x: viewPos.x, y: viewPos.y };
});
// 后续直接用nodeRelativePos的x、y值计算拖拽起始坐标即可

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