Bản vẽ canvas thử nghiệm với Thước đo

Question

Có cách nào để kiểm tra xem bản vẽ đã được thực hiện trên canvas có sử dụng Thước đo không?

tức là tôi vẽ một hình chữ nhật dựa trên người dùng nhấp:

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() 

Bây giờ tôi muốn thực hiện một spec để kiểm tra xem một hình chữ nhật được vẽ trên tọa độ quy định và, như một cộng, để kiểm tra nếu biên giới của nó có màu đen.

Điều này có thể sử dụng Protractor/WebDriverJS API không?

Answer 1

Điều này có thể xảy ra nhưng bạn sẽ phải tạo một khung hình giả với đầu ra mong muốn. bạn có thể so sánh Imagedata từ dummyCanvas với imagedata từ canvas đối tượng trình duyệt. Nó nên tìm một cái gì đó dọc theo dòng:

 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

Cách mà chúng tôi kiểm tra vải của chúng tôi trong thước đo như sau:

Chúng tôi thiết lập một "nổi tiếng" chuỗi hình ảnh base64 mà đại diện cho những gì chúng ta muốn vải của chúng tôi sau khi chúng tôi vẽ trên đó. Sau đó, chúng tôi sử dụng browser.executeScript để lấy dataUrl của canvas. Sau đó chúng ta so sánh chuỗi thành chuỗi và cho chúng ta biết bản vẽ có đúng hay không.

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); 
     }); 
    }); 
}); 

Làm việc như vô địch cho chúng tôi. Chúng tôi đang thử nghiệm với việc nhận được Uint8ClampedArray để xem liệu nó có dễ dàng hơn không - nhưng cho đến nay phương pháp này là tuyệt vời, ngoại trừ một hình ảnh tinh tế.

Trong kinh nghiệm của chúng tôi, chuỗi hình ảnh mà chúng tôi lấy lại từ phương thức toDataUrl chỉ đại diện cho khu vực có thể nhìn thấy của canvas - không phải toàn bộ canvas. Nó đủ tốt cho chúng tôi - nhưng số dặm của bạn có thể thay đổi. Đó cũng là lý do tại sao chúng tôi đang thử nghiệm với mảng byte của bạn vì nó cho phép bạn chỉ định một khu vực X x Y cụ thể của canvas.