My goal is to perform a test on a system where the user can make drawings, and I am using the website
https://www.autodraw.com/ for studying purposes.
Although Cypress does not detect errors, I am not able to see the drawing on the website.
Is it possible to simulate a drawing? Can I simule a click and drag to create a line?
describe('Should simulate a drawing', () => {
it('Should simulate a drawing', () => {
cy.visit('https://www.autodraw.com/')
cy.get('.green').click()
// press the mouse button
cy.get('#main-canvas')
.trigger('mousedown', { button: 0, force: true })
// Move the mouse while holding down the left mouse button
cy.get('#main-canvas')
.trigger('mousemove', { clientX: 100, clientY: 100, force: true })
.trigger('mousemove', { clientX: 200, clientY: 200, force: true })
// Release the left mouse button
cy.get('#main-canvas')
.trigger('mouseup', { button: 0, force: true })
// Verify if the drawing was made correctly
cy.get('#main-canvas')
.should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
})
})