iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Hammad Ghafoor says 187 tests across four suites still missed three consequential bugs in PixelMatch, a Chrome extension that compares a design mockup with a live page. The failures were not proof that tests are useless; they showed that tests can pass while the rendered pixels, stored licence state, or interpretation of a real input file is wrong. His account points to a practical remedy: test the outcome users depend on, through the browser and real flows—not just a property, function return, or preloaded fixture.
Why 187 passing tests did not catch the three bugs
In his October 5, 2026 DEV Community article, Ghafoor describes 187 tests spread across four suites. That number is his report, not an independently validated quality measure or a benchmark for how many tests an extension needs. The important gap was what the tests observed: they did not expose three failures in the user-visible result or the real state transitions behind it.
PixelMatch overlays a design image on a live page so a user can compare the two. That makes browser compositing, extension storage, and the dimensions of an actual image file part of the feature—not incidental implementation details. Ghafoor’s examples show how a test can verify that code ran or a CSS value was set without establishing that the extension behaved correctly.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →1. The difference blend mode was set but did not blend with the page
PixelMatch put its overlay image inside a closed shadow root and applied mix-blend-mode: difference. Ghafoor says the extension’s positioned host, with a high z-index, created a stacking context. As a result, the blend was confined to the host’s backdrop rather than interacting with the underlying page. The computed style still reported difference, even though the image appeared to render normally.
#1 Best Overall
- FOR HOME, WORK, & SCHOOL – With an Intel processor, 14-inch display, custom-tuned stereo speakers, and long battery life, this Chromebook laptop lets you knock out any assignment or binge-watch your favorite shows..Voltage:5.0 volts
- HD DISPLAY, PORTABLE DESIGN – See every bit of detail on this micro-edge, anti-glare, 14-inch HD (1366 x 768) display (1); easily take this thin and lightweight laptop PC from room to room, on trips, or in a backpack.
- ALL-DAY PERFORMANCE – Reliably tackle all your assignments at once with the quad-core, Intel Celeron N4120—the perfect processor for performance, power consumption, and value (2).
- 4K READY – Smoothly stream 4K content and play your favorite next-gen games with Intel UHD Graphics 600 (3) (4).
- MEMORY AND STORAGE – Enjoy a boost to your system’s performance with 4 GB of RAM while saving more of your favorite memories with 64 GB of reliable flash-based eMMC storage (5).
As Ghafoor put it, “The property was set. It was applied. It just had nothing to blend with.” A test that only reads the computed style would therefore confirm the declaration, not the visual effect.
What the fix and regression check targeted
Ghafoor says he removed stacking-context-triggering properties from the host, placed the necessary z-index on the child instead, and re-pinned host properties that could be overridden by hostile page CSS. For regression coverage, he proposed sampling screenshot pixels and checking that a red overlay pixel composited with a matching red page pixel becomes near-black under difference blending.
The distinction is between checking a CSS instruction and checking what the browser actually painted. For a visual feature, a screenshot-based assertion is closer to the user’s observable outcome.
Rank #2
- Intel Celeron N4120: 4 Cores & Threads, 1.1GHz Base Clock, Up to 2.6GHz Boost Clock, 4MB Cache, Intel UHD Graphics 600. The perfect combination of performance, power consumption, and value helps your device handle multitasking smoothly and reliably with four processing cores to divide up the work.
2. A failed licence check left Pro access stored
In the second failure, a licence validation error was shown to the user, but storage still contained isPro: true. The tests had created Pro state directly rather than exercising activation and revocation, so they did not catch the mismatch between the displayed error and the retained entitlement.
Test the transition, not a convenient starting state
Ghafoor describes changing the logic so access is revoked after a definite invalid response for the key currently stored. An inconclusive result—such as a network or configuration problem—does not trigger a downgrade. This separates evidence that a key is invalid from the inability to check it.
A meaningful test should exercise the flow that changes the state: activate a key, persist the result, then validate or invalidate it and inspect storage afterward. Setting isPro directly can be useful for testing a view in isolation, but it cannot establish that the real activation and revocation paths keep the stored state consistent.
Rank #3
- Storage: 16GB Flash Memory
- OS: Chrome OS
- Screen Size: 11.6"
3. SVG natural dimensions did not represent the intended size
The third failure involved an SVG that had a viewBox but no explicit pixel width and height. Ghafoor reports that when loaded as an image, it could expose placeholder naturalWidth and naturalHeight values instead of the dimensions the extension needed. His example is viewBox="0 0 640 400", reported as 240×150 natural dimensions in Chrome 152. That is the author’s browser measurement; it was not independently reproduced.
Free tools Windows power users keep installed
One-click scans. No signup required.
Read dimensions from the SVG document
Rather than treating the browser’s image dimensions as the source of truth, Ghafoor describes parsing the SVG document. The approach uses positive pixel values when both explicit width and height are valid, then falls back to positive dimensions from the viewBox. Values such as percentages and relative units are not accepted as pixel sizes.
The testing lesson is to use the actual input format when the feature depends on its contents. A test fixture that supplies dimensions directly—or only checks a browser-reported image size—may bypass the parsing behavior that real files require.
Rank #4
- Processor and Memory Configuration: Features an Intel Celeron 3865U Processor with 4GB DDR4 Memory, Gigabit LAN, 802.11ac Wi-Fi and 32GB M.2 SATA SSD
- Android App Compatibility: Full support of Android apps from Google play on Chrome OS
- 4K UHD Graphics Display Support: Integrated Intel 4K UHD Graphics supports 2x monitors using HDMI and DisplayPort over Type C for compatibility with legacy Display connections like VGA and DVI
- Wireless Connectivity and File Sharing: Share files or stream your favorite media with Intel 802.11ac Wi-Fi, Bluetooth 4.2, and USB 3.1 Gen 1 Type a & Type C Ports
- Power Over Type C Technology: Power over Type C minimizes cable clutter and delivers power to monitors, projectors, and mobile devices
How the harness made browser behavior testable
Ghafoor says his harness starts real Chrome, drives it through the Chrome DevTools Protocol, loads a deliberately hostile page, and captures screenshots for pixel assertions. He describes using Node’s WebSocket client without npm packages. This approach brings browser rendering and page interference into the test rather than assuming a clean, controlled page will behave like the pages where an extension runs.
The techniques address different kinds of evidence:
| Check | What it establishes | What it can miss |
|---|---|---|
| Computed CSS style | The browser reports a property value, such as mix-blend-mode: difference. |
Whether the property produces the intended pixels in the page’s stacking and compositing context. |
| Screenshot pixel assertion | The rendered composite has expected visual properties at sampled pixels. | Behavior outside the captured scenario or pixels being checked. |
| Preloaded licence state | A view or function handles a chosen stored value. | Whether activation, validation, and revocation correctly update persistent storage. |
| Exercised licence transition | The real flow changes state as expected, including the resulting stored value. | Scenarios not included in the tested responses, such as unhandled error conditions. |
| Image natural dimensions | The browser exposes dimensions for an image loaded from an SVG. | Whether those values reflect the SVG dimensions the feature intends to use. |
| Parsed SVG dimensions | The extension reads supported width and height or viewBox values from the file. | Malformed or unsupported SVG structures unless those cases are covered separately. |
The table describes the checks in Ghafoor’s account, not a guarantee that any single testing technique proves correctness. Screenshot assertions need representative browser conditions; state-flow tests need relevant success, invalid, and inconclusive outcomes; file parsing tests need inputs that exercise the supported and rejected forms.
What extension developers can take from the failures
- Choose assertions that match the feature. If success is visual, inspect rendered pixels rather than stopping at a computed style.
- Exercise state transitions. Test activation, invalidation, and revocation through their real paths, then inspect persisted storage.
- Keep failure categories distinct. A definite invalid licence response is different from an inconclusive network or configuration result.
- Use realistic inputs. When the feature depends on file contents, test parsing of real-format documents rather than only convenient fixtures.
- Challenge the environment. Run an extension in real Chrome against pages with hostile CSS when page styles can interfere with its overlay.
Ghafoor’s account is a set of concrete implementation examples, not an independent study of testing effectiveness. Its useful point is narrower and more actionable: a test suite is only as informative as the outcomes and flows it observes.
Quick Recap
Read Hammad Ghafoor’s article on DEV Community.
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.
