Test disegni su tela con goniometro

Question

Esiste un modo per testare se un disegno è stato creato su una tela utilizzando il rapportatore?

cioè io disegnare un rettangolo in base a utente fa clic:

var shape = new createjs.Shape(); 
shape.graphics.beginStroke("black"); 
shape.graphics.drawRect(crd.x, crd.y, crd.width, crd.height); 
stage.addChild(shape) 
stage.update() 

Ora voglio fare una spec per verificare se un rettangolo è stato elaborato sulle coordinate specificate e, come un plus, per verificare se i suoi confini sono di colore nero.

È possibile utilizzare l'API Protractor/WebDriverJS?

Answer 1

Questo potrebbe essere possibile ma è necessario creare una tela fittizia con l'output desiderato. è possibile confrontare i dati immagine di dummyCanvas con l'immagine del campo degli oggetti del browser. Dovrebbe essere qualcosa sulla falsariga di:

 describe('Canvas Test', function() { 
     it('should have a title', function() { 
     browser.get('http://whenthetestShouldrun.com'); 
     var dummyCanvas= document.createElement('canvas'); 
     //some code to edit the canvas to what you want 
     expect(browser.By.id('canvas').getImageData(imageX, imageY, imageWidth, imageHeight)).toEqual(dummyCanvas.getImageData(imageX, imageY, imageWidth, imageHeight)); 
     }); 
    }); 

Answer 2

Il modo in cui ci prova la nostra tela goniometro è la seguente:

Abbiamo istituito un "noto" stringa immagine Base64 che rappresenta ciò che vogliamo la nostra tela deve essere dopo che ci disegniamo su di essa. Quindi usiamo browser.executeScript per ottenere il dataUrl della tela. Quindi confrontiamo stringa a stringa e questo ci dice se il disegno è corretto o meno.

var base64ImageString = "data:image/png;base64,iVBORw0KGgoAA...snipped for brevity"; 

describe("The Canvas", function() { 
    browser.get('/#')); 

     /* 
     . 
     do your drawing 
     . 
     */ 

    it("should contain the right drawings", function(){ 
     browser.executeScript("return document.getElementsByTagName('canvas')[0].toDataURL()").then(function (result) { 
      expect(result).toBe(base64ImageString); 
     }); 
    }); 
}); 

Funziona come un campione per noi. Stiamo sperimentando con Uint8ClampedArray per vedere se è più semplice, ma finora questo metodo è ottimo, tranne per un sottile trucco.

In base alla nostra esperienza, la stringa di immagine che si ottiene dal metodo toDataUrl rappresenta solo l'area visibile dell'area di disegno , non l'intera area di lavoro. È abbastanza buono per noi, ma il tuo percorso potrebbe variare. È anche il motivo per cui stiamo sperimentando il tuo array di byte perché ti permette di specificare un'area specifica X x Y dell'area di disegno.