I'm implementing some Cypress tests for a system that uses signature_pad package in a sign field, but for some reason I couldn't generate a signature using Cypress mouse events.

My current code is the following (for test reasons I using the signature_pad demo page):

import { random } from 'lodash';
const path = require('path');

it('generate a signature', () => {
  // uses the demo page of signature_pad
  cy.visit('/');
  
  cy.get('canvas')
    .as('canvas')
    .then(($canvas) => {
      const width = $canvas.width();
      const height = $canvas.height();

      cy.get('@canvas').trigger('mousedown', { which: 1, force: true });
      
      // draw lines connecting five random points
      for (let i = 0; i < 5; i++) {
        const x = random(width);
        const y = random(height);
        cy.wait(50).get('@canvas').trigger('mousemove', x, y, { force: true });
      }

      cy.get('@canvas').trigger('mouseup', { which: 1, force: true });
    });

  // Save the signature as PNG
  cy.contains('button', 'Save as PNG').click();
  cy.log('**confirm downloaded image**');
  validateImage();
}

// validate downloaded image 
const validateImage = (downloadedFilename) => {
  const downloadsFolder = Cypress.config('downloadsFolder');

  if (!downloadedFilename) {
    downloadedFilename = path.join(downloadsFolder, 'signature.png');
  }

  // ensure the file has been saved before trying to parse it
  cy.readFile(downloadedFilename, 'binary', { timeout: 15000 }).should((buffer) => {
    expect(buffer.length).to.be.gt(1000);
  });
};

After the test running I got the following result:

• Test failed to download and retrieve the signature PNG.
• No visual feedback of the signature in the component.
• When clicked to download the image, the component itself don't recognize the mouse events inputs, alerting that there is no signature (alert)Please provide a signature first.

Cypress screenshot

I appreciate any help to understand what is happening and how to solve this issue.

Thanks!!