Chromascope is a tool for visualizing the diff of a given URL between chromium, webkit, and firefox. It uses Playwright to capture the screenshots and pixelmatch to compare them.
Can be installed globally with pnpm|npm|yarn:
pnpm add -g chromascope
npm i -g chromascope
yarn global add chromascope
or run it directly with npx:
npx chromascope <command> [options]
$ chromascope --help
chromascope/x.x.x
Usage:
$ chromascope <command> [options]
Commands:
diff <url> Diff the URL in chromium, firefox, and webkit. Using chromium as the base.
For more info, run any command with the `--help` flag:
$ chromascope diff --help
Options:
-h, --help Display this message
-v, --version Display version number
$ chromascope diff --help
chromascope/x.x.x
Usage:
$ chromascope diff <url>
Options:
-e, --element <selector> Diff only the element with the given selector
-f, --full-page Take a full page screenshot
-v, --verbose Show more output
-c, --cookie <cookie> Add one or more cookies to the context. Format: key=value;key2=value2
-s, --save-diff Save generated diff as png
-t, --threshold <threshold> Set the threshold for the diff (default: 0.2)
-f, --folder <folder> Set the base folder for chromascope runs (default: chromascope-runs)
-h, --help Display this message