Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Proposal: a noise-tolerant compare mode with pixelmatch 8's windowSize

オープン
  • 何か問題がありますか？
#1,311 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@plum117 がすでに取り組んでいます。

2026年10月9日 から。

評価

この issue はまだ評価されていません。

説明

enhancement

@wswebcreation, this is a proposal for v11, and I would like your approval (or your changes) before any code is written.

Problem

Today a check counts all different pixels and compares the percentage with a tolerance. This mixes 2 different things:

  • Noise: anti-aliasing, GPU dithering or font rendering change many single pixels all over the screenshot. The total can be larger than a small tolerance, so the check fails, and users increase the tolerance or use ignoreAntialiasing.
  • A real change in a small area (an icon, a badge, a few letters) changes few pixels in total, so a tolerance can hide it.

What pixelmatch 8 gives us

Since #1289 we use pixelmatch 8. It has a new option: with windowSize: N, pixelmatch returns the highest number of different pixels in any N×N square instead of the total (README). Scattered noise never fills one small square; a real change usually does.

Measured with pixelmatch 8.0.0 on a 1366×768 image, threshold: 0.1:

Change Total (what we report today) Max in one 16×16 window
A: 3 000 scattered single-pixel changes (like noise) 3 000 px = 0.286 % 6
B: one missing 16×16 icon 256 px = 0.024 % 256

With a tolerance of 0.05 %, today A fails and B passes. With windows, A is clearly noise and B is clearly a change.

Proposal

A new, optional compare option. Nothing changes when it is not set.

await expect(browser).toMatchScreenSnapshot('home', {
    windowSize: 16,          // compare in 16×16 windows
})

When windowSize is set:

  • The check returns the worst window as a percentage of the window area (6 / 256 = 2.3 % for A, 256 / 256 = 100 % for B). The existing tolerance semantics and matchers stay the same: "fail above X %", but X now means "of one window".
  • One pixelmatch pass is enough: pixelmatch still writes the diff image, and we already read the different pixels from it for the diff bounding boxes.
  • Ignore regions keep working: since #1301 they are a pixelmatch ignoreMask, so masked pixels are not in any window.
  • The diff image does not change (all different pixels are still marked).
  • With returnAllCompareData, the result also has the total, so users can see both numbers.

Questions for you

  1. Do you agree with this feature for v11?
  2. Name and place: windowSize as a compare option (method and service level), like the other compare options?
  3. Result: the worst window as a percentage of the window area (proposal above), or the pixel count (with a separate option for the limit)?
  4. Defaults: off by default (my proposal), or a recommended value in the docs (pixelmatch's example uses 16)?
  5. Reporter: show "worst window" next to the total in the visual reporter now, or later?

Scope

  • In: the option in @wdio/image-comparison-core and @wdio/visual-service, unit tests, a local e2e check with known images, docs (compare options on webdriver.io), the v11 guide, a minor changeset.
  • Out (later): the reporter display, if you prefer to keep it separate.
主要言語
TypeScript
スター
156
フォーク
62
平均マージ
2時間 2分
マージ済み PR（30日）
111

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

webdriverio/visual-testing のほかの issue

webdriverio/visual-testing の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。