chai-screenshot

此插件旨在使用 chai 作为断言库来比较两张图片。
它受到 Playwright 创建的 haveScreenShot 方法和 chai-image 的启发，后者似乎是一个未维护的库。

目前只支持 PNG 图片。

第一步

使用 npm 安装插件

npm i chai-screenshot --save-dev

然后将其添加到您的测试文件中

const { expect, use } = require('chai');
const chaiScreenshot = require("chai-screenshot");

use(chaiScreenshot);

最后在您的测试脚本中使用它（此示例使用 mocha）

it('The screenshot should match the expected image', function() {
    const actual = 'actual.png';
    const expected = 'expected.png';

    expect(actual).to.matchScreenshot(expected);
});

如果断言失败，插件会创建一个名为 screenshot-output 的目录，并在其中生成一个 diff png 图片。

如何使用它

您可以将缓冲区、文件路径字符串甚至 base64 图片字符串作为实际参数和预期参数传递。随意使用任何对您有效的组合！

// Buffer:
const bufActual = Buffer.from(fs.readFileSync('actual.png'));
const bufExpected = Buffer.from(fs.readFileSync('expected.png'));

expect(bufActual).to.matchScreenshot(bufExpected);

// Filepath
expect('assets/actual.png').to.matchScreenshot('assets/expected.png');

// Base64 (example uses Selenium):
const actual = await driver.findElement({id: 'canvas'}).takeScreenshot(true);

expect(actual).to.matchScreenshot('assets/expected.png');

此插件在底层使用 pixelmatch 进行视觉比较。这意味着您也可以配置 pixelmatch 需要进行差异化的选项。在这个例子中，让我们将阈值选项设置为不那么敏感

expect("actual.png").to.matchScreenshot('expected.png', {
    diff: { threshold: 0.5 }
});

您可以查看完整的 pixelmatch 选项列表这里。

如果希望在测试失败后设置不同的目录来保存输出（图像 diff）或重命名默认文件名，可以按照以下方式设置选项

expect("actual.png").to.matchScreenshot('expected.png', {
    diff: { threshold: 0.5 },
    output: {
        dir: 'myFolder',
        name: 'test.png'} // Don't forget to add the .png extension
});

贡献

想贡献？您是否发现错别字或可以修复的糟糕代码行？
✨欢迎您的 PR！✨
您也可以创建一个 issue 并讨论可以进行哪些改进。