Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date) - Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class - Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting - Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states - Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions - Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares) - Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline - Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements - Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations - Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary - Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds All tests follow AAA pattern and use data-testid selectors matching Angular version. Total: 245 tests across 10 feature suites.
pixelmatch
The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.
Features accurate anti-aliased pixels detection and perceptual color difference metrics.
Inspired by Resemble.js and Blink-diff. Unlike these libraries, pixelmatch is around 90 lines of code, has no dependencies, and works on raw arrays of image data, so it's blazing fast and can be used in any environment (Node or browsers).
var numDiffPixels = pixelmatch(img1, img2, diff, 800, 600, {threshold: 0.1});
Implements ideas from the following papers:
- Measuring perceived color difference using YIQ NTSC transmission color space in mobile applications (2010, Yuriy Kotsarenko, Fernando Ramos)
- Anti-aliased pixel and intensity slope detector (2009, Vytautas Vyšniauskas)
Example output
| expected | actual | diff |
|---|---|---|
API
pixelmatch(img1, img2, output, width, height[, options])
img1,img2— Image data of the images to compare (BufferorUint8Array).output— Image data to write the diff to, ornullif don't need a diff image.width,height— Width and height of the images. Note that all three images need to have the same dimensions.
options is an object literal with the following properties:
threshold— Matching threshold, ranges from0to1. Smaller values make the comparison more sensitive.0.1by default.includeAA— Iftrue, disables detecting and ignoring anti-aliased pixels.falseby default.
Compares two images, writes the output diff and returns the number of mismatched pixels.
Command line
Pixelmatch comes with a binary that works with PNG images:
pixelmatch image1.png image2.png output.png 0.1
Example usage
Node.js
var fs = require('fs'),
PNG = require('pngjs').PNG,
pixelmatch = require('pixelmatch');
var img1 = fs.createReadStream('img1.png').pipe(new PNG()).on('parsed', doneReading),
img2 = fs.createReadStream('img2.png').pipe(new PNG()).on('parsed', doneReading),
filesRead = 0;
function doneReading() {
if (++filesRead < 2) return;
var diff = new PNG({width: img1.width, height: img1.height});
pixelmatch(img1.data, img2.data, diff.data, img1.width, img1.height, {threshold: 0.1});
diff.pack().pipe(fs.createWriteStream('diff.png'));
}
Browsers
var img1 = img1Ctx.getImageData(0, 0, width, height),
img2 = img2Ctx.getImageData(0, 0, width, height),
diff = diffCtx.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffCtx.putImageData(diff, 0, 0);
Install
Install with NPM:
npm install pixelmatch
To build a browser-compatible version, clone the repository locally, then run:
npm install -g browserify
browserify -s pixelmatch index.js > pixelmatch.js