使用webdriverio獲取畫布上下文

Question

我正在測試使用webdriverio的html畫布，並且需要測試畫布上像素的顏色。

client.element('#canvas-id'); 
    }).then(function (ele) { 
     var ctx = ele.getContext('2d'); 
     var canvasColor = ctx.getImageData(50, 10, 1, 1).data; 
     //assert black at center of line 
     assert.equal(canvasColor[0], 255); 
     assert.equal(canvasColor[1], 255); 
     assert.equal(canvasColor[2], 255); 
    }); 

因此，而不是由client.element返回的JSON對象，我需要得到實際的HTML元素使的getContext可用。這可能與webdriverio框架有關嗎？

Answer 1

您的ele是一個WebElement，它是一種表示您的瀏覽器中的實際元素。它沒有getImageData方法， WebElement沒有與canvas交互的特殊功能。

所以，你需要execute在客戶端您的要求：

//... 
}).then(function (ele) { 
    client.execute(function(element) 
    { 
     // this code gets executed on the client 
     return element.getContext('2d').getImageData(50, 10, 1, 1).data; 
    }, ele).then(function(canvasColor) 
    { 
     //assert black at center of line 
     assert.equal(canvasColor[0], 255); 
     assert.equal(canvasColor[1], 255); 
     assert.equal(canvasColor[2], 255); 
    }); 
}); 

（我沒有測試代碼，請讓我們知道，如果它的工作原理）