{ const canvas = within(canvasElement); const drawButton = canvas.getAllByLabelText("Draw button")[0]; userEvent.click(drawButton); const drawCanvas = document.getElementsByTagName("canvas")[0]; if (!drawCanvas) { throw new Error("Could not find canvas"); } await new Promise((r) => setTimeout(r, 1000)); await userEvent.pointer({ keys: "[MouseLeft>]", target: drawCanvas, coords: { clientX: 300, clientY: 100 } }); await userEvent.pointer({ keys: "[MouseLeft>]", target: drawCanvas, coords: { clientX: 300, clientY: 100 } }); await userEvent.pointer({ keys: "[MouseLeft>]", target: drawCanvas, coords: { clientX: 300, clientY: 100 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 300, clientY: 300 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 300, clientY: 300 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 100, clientY: 100 } }); await userEvent.click(canvas.getByLabelText("Color button")); var availableColors = document.querySelectorAll( "button.color:not(.empty):not(.selected):not(.hidden)" ); await userEvent.click(availableColors[0]); await userEvent.keyboard("{Escape}"); await userEvent.pointer({ keys: "[MouseLeft>]", target: drawCanvas, coords: { clientX: 50, clientY: 50 } }); await userEvent.pointer({ keys: "[MouseLeft>]", target: drawCanvas, coords: { clientX: 100, clientY: 100 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 100, clientY: 300 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 300, clientY: 300 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 100, clientY: 100 } }); await userEvent.click(canvas.getByLabelText("Transform button")); const bottomCropHandle = document.getElementsByClassName("handle corner b")[0]; await userEvent.pointer({ keys: "[MouseLeft>]", target: bottomCropHandle, coords: { clientX: 1000, clientY: 200 } }); await userEvent.pointer({ target: bottomCropHandle, coords: { clientX: 500, clientY: 0 } }); await userEvent.pointer({ keys: "[MouseLeft>]", target: bottomCropHandle, coords: { clientX: 500, clientY: 0 } }); await userEvent.pointer({ keys: "[MouseLeft>]", coords: { clientX: 500, clientY: 0 } }); await userEvent.pointer({ target: drawCanvas, coords: { clientX: 100, clientY: 300 } }); userEvent.tripleClick(drawCanvas); await new Promise((r) => setTimeout(r, 1000)); userEvent.click(canvas.getByLabelText("Show Layers")); await new Promise((r) => setTimeout(r, 1000)); userEvent.click(canvas.getByLabelText("Add Layer")); await userEvent.click(canvas.getByLabelText("Image button")); await userEvent.click(canvas.getByLabelText("Undo")); await userEvent.click(canvas.getByLabelText("Redo")); }} />