chai-screenshot

このプラグインはアサーションライブラリとして chai を使用して 2 つの画像を比較するために作成されました。
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');

このプラグインは visual 比較のために内部で pixelmatch を使用しています。つまり、diff を実行するために 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 を歓迎します!✨
また、課題を作成して、どのような改善が可能かを議論することもできます。