I am trying to resize a box element by clicking on the bottom right corner and dragging it down a few pixels. Example what I have but does not work:
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();
// x and y are relative to the zoom percentage
let x =
((objects[objects.length - 1].left +
objects[objects.length - 1].width) /
100) * zoom;
let y =
((objects[objects.length - 1].top +
objects[objects.length - 1].height) /
100) * zoom;
cy.getCanvas()
.trigger("mousedown", x, y)
.trigger("mousemove", x + 20, y + 25)
.trigger("mouseup", x + 20, y + 25);
});
});
});
What the code currently does is click on the correct spot, drag the object and then release, but it moves the object instead of resizing it.
Any help would be greatly appreciated.
Try triggering resize directly:
cy.getCanvas().trigger('resize',x,y);
Finally figured what I needed. The issue was that the element needed to be clicked. So replacing the last bit of my code with
cy.getCanvas()
.trigger("mousedown", x, y)
.trigger("mouseup", x, y)
.trigger("mousedown", x, y)
.trigger("mousemove", x + 50, y + 55)
.trigger("mouseup", x + 50, y + 55);
fixed my issue. (To my surprise, .click() was not enough and it had to be mousedown and mouseup.)
What helped me realize this was needed was spying on the events fired when doing it manually.