使用Selenium和Canvas进行自动热图验证E2E热力图记录了访客在网站实时状态下的点击，可以用来解释用户在模态框

热力图记录了访客在网站实时状态下的点击，可以用来解释用户在模态框、登录后的页面和动态URL等元素上的行为。

VWO热图在vwo.com上的应用

但这里有一个问题，如何使用自动化来验证Heatmap E2E？如何检查点击量是否被正确绘制？如何检查在绘制点击量时是否有数据损失？

上述问题的答案是HTML Canvas。由于VWO热图是在HTML画布上呈现的，我们决定也利用它来验证Heatmap E2E。使用Canvas的最大好处是，它可以很容易地与你现有的Selenium脚本集成。

Canvas如何用于热图自动化？

为了验证热力图是否工作，有两个阶段。

第一阶段是在测试页面上绘制点击，并存储点击坐标。这可以用Selenium轻松完成:

//get elements location from the top of DOM
element.getLocation().then(function (location) {
    //get elements height and width
    element.getSize().then(function (size) {
        //store element’s center coordinates w.r.t. top left corner of DOM in array    
        clickDataArray.push(new Coordinates(Math.floor(location.x + size.width / 2), Math.floor(location.y + size.height / 2)));
    });
});

在这个函数中，我们只是找到我们点击的元素的中心坐标并将其存储到一个数组中。这些存储的坐标将被进一步用于检查点击是否使用画布函数来绘制。

第二阶段是利用画布函数和存储的坐标数据，以验证热图是否被正确绘制。我们简单地检查热力图画布是否为空，如果是空的，我们就不会进一步检查:

exports.isCanvasEmpty = function () {
    browser.wait(EC.presenceOf(element(by.tagName('canvas'))), 5000);
    return browser.executeScript(function () {
        var canvas = document.getElementsByTagName('canvas')[0];
        var imgWidth = canvas.width || canvas.naturalWidth;
        var imgHeight = canvas.height || canvas.naturalHeight;
        // true if all pixels Alpha equals to zero
        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
        //alpha channel is the 4th value in the imageData.data array that’s why we are incrementing it by 4
        for (var i = 0; i < imageData.data.length; i += 4) {
            if (imageData.data[i + 3] !== 0) {
                return false;
            }
        }
        return true;
    });
}:

在这个函数中，我们得到了画布的2d上下文，然后我们对图像数据进行迭代，以检查所有像素点的阿尔法通道是否大于0。阿尔法通道是图形文件格式中的一个8位层，用于表达半透明性（透明度），这反过来意味着如果一个像素的阿尔法通道的值等于零，则该像素上没有任何东西被绘制出来。

如果任何一个像素的阿尔法通道的值大于零，这告诉我们画布不是空的，这确实意味着点击被绘制到热图上。

一旦我们确定画布不是空的，我们就可以进一步检查点击是否被绘制在画布上的正确位置上，也就是我们用Selenium点击的确切位置:

exports.checkCanvasPlotting = function (coordinates) {
    'use strict';
    browser.wait(EC.presenceOf(element(by.tagName('canvas'))), 5000);
    return browser.executeScript(
        function () {
            var coord = arguments[0];
            var canvas = document.getElementsByTagName('canvas')[0];
            // true if all pixels Alpha equals to zero
            var ctx = canvas.getContext('2d');
            if (ctx.getImageData(coord.x, coord.y, 1, 1).data[3] === 0) {
                return false;
            }
            return true;
    }, coordinates);
};

在这个函数中，我们使用相同的canvas函数来获取imageData，然后检查所有点击的坐标的alpha通道的值是否大于0。

上述函数可以很容易地被调用，如下所示。

exports.validateHeatmapPlotting = function (coordinateArray) {
    'use strict';
    for (var i = 0; i < coordinateArray.length; i++) {
        expect(canvasUtils.checkCanvasPlotting(coordinateArray[i])).toBe(true);
    }
};

总结

可以很容易地利用Canvas的实用函数和Selenium，以便使用自动化来验证基本的热图功能。
这些功能可以很容易地扩展，以验证元素的点击次数，也可以验证绘图的强度。

希望这篇文章是一个很好的参考，帮助你为热图测试编写端到端的自动化脚本。如果您对此有任何疑问，请通过评论告诉我们。