帶量角器的測試畫布圖紙

有沒有辦法通過測試畫布是否使用量角器？帶量角器的測試畫布圖紙

即我得出基於用戶的矩形點擊：

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

現在我想打一個規範來測試一個矩形上繪製指定的座標，作爲一個加號，以測試它的邊界是黑色的。

這是可能的使用量角器/ WebDriverJS API？

來源

2014-05-25 Tomas Romero

這可能是可能的，但您必須創建一個具有所需輸出的虛擬畫布。您可以將dummyCanvas中的Imagedata與瀏覽器對象畫布中的圖像數據進行比較。它看起來應該沿着線：

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

來源

2014-09-29 08:49:27 McLoving

我目前沒有使用量角器，但如果我測試這個，我會分享結果。這可能有用！ –

量角器運行在節點中，並且本身不知道「文檔」你可以做到這一點 - 但是還有一堆箍和NPM你必須跳過。 –

，我們在量角器測試我們的畫布的方法如下：

我們建立了一個「衆所周知」的base64圖像字符串，它表示我們想要什麼我們的畫布是在我們畫畫之後。然後我們使用browser.executeScript來獲取畫布的dataUrl。然後我們將字符串與字符串進行比較，並告訴我們繪圖是否正確。

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

就像我們的冠軍。我們正在試驗獲取Uint8ClampedArray來看看它是否更容易 - 但到目前爲止，除了一個微妙的陷阱之外，這種方法是很好的。

根據我們的經驗，我們從toDataUrl方法返回的圖像字符串僅表示畫布的可見區域- 而不是整個畫布。這對我們來說已經足夠了 - 但是你的里程可能會有所不同。這也是我們試驗字節數組的原因，因爲它允許您指定畫布的特定X X Y區域。

來源

2014-10-03 17:56:02

用canvas在下面用bg顏色繪製圖像，將它保存爲圖像，得到它的base64代碼，但是當與toDataURL（）方法的實際結果比較時，它不是相同的 – sKopheK

然後我會說你做錯了。你保存了什麼樣的圖像？ toDataUrl所做的一樣？可能不會。採用toDataUrl（）的結果並使其成爲衆所周知的字符串。測試將通過，如果任何未來的更改導致畫布的字符串發生變化，測試將失敗 - 因爲它應該。 –

帶量角器的測試畫布圖紙

回答

相關問題