2

How to test the value from SignaturePad canvas in Cypress ? Because i have a component that restored the value from json and i need to test it but it fails cause the canvas is always empty whet i try to access that.

The problem: in test case i create an instance of SignaturePad and use it to retrieve canvas value:

//test.spec.js
import SignaturePad from 'signature_pad/dist/signature_pad.min';
...
describe('sign test', () => {
      it('stored value test', () => {
        const canvasElement = () => cy.get(`canvas[name="${modelId}|sign_1||"]`)
          .then($c => new SignaturePad($c[0]));
        const signature = () => new SignatureController(sign1, canvasElement());
        const value = signature().signature().getValueAsString();
        ...
      });
})

class SignatureController {
  constructor(field, signPad) {
    this.field = field;
    this.signPad = signPad;
  }

  getValueAsString = () => {
    // at this moment signature component has stored and drawn value
    this.signPad.then($c => {
      //but when i access SignaturePad instance it emptyfies the canvas
      const value = $c.toData();
      ...
  }
}

UPDATE: one more problem when I create an instance of SignaturePad and attach it to my testing canvas in Cypress there is a wierd behaviour that the mouse left-button is always down when it flies the canvas over and it draws all the time on the fly

Alexey Nikonov
  • 4,958
  • 5
  • 39
  • 66

0 Answers0