{"id":18254250,"url":"https://github.com/brikcss/shots","last_synced_at":"2025-04-08T21:47:22.989Z","repository":{"id":143745463,"uuid":"134081004","full_name":"brikcss/shots","owner":"brikcss","description":"UI regression / browser screenshot test tool.","archived":false,"fork":false,"pushed_at":"2018-11-08T20:43:20.000Z","size":135,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T18:04:45.208Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brikcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-19T16:55:49.000Z","updated_at":"2019-03-05T09:14:07.000Z","dependencies_parsed_at":"2023-07-29T08:32:31.364Z","dependency_job_id":null,"html_url":"https://github.com/brikcss/shots","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fshots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fshots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fshots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fshots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/shots/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934808,"owners_count":21020724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T10:11:14.558Z","updated_at":"2025-04-08T21:47:22.972Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shots\n\n\u003c!-- Shields. --\u003e\n\u003cp\u003e\n\t\u003c!-- NPM version. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/shots\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/shots.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- NPM downloads/month. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/shots\"\u003e\n\t\t\u003cimg alt=\"NPM downloads per month\" src=\"https://img.shields.io/npm/dm/@brikcss/shots.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Travis branch. --\u003e\n\t\u003ca href=\"https://github.com/brikcss/shots/tree/master\"\u003e\n\t\t\u003cimg alt=\"Travis branch\" src=\"https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Codacy. --\u003e\n\t\u003ca href=\"https://www.codacy.com/app/thezimmee/shots\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/codacy/grade/7684b158cc6c4497a2694d50883f36dc/master.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Coveralls --\u003e\n\t\u003ca href='https://coveralls.io/github/brikcss/shots?branch=master'\u003e\n\t\t\u003cimg src='https://img.shields.io/coveralls/github/brikcss/shots/master.svg?style=flat-square' alt='Coverage Status' /\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Commitizen friendly. --\u003e\n\t\u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n\t\t\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Semantic release. --\u003e\n\t\u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n\t\t\u003cimg alt=\"semantic release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Prettier code style. --\u003e\n\t\u003ca href=\"https://prettier.io/\"\u003e\n\t\t\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- MIT License. --\u003e\n\t\u003c!-- \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n\t\t\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/express.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\nShots is a browser screenshot tool, made especially to simplify visual UI regression testing. It tests in Google ([Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome)) with Google's [Puppeteer](https://github.com/GoogleChrome/puppeteer/) and compares screenshots with [Pixelmatch](https://github.com/mapbox/pixelmatch). The process is simple: Take baseline shots, run regression tests during development. When desired changes are made, easily approve screenshots to promote them as the new baseline.\n\n---\n\n## Environment support\n\n| Node   | CLI   | UMD   | ES Module | Browser   |\n|:------:|:-----:|:-----:|:---------:|:---------:|\n| ✔      | ✔    | x     | x         | x         |\n\n## Install\n\n```sh\nnpm install -D @brikcss/shots\n```\n\n## Methods\n\n### `baseline()`\n\nSets up baseline images which are used to compare with future shots.\n\nCLI:\n\n```sh\nshots baseline \u003coptions\u003e\n# or with NPM scripts:\nnpx shots baseline \u003coptions\u003e\n```\n\nNode:\n\n```js\nshots.baseline(options = {});\n```\n\n### `test()`\n\nRuns a regression test. Takes current screenshots and compares them against the set of baseline images.\n\nCLI:\n\n```sh\nshots test \u003coptions\u003e\n# or with NPM scripts:\nnpx shots test \u003coptions\u003e\n```\n\nNode:\n\n```js\nshots.test(options = {});\n```\n\n### `approve()`\n\nApproves the most recently run tests and promote them to baseline shots.\n\nCLI:\n\n```sh\nshots approve \u003coptions\u003e\n# or with NPM scripts:\nnpx shots approve \u003coptions\u003e\n```\n\nNode:\n\n```js\nshots.approve(options = {});\n```\n\n## Configuration options\n\n- `cases`  _{Array}_  **required**  Configuration for your test cases. Each test case requires an `id` and `path` property. The `id` determines the base filename, and `path` is the path to the page you wish to test.\n\n- `url`  _{String}_  `shots` requires you to set up and run your own local server. You may alternative use the local `file://` protocol. `config.url` simply tells `shots` where to find your app.\n\n- `viewports`  _{Array}_  A screenshot will be created for each viewport size. This setting is passed directly to Puppeteer's `page.setViewport(viewport)` method.\n\n- `beforeShot`  _{Function}_  `beforeShot(test, { browser, page, config }) =\u003e {}`  Callback which runs after Puppeteer has created the browser page and navigated to the URL, and before each screenshot is taken. This allows you to take full advantage of the Puppeteer API to manipulate the page before the shot is taken. Useful, for example, to only show the elements you wish to test.\n\n- `afterShot`  _{Function}_  `afterShot(test, { browser, page, config }) =\u003e {}`  Callback which runs immediately after each screenshot is taken and before the browser page closes. This allows you to tie in to Puppeteer's API to do anything you want.\n\n- `threshold`  _{Number}_  Number between `0` and `1`, passed directly to [pixelmatch](https://github.com/mapbox/pixelmatch) to set the threshold level at which a screenshot comparison will pass or fail.\n\n- `browserSync`  _{Object or Boolean}_  [Browser-sync](https://www.browsersync.io/) configuration. Some options are unavailable, as browser-sync only runs invisibly. Set to false to disable browser-sync, in which case you will need to manually run your own server before running shots.\n\n- `config`  _{String}_  Path to a config file to load. A config file must be a JS or JSON file which can be `require()`d by node.\n\n- `baseDir`  _{String}_  Directory to save baseline tests to.\n\n- `currentDir`  _{String}_  Directory to save the most recent test to.\n\n- `id`  _{String}_  _For the `approve()` method only._ Rather than approving all shots in a test set at once, use this setting to pass a comma-separated list of specific test IDs you wish to approve.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fshots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Fshots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fshots/lists"}