javascript - 使用 webdriverio 获取 Canvas 上下文

Question

我正在使用 webdriverio 测试 html Canvas ，并且需要测试 Canvas 上像素的颜色。

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

因此，我需要获取实际的 html 元素，以便 getContext 可用，而不是 client.element 返回的 JSON 对象。这可以通过 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);
    });
});

(我没有测试代码，请告诉我们它是否有效)