Cypress拖拽调整元素尺寸时元素被移动而非调整大小如何解决

问题根因 #

你当前计算的点击坐标刚好落在元素本身的拖拽触发区域，没有命中Canvas库（从代码里的getObjects判断为Fabric.js）的右下角resize控制点触发范围，所以触发了元素移动逻辑而非尺寸调整逻辑。

解决思路 #

• 调整点击坐标，预留控制点偏移量：Fabric.js默认的resize控制点会向外延伸若干像素（默认cornerSize为13px），你当前计算的x/y刚好卡在元素的边界位置，触发的是元素整体拖拽逻辑。需要在计算完坐标后，额外向外偏移3-5像素（注意按缩放比例换算），确保命中resize控制点。
• 补全鼠标事件的必要参数：部分Canvas交互库需要明确识别左键点击事件才会触发resize，触发mousedown时要补充button: 0、which: 1参数，同时可加force: true避免元素交互权限限制。
• 拆分mousemove步骤：很多拖拽类交互需要一个微小的初始移动来识别操作类型，不要直接一步拖动到目标位置，可以先触发1px的小距离移动，等待100ms左右再拖动到目标坐标，让库正确识别为resize操作而非普通拖拽。
• 确认编辑模式状态生效：点击编辑模式按钮后，增加对应状态校验或短等待，避免状态还未切换完成就触发拖拽操作，导致触发默认的移动逻辑。

修改后参考代码 #

it("tests resizing elements", () => {
    cy.findByText(/zoom/i)
        .nextAll(1)
        .invoke("text")
        .then(($text) => {
            let zoom = parseInt($text.split("%")[0]);
            let objects;
            cy.window()
                .then(($win) => {
                    objects = $win.canvas.getObjects();
                })
                .then(() => {
                    cy.getSidebarButton("Edit mode").click();
                    // 可替换为编辑模式激活的对应断言，稳定性更高
                    cy.wait(200);
                    const targetEl = objects[objects.length - 1];
                    // 坐标计算时额外向外偏移5像素，适配控制点触发范围
                    let x = 
                        ((targetEl.left + targetEl.width) / 100) * zoom + (5 / 100) * zoom;
                    let y = 
                        ((targetEl.top + targetEl.height) / 100) * zoom + (5 / 100) * zoom;
                    cy.getCanvas()
                        .trigger("mousedown", x, y, { button: 0, which: 1, force: true })
                        // 微小位移触发resize状态识别
                        .trigger("mousemove", x + 1, y + 1, { force: true })
                        .wait(100)
                        .trigger("mousemove", x + 20, y + 25, { force: true })
                        .trigger("mouseup", x + 20, y + 25, { force: true });
                });
        });
});

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