mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-15 14:11:50 +03:00
6d82460a02
This patch implements a new image comparison function, codenamed
"ssim-cie94". The goal of the new comparison function is to cancel out
browser non-determenistic rendering.
To use the new comparison function:
```ts
await expect(page).toHaveScreenshot({
comparator: 'ssim-cie94',
});
```
As of Nov 30, 2022, we identified the following sources of
non-determenistic rendering for Chromium:
- Anti-aliasing for certain shapes might be different due to the
way skia rasterizes certain shapes.
- Color blending might be different on `x86` and `aarch64`
architectures.
The new function employs a few heuristics to fight these
differences.
Consider two non-equal image pixels `(r1, g1, b1)` and `(r2, g2, b2)`:
1. If the [CIE94] metric is less then 1.0, then we consider these pixels
**EQUAL**. (The value `1.0` is the [just-noticeable difference] for
[CIE94].). Otherwise, proceed to next step.
1. If all the 8 neighbors of the first pixel match its color, or
if the 8 neighbors of the second pixel match its color, then these
pixels are **DIFFERENT**. (In case of anti-aliasing, some of the
direct neighbors have to be blended up or down.) Otherwise, proceed
to next step.
1. If SSIM in some locality around the different pixels is more than
0.99, then consider this pixels to be **EQUAL**. Otherwise, mark them
as **DIFFERENT**. (Local SSIM for anti-aliased pixels turns out to be
very close to 1.0).
[CIE94]: https://en.wikipedia.org/wiki/Color_difference#CIE94
[just-noticeable difference]:
https://en.wikipedia.org/wiki/Just-noticeable_difference
92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
/**
|
|
* Copyright (c) Microsoft Corporation.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { test, expect } from '../playwright-test/stable-test-runner';
|
|
import { PNG } from 'playwright-core/lib/utilsBundle';
|
|
import { compare } from 'playwright-core/lib/image_tools/compare';
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
|
|
function listFixtures(root: string, fixtures: Set<string> = new Set()) {
|
|
for (const item of fs.readdirSync(root, { withFileTypes: true })) {
|
|
const p = path.join(root, item.name);
|
|
if (item.isDirectory())
|
|
listFixtures(p, fixtures);
|
|
else if (item.isFile() && p.endsWith('-actual.png'))
|
|
fixtures.add(p.substring(0, p.length - '-actual.png'.length));
|
|
}
|
|
return fixtures;
|
|
}
|
|
|
|
const FIXTURES_DIR = path.join(__dirname, 'fixtures');
|
|
|
|
function declareFixtureTest(fixtureRoot: string, fixtureName: string, shouldMatch: boolean) {
|
|
test(path.relative(fixtureRoot, fixtureName), async ({}, testInfo) => {
|
|
const [actual, expected] = await Promise.all([
|
|
fs.promises.readFile(fixtureName + '-actual.png'),
|
|
fs.promises.readFile(fixtureName + '-expected.png'),
|
|
]);
|
|
testInfo.attach(fixtureName + '-actual.png', {
|
|
body: actual,
|
|
contentType: 'image/png',
|
|
});
|
|
testInfo.attach(fixtureName + '-expected.png', {
|
|
body: expected,
|
|
contentType: 'image/png',
|
|
});
|
|
const actualPNG = PNG.sync.read(actual);
|
|
const expectedPNG = PNG.sync.read(expected);
|
|
expect(actualPNG.width).toBe(expectedPNG.width);
|
|
expect(actualPNG.height).toBe(expectedPNG.height);
|
|
|
|
const diffPNG = new PNG({ width: actualPNG.width, height: actualPNG.height });
|
|
const diffCount = compare(actualPNG.data, expectedPNG.data, diffPNG.data, actualPNG.width, actualPNG.height, {
|
|
maxColorDeltaE94: 1.0,
|
|
});
|
|
|
|
testInfo.attach(fixtureName + '-diff.png', {
|
|
body: PNG.sync.write(diffPNG),
|
|
contentType: 'image/png',
|
|
});
|
|
|
|
if (shouldMatch)
|
|
expect(diffCount).toBe(0);
|
|
else
|
|
expect(diffCount).not.toBe(0);
|
|
});
|
|
}
|
|
|
|
test.describe('basic fixtures', () => {
|
|
test.describe.configure({ mode: 'parallel' });
|
|
|
|
for (const fixtureName of listFixtures(path.join(FIXTURES_DIR, 'should-match')))
|
|
declareFixtureTest(FIXTURES_DIR, fixtureName, true /* shouldMatch */);
|
|
for (const fixtureName of listFixtures(path.join(FIXTURES_DIR, 'should-fail')))
|
|
declareFixtureTest(FIXTURES_DIR, fixtureName, false /* shouldMatch */);
|
|
});
|
|
|
|
const customImageToolsFixtures = process.env.IMAGE_TOOLS_FIXTURES;
|
|
if (customImageToolsFixtures) {
|
|
test.describe('custom fixtures', () => {
|
|
test.describe.configure({ mode: 'parallel' });
|
|
|
|
for (const fixtureName of listFixtures(path.join(customImageToolsFixtures, 'should-match')))
|
|
declareFixtureTest(customImageToolsFixtures, fixtureName, true /* shouldMatch */);
|
|
for (const fixtureName of listFixtures(path.join(customImageToolsFixtures, 'should-fail')))
|
|
declareFixtureTest(customImageToolsFixtures, fixtureName, false /* shouldMatch */);
|
|
});
|
|
}
|