Draw signature on signature_pad (canvas) in Cypress tests

signature.commands.ts

import {random} from 'lodash-es';

/**
 * This is a command to draw a random signature on the canvas of signature_pad
 * (https://github.com/szimek/signature_pad) during Cypress tests.
 *
 * Put the present into `<project root>/cypress/support/commands/signature.commands.ts`.
 * Add `import './commands/signature.commands';` in `<project root>/cypress/support/index.ts`.
 *
 * After, you will be able to draw random signatures with:
 *    cy.putSignature('canvas');
 *      or
 *    cy.putSignature('canvas', 7);
 */
Cypress.Commands.add('putSignature', (canvasSelector: string, nbPoints: number = 5) => {
  Cypress.log({ name: 'putSignature' });

  cy
    .get(canvasSelector)
    .as('canvas')
    .then($canvas => {
      const width = $canvas.width();
      const height = $canvas.height();

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

      for (let i = 0; i < nbPoints; i++) {
        const x = random(width);
        const y = random(height);

        /* eslint-disable-next-line cypress/no-unnecessary-waiting */
        cy.wait(50)
          .get('@canvas')
          .trigger('pointermove', x, y, { force: true });
      }

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