Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Hammad Ghafoor says he wrote 187 tests across four suites for PixelMatch, a Chrome extension that compares a design mockup with a live page. Yet three user-facing failures escaped them: a visual blend that did not blend, a licence check that failed to revoke stored access, and an SVG that appeared at the wrong size. His account is a useful reminder that a passing assertion proves only what the test actually observed.
Why 187 passing tests did not catch the failures
In his DEV Community article, published October 5, 2026, Ghafoor describes tests that passed while the extension’s behavior was wrong. The issue was not simply the number of tests. Some checks observed a property or a prepared fixture rather than the outcome a user would see after the browser rendered a page, a licence state changed, or a real file was loaded.
As an Amazon Associate I earn from qualifying purchases.
The article’s central testing lesson is to match the check to the failure: inspect rendered pixels for a visual feature, exercise actual state transitions for persisted access, and examine the contents of files when browser-provided dimensions may be misleading. The three examples below are Ghafoor’s account, not an independently reproduced test report.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches1. The blend mode was set, but the page did not blend
What failed
PixelMatch placed an image in a closed shadow root and applied mix-blend-mode: difference. The computed style reported the expected value, so a test asserting that CSS property could pass. But the image appeared as ordinary rendering instead of blending against the page.
Ghafoor attributes the problem to the extension’s positioned host and high z-index: together, they created a stacking context that confined the blend to the host’s backdrop rather than the underlying page. As he put it, “The property was set. It was applied. It just had nothing to blend with.”
What changed—and what to test
The described fix was to avoid properties that trigger a stacking context on the host, put the necessary z-index on the child, and re-pin host properties that page CSS could otherwise override. The regression check samples screenshot pixels: where a red overlay matches red page pixels, the difference composite should be near-black.
This checks the user-visible result rather than the declaration. For a feature whose success is visual, a screenshot or pixel assertion can catch failures that computed-style checks cannot. The harness Ghafoor describes launches real Chrome, drives it through the Chrome DevTools Protocol, loads a deliberately hostile page, and captures screenshots; he says it uses Node’s WebSocket client without npm packages. Read Ghafoor’s DEV Community article for the described harness and implementation details.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →2. A failed licence check left Pro access stored
What failed
A licence validation failure displayed an error but left isPro: true in storage. The tests had created Pro state directly, skipping the activation and revocation flows where the inconsistency occurred.
What changed—and what to test
Ghafoor’s fix revokes access only when the currently stored key receives a definite invalid response. An inconclusive result—such as a network or configuration problem—should not downgrade the user. Tests should exercise activation, invalidation, and revocation, then inspect persisted storage after each real transition rather than relying on a fixture that starts in the desired state.
This distinction matters because “the check failed” can mean either “the key is invalid” or “the extension could not establish validity.” Treating those outcomes identically can revoke legitimate access during a transient failure; treating neither as a state transition can leave access enabled after definite invalidation.
3. An SVG loaded at an unexpected size
What failed
Ghafoor reports that an SVG containing only a viewBox could expose placeholder naturalWidth and naturalHeight values when loaded as an image. His example, viewBox="0 0 640 400", reportedly produced natural dimensions of 240×150 in Chrome 152. He attributes that result to default object sizing combined with the viewBox aspect ratio. This is the article author’s reported measurement; it has not been independently reproduced here.
What changed—and what to test
Instead of treating an image element’s natural dimensions as the source of truth, the described solution parses the SVG document. It uses explicit width and height only when both are valid positive pixel values; otherwise, it falls back to positive dimensions from the viewBox. Percentages and relative units are not accepted as pixel dimensions.
Best Value
A useful test therefore loads representative real SVG files and checks the dimensions the extension derives from their contents. It should cover explicit pixel dimensions, viewBox-only files, and values that cannot safely be interpreted as pixel sizes. This tests the input the feature actually receives, not a convenient synthetic object.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose assertions that observe the outcome
| What the test observes | What it can establish | What it can miss |
|---|---|---|
| Computed CSS property | The browser reports a declared or computed value such as mix-blend-mode: difference. |
Whether stacking contexts or page CSS prevent the intended visual composite. |
| Screenshot pixels | Whether rendered pixels show the expected visual result in the tested browser and page setup. | Behavior in untested pages, browser configurations, or visual conditions. |
| Fabricated licence state | Code behavior from a prearranged state, such as already having Pro access. | Whether activation, definite invalidation, and revocation update persisted state correctly. |
| State after an exercised licence flow | Whether the tested transition produces the expected stored access state. | Transitions and error classes the test does not exercise, including inconclusive network outcomes. |
| Image natural dimensions | The dimensions the browser reports for that loaded image. | Whether those values represent the SVG dimensions the extension needs. |
| Parsed real-file dimensions | Whether the SVG’s supported width, height, or viewBox values yield the intended dimensions. | Malformed or unusual files not included in the test set. |
How to apply the lesson to a browser extension
- For visual overlays: run the extension in a real browser and test rendered output, especially where host-page CSS, stacking contexts, or shadow DOM are involved.
- For persisted permissions or entitlements: exercise the user-facing transition and inspect storage afterward; distinguish a definite invalid result from an inability to validate.
- For file-derived behavior: use representative real inputs and parse the fields that define the behavior instead of assuming a browser convenience property captures the intended meaning.
- For hostile environments: test against pages that apply conflicting CSS, because an extension operates in a page it does not control.
These are not arguments against unit tests or computed-style assertions. Those checks remain useful for the behavior they cover. The gap appears when a test treats an intermediate condition—such as a CSS value or a preloaded storage flag—as proof of the final outcome.
Ghafoor reports 187 tests across four suites and three consequential bugs, but the count alone does not measure coverage or reliability. The more actionable question is whether each test observes the result that matters to the user.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
