Verifying and Interacting with Canvas Elements in Cypress - Test Automation Cookbook

This test automation recipe will show you how to work with Canvas elements in Cypress including interacting with Canvas elements and verifying functionality.

The Kitchen Canvas

Example Code

Find more Cypress, Playwright, and Selenium recipes over at the Automation Cookbook:

Powered by Applitools Visual AI Powered Test Automation

[ajhawr]

I have found writing automation for Canvas to be the worst nightmare an automation engineer can have. This thing hasnt evolved 1 bit in any of the tools we use. What a mess. Dragging and dropping elements on Canvas are the worst

[chrome]

Out of curiosity do you know how to handle drag and drop events within the canvas? This is a blocker for a test im doing at the moment

[bromptonhorsing]

I'm looking right now how to check whether canvas contains certain words, maybe you know how to do it?

[funbibabalola]

Hello, This video has been very helpful.

I tried to use this for google maps to click and pan the map but for some reason it does not work. I even tried the trigger function. Any ideas?

[rcrider]

**I am Trying to draw rectangular shape on canvas in Cypress Automation, but it is not allowing to do so. All we need to click and hold from one diagonal point and drag& drop let's say from (1, 1) to another coordinate point(2, 2). Then our task would be done.

Note: But the problem here is the source element point (1, 1) is not any element it's just a point on canvas and if we hold this value in ILocation interface then we cannot use any drag and drop plugin because in drag arguments the source & target parameter should be element string.

Have used the below trigger code also but this also did not work for me.

export function drawRectangle(start: ILocation, size: number): any {

//'start' is the mid point of coordinate
// size is 100

const source = {x: start.x, y: start.y}
const dest= {x: start.x + size, y: start.y + size }

cy.get('.div.canvas-container').click(source.x, source.y).as('sourcePoint');
("mousemove", {source, dest}, {force:true})
cy.get('.div.canvas-container').click(dest.x, dest.y).as('destPoint');

}