是否可以使用 TestCafé 比较两个图像以验证确切的图像是否可用？

Question

在我们的项目中，图标很少。我们可以使用 TestCafe 测试那些 images/icons 吗？

示例代码：

 <a href="www.fb.com/" class="fa fa-facebook-square"> </a>

预期结果：

• 图片 1 -> 本地存储
• 图片 2 -> 在网站上可用。

而且我需要调用本地图片和网站图片对比

Answer 1

我可以建议两种在网站上比较图像的方法。

一种方法是 take a screenshot of the DOM element with the image and use a third-party library to compare it with the local image. For example, see the looks-same 库。

另一种方法是使用 RequestLogger and compare the response body with the local file using the Buffer.compare() 方法记录图像请求。请参阅下面说明此方法的示例：

import fs from 'fs';
import { RequestLogger } from 'testcafe';

const logger = RequestLogger('https://devexpress.github.io/testcafe/images/landing-page/banner-image.png', {
    logResponseBody:    true
});

fixture `Compare images`
    .page`https://devexpress.github.io/testcafe/`;

test
    .requestHooks(logger)
    ('Test', async t => {
        await t.expect(logger.count(record => record.response.statusCode === 200)).eql(1);

        const actualImageBuffer   = logger.requests[0].response.body;
        const expectedImageBuffer = fs.readFileSync('c:\Tests\images\banner-image.png');

        await t.expect(Buffer.compare(actualImageBuff, expectedImageBuff)).eql(0);
    });