[{"_1":2,"_163":-5,"_164":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_138":139},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":-5,"_85":86,"_131":-5,"_132":11,"_133":17,"_134":11,"_135":-5,"_136":137},"canonicalUrl","https://hub.docker.com/r/iain17/backstopjs/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","iain17","reponame","backstopjs","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":17,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2018-03-23T10:25:51.483081Z","description","-","is_private","last_updated","2018-03-27T09:25:13.301438Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",267,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","[![Build Status](https://travis-ci.org/garris/BackstopJS.svg?branch=master)](https://travis-ci.org/garris/BackstopJS)\n\n# BackstopJS\n![I'm in your webapps -- checkin your screens](http://garris.github.io/BackstopJS/assets/memes/im-in-ur-webapps-checking-ur-screens.jpg)\n\nBackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.\n\n## Version 3 Features\n\n- Render with **Chrome Headless**, **Phantom** and **Slimer**\n- Simulate user interactions with **ChromyJS** and **CasperJS** scripts\n- Browser reports with visual diffs\n- CLI reports\n- JUnit reports\n- Plays nice with CI and source control\n- Run globally or locally as a standalone package app or `require('backstopjs')` right into your node app\n- Incredibly easy to use: just 3 commands go a long long way!\n\n\n## Install BackstopJS now\n```sh\n$ npm install -g backstopjs\n```\n\n----\n\n## Contents\n\n[The BackstopJS workflow](#the-backstopjs-workflow)\n\n[Installation](#installation)\n\n[Getting Started](#getting-started)\n\n[Using BackstopJS](#using-backstopjs)\n\n[Troubleshooting](#troubleshooting)\n\n[Tutorials, Extensions and more](#tutorials-extensions-and-more)\n\n[Credits](#credits)\n\n----\n\n## The BackstopJS workflow\n\n - **`backstop init`:** Set up a new BackstopJS instance -- specify URLs, cookies, screen sizes, DOM selectors, interactions etc. (see examples directory)\n\n - **`backstop test`:** BackstopJS creates a set of *test* screenshots and compares them with your *reference* screenshots. Any changes show up in a visual report. (Run this after making CSS changes as many times as needed.)\n\n - **`backstop approve`:** If the test you ran looks good, then go ahead and approve it. Approving changes will update your reference files with the results from your last test. Future tests are compared against your most recent approved test screenshots.\n\n\n## Getting started\n### Installation\n\n_[Chrome 62 or greater is required](https://www.google.com/chrome/browser)_\n\n#### Global installation (recommended)\n```sh\n$ npm install -g backstopjs\n```\n#### Local installation\n\nBackstopJS will run as a totally stand alone app -- but installing locally allows you to do this...\n```js\nconst backstop = require('backstopjs');\n```\n\nSee [Integration Options](#integration-options-local-install) to learn about cool BackstopJS integration options!\n\n\n### Initializing your project\n\n**If you don't already have BackstopJS set up...**\nBackstopJS can create a default configuration file and project scaffolding in your current working directory. Please note: this will overwrite any existing files!\n\n`cd` to your project's directory and run...\n\n```sh\n$ backstop init\n```\n\n\n### Working with your config file\n\nBy default, BackstopJS places `backstop.json` in the root of your project. And also by default, BackstopJS looks for this file when invoked.\n\n#### Required config properties\n\nAs a new user setting up tests for your project, you will be primarily concerned with these properties...\n\n**`id`** – Used for screenshot naming. Set this property when sharing reference files with teammates -- otherwise omit and BackstopJS will auto-generate one for you to avoid naming collisions with BackstopJS resources.\n\n**`viewports`** – An array of screen size objects your DOM will be tested against. Add as many as you like -- but add at least one.\n\n**`scenarios`** – This is where you set up your actual tests. The important sub properties are...\n\n- **`scenarios[n].label`** – Required. Also used for screenshot naming.\n- **`scenarios[n].url`** – Required. Tells BackstopJS what endpoint/document you want to test. This can be an absolute URL or local to your current working directory.\n\n_TIP: no other SCENARIO properties are required. Other properties can just be added as necessary_\n\n### Generating test bitmaps\n\n```sh\n$ backstop test\n```\n\nThis will create a new set of bitmaps in `bitmaps_test//`\n\nOnce the test bitmaps are generated, a report comparing the most recent test bitmaps against the current reference bitmaps will display.\n\nPass a `--config=` argument to test using a different config file.\n\n**Tip** To use a js-module as a config file, just explicitly specify your config filepath and point to a `.js` file. _Just be sure to export your config object as a node module._\n\nPass a `--filter=` argument to just run scenarios matching your scenario label.\n\n\n### Approving changes\n\n```sh\n$ backstop approve\n```\n\nWhen running this command, all images (with changes) from your most recent test batch will be promoted to your reference collection. Subsequent tests will be compared against your updated reference files.\n\nPass a `--filter=` argument to promote only the test captures matching your scenario label.\n\n**Tip**: Remember to pass a `--config=` argument if you passed that when you ran your last test.\n\n\n\n## Using BackstopJS\n\n### Advanced Scenarios\nScenario properties are described throughout this document and **processed sequentially in the following order...**\n```js\nlabel // [required] Tag saved with your reference images\nonBeforeScript // Used to set up browser state e.g. cookies.\ncookiePath // import cookies in JSON format (available with default onBeforeScript see setting cookies below)\nurl // [required] The url of your app state\nreferenceUrl // Specify a different state or environment when creating reference.\nreadyEvent // Wait until this string has been logged to the console.\nreadySelector // Wait until this selector exists before continuing.\ndelay // Wait for x milliseconds\nhideSelectors // Array of selectors set to visibility: hidden\nremoveSelectors // Array of selectors set to display: none\nonReadyScript // After the above conditions are met -- use this script to modify UI state prior to screen shots e.g. hovers, clicks etc.\nhoverSelector // Move the pointer over the specified DOM element prior to screen shot (available with default onReadyScript)\nclickSelector // Click the specified DOM element prior to screen shot (available with default onReadyScript)\npostInteractionWait // Wait for a selector after interacting with hoverSelector or clickSelector (optionally accepts wait time in ms. Idea for use with a click or hover element transition. available with default onReadyScript)\nselectors // Array of selectors to capture. Defaults to document if omitted. Use \"viewport\" to capture the viewport size. See Targeting elements in the next section for more info...\nselectorExpansion // See Targeting elements in the next section for more info...\nmisMatchThreshold // Percentage of different pixels allowed to pass test\nrequireSameDimensions // If set to true -- any change in selector size will trigger a test failure.\n```\n\n\n### Testing click and hover interactions\nBackstopJS ships with an onReady script that enables the following interaction selectors...\n```\nclickSelector: \".my-hamburger-menu\",\nhoverSelector: \".my-hamburger-menu .some-menu-item\",\n```\nThe above would tell BackstopJS to wait for your app to generate an element with a `.my-hamburger-menu` class, then click that selector. Then it would wait again for a `.my-hamburger-menu .some-menu-item` class, then move the cursor over that element (causing a hover state). Then BackstopJS would take a screenshot.\n\nYou can use these properties independent of each other to easily test various click and or hover states in your app. These are obviously simple scenarios -- if you have more complex needs then this example should serve as a pretty good starting point create your own onReady scripts.\n\n\n### Setting cookies\nBackstopJS ships with an onBefore script that makes it easy to import cookie files…\n```\ncookiePath: \"backstop_data/engine_scripts/cookies.json\",\n```\n_note: path is relative to your current working directory_\n\nPro tip: If your app uses a lot of cookies then do yourself a favor and download this extension for chrome. It adds a tab to your dev-tools so you can download all your cookies as a JSON file that you can directly use with BackstopJS https://chrome.google.com/webstore/detail/cookie-inspector/jgbbilmfbammlbbhmmgaagdkbkepnijn?hl=en\n\n\n\n\n### Targeting elements\n\nBackstopJS makes it super easy to capture screenshots of your entire layout or just parts of your layout. This is defined in the your scenario.selectors array. Elements are defined with standard CSS notation. By default BackstopJS takes a screenshot of the first occurrence of any selector found in your DOM. e.g. If you have three `li` tags in your layout only the first will used.\n\n#### selectorExpansion\nIf you want BackstopJS to find and take screenshots of _all_ matching selector instances then there is a handy switch for that. Set `selectorExpansion` to `true` like so...\n```json\nscenarios: [\n {\n \"selectors\": [\n \".aListOfStuff li\"\n ],\n \"selectorExpansion\": true\n }\n]\n// captures all

tags inside .aListOfStuff\n```\n(Default behavior) If you want very explicit control of what you capture then you can disable `selectorExpansion` and explicitly select what you want...\n\n```json\nscenarios: [\n {\n \"selectors\": [\n \".aListOfStuff li\"\n ],\n \"selectorExpansion\": false\n }\n]\n// Just captures the first

tag inside .aListOfStuff\n```\n\n\n### Testing Progressive apps, SPAs and AJAX content\n\nIt is very common for client-side web apps is to initially download a small chunk of bootstrapping code/content/state and render it to the screen as soon as it arrives at the browser. Once this has completed, various JS components often take over to progressively load more content/state.\n\nThe problem testing these scenarios is knowing _when_ to take the screenshot. BackstopJS solves this problem with two config properties: `readySelector`, `readyEvent` and `delay`.\n\n#### Trigger screen capture via selector\n\nThe `readySelector` property tells BackstopJS to wait until a selector exists before taking a screenshot. For example, the following line will delay screen capture until a selector with the id '#catOfTheDayResult' is present somewhere in the DOM.\n\n```json\n\"readySelector\": \"#catOfTheDayResult\"\n```\n\nAnother approach might look like this...\n\n```json\n\"readySelector\": \"body.ember-has-rendered\"\n```\n\n#### Trigger screen capture via console.log()\n\nThe `readyEvent` property enables you to trigger the screen capture by logging a predefined string to the console. For example, the following line will delay screen capture until your web app calls `console.log(\"backstopjs_ready\")`...\n\n```json\n\"readyEvent\": \"backstopjs_ready\"\n```\n\nIn the above case it would be up to you to wait for all dependencies to complete before calling logging `\"backstopjs_ready\"` string to the console.\n\n\n#### Delay screen capture\n\nThe `delay` property enables you to pause screen capturing for a specified duration of time. This delay is applied after `readyEvent` (if also applied).\n\n```js\n\"delay\": 1000 //delay in ms\n```\n\nIn the above case, BackstopJS would wait for one second before taking a screenshot.\n\nIn the following case, BackstopJS would wait for one second after the string `backstopjs_ready` is logged to the console.\n\n```js\n{\n // ...\n \"readyEvent\": \"backstopjs_ready\",\n \"delay\": 1000 //delay in ms\n // ...\n}\n```\n\n\n### Dealing with dynamic content\n\nFor obvious reasons, this screenshot approach is not optimal for testing live dynamic content. The best way to test a dynamic app would be to use a known static content data stub – or ideally many content stubs of varying lengths which, regardless of input length, should produce certain specific bitmap output.\n\n#### Hiding selectors\n\nThat said, for a use case where you are testing a DOM with say an ad banner or a block of dynamic content which retains static dimensions, we have the `hideSelectors` property in `capture/config.json` which will set the corresponding DOM to `visibility:hidden`, thus hiding the content from our Resemble.js analysis but retaining the original layout flow.\n\n```json\n\"hideSelectors\": [\n \"#someFixedSizeDomSelector\"\n]\n```\n\n#### Removing selectors\nThere may also be elements which need to be completely removed during testing. For that we have `removeSelectors` which removes them from the DOM before screenshots.\n\n```json\n\"removeSelectors\": [\n \"#someUnpredictableSizedDomSelector\"\n]\n```\n\n### Changing test sensitivity\n`\"misMatchThreshold\"` (percentage 0.00%-100.00%) will change the amount of difference BackstopJS will tolerate before marking a test screenshot as \"failed\". The default setting is `0.1`, this may need to be adjusted based on the kinds of testing you're doing.\n\nMore info on how misMatchThreshold is derived can be found here... https://github.com/Huddle/Resemble.js/blob/af57cb2f4edfbe718d24b350b2be1d956b764298/resemble.js#L495\n\n`\"requireSameDimensions\"` (true || false) will change whether BackstopJS will accept any change in dimensions. The default setting is `true`. If set to true then the test must be the same dimensions as the reference. If set to false the test does not have to be the same dimensions as the reference.\n\nThis setting can be used in conjunction with `\"misMatchThreshold\"`, for example, when setting a `\"misMatchThreshold\"` of more than 0.00% and the mismatch causing a change in dimensions, setting `\"requireSameDimensions\"` to false will allow the test to still pass, setting it to true would still make it fail.\n\n\n### Capturing the entire document or just the viewport, or just an element, or a combination.\nBackstopJS recognizes two magic selectors: `document` and `viewport` -- these capture the entire document and just the current specified viewport respectively. e.g.\n\n```js\n\"scenarios\": [\n {\n \"selectors\": [\n \"document\",\n \"viewport\",\n \"#myFeature\",\n // ...\n ],\n // ...\n }\n]\n```\n\n\n### Testing across different environments\nComparing against different environments is easy. (e.g. compare a production environment against a staging environment).\n\nYou can create reference files (without previewing) by using the command `backstop reference`. By default this command calls the `url` property specified in your config. Optionally, you can add a `referenceUrl` property to your scenario configuration. If found, BackstopJS will use `referenceUrl` for screen grabs when running `$ backstop reference`.\n\n```js\n\"scenarios\": [\n {\n \"label\": \"cat meme feed sanity check\",\n \"url\": \"http://www.moreCatMemes.com\",\n \"referenceUrl\": \"http://staging.moreCatMemes.com:81\",\n // ...\n }\n]\n```\n\n\n### Running custom scripts\n\nSimulate user actions (click, scroll, hover, wait, etc.) or states (cookie values) by running your own Casper.js script on ready. For each scenario, the custom .js file you specify is imported and run when the BackstopJS ready events are fulfilled.\n\nFrom your project root, place your scripts in...\n\n```sh\n./backstop_data/engine_scripts\n```\n\nat the root of your config or in your scenario...\n\n```js\n\"onReadyScript\": \"filename.js\" // Runs after onReady event on all scenarios -- use for simulating interactions (.js suffix is optional)\n\"onBeforeScript\": \"filename.js\" // Runs before each scenario -- use for setting cookies or other env state (.js suffix is optional)\n\"scenarios\": [\n {\n \"label\": \"cat meme feed sanity check\",\n \"onReadyScript\": \"filename.js\" // If found will run instead of onReadyScript set at the root (.js suffix is optional)\n \"onBeforeScript\": \"filename.js\" // If found will run instead of onBeforeScript at the root (.js suffix is optional)\n // ...\n }\n]\n```\n\n\nInside `filename.js`, structure it like this:\n\n```js\n// onBefore example\nmodule.exports = function(casper, scenario, vp) {\n // scenario is the current scenario object being run from your backstop config\n // vp is the current viewport object being run from your backstop config\n\n // Example: setting cookies\n casper.echo(\"Setting cookies\");\n casper.then(function(){\n casper.page.addCookie({name: 'cookieName', value: 'cookieValue'});\n });\n}\n\n// onReady example\nmodule.exports = function(casper, scenario, vp) {\n // Example: Adding script delays to allow for things like CSS transitions to complete.\n casper.echo( 'Clicking button' );\n casper.click( '.toggle' );\n casper.wait( 250 );\n\n // Example: changing behavior based on config values\n if (vp.label === 'phone') {\n casper.echo( 'doing stuff for just phone viewport here' );\n }\n\n // ...do other cool stuff here, see Casperjs.org for a full API and many ideas.\n}\n```\n\n#### Setting the base path for custom onBefore and onReady scripts\n\nBy default the base path is a folder called `engine_scripts` inside your BackstopJS installation directory. You can override this by setting the `paths.scripts` property in your `backstop.json` file to point to somewhere in your project directory (recommended).\n\n_**NOTE:** SlimerJS currently requires an absolute path -- so be sure to include the full path when using the `\"engine\": \"slimer\"` configuration option._\n\n```json\n\"paths\": {\n \"engine_scripts\": \"backstop_data/engine_scripts\"\n}\n```\n\n\n### Reporting workflow tips\n\nOne testing approach to consider is incorporating BackstopJS into your build process and just let the CLI report run on each build or before each deploy.\n\nIt's natural for your layout to break while you're in feature development -- in that case you might just run a `backstop test` when you feel things should be shaping up.\n\nUsing the `report` property in your config to enable or disable browser including/excluding the respective properties. E.G. The following settings will open a browser and write a junit report.\n\n```json\n\"report\": [\"browser\", \"CI\"]\n```\n\nIf you choose the CI-only reporting or even no reporting (CLI is always on) you can always enter the following command to see the latest test run report in the browser.\n\n```sh\n$ backstop openReport\n```\n\n#### Test report integration with a build system like Jenkins/Travis\n\nThe following config would enable the CI - report (*default: junit format*)\n\n```json\n\"report\" : [ \"CI\" ],\n```\n\nThe regression test report will be generated in the JUnit format and the report will be placed in the given directory (*default: [backstopjs dir]/test/ci_report/xunit.xml*).\n\nYou may customize the testsuite name and/or a report file (xunit.xml) path to your build report directory by using the below configuration overrides,\n\n```js\n\"paths\": {\n \"ci_report\" : \"backstop_data/ci_report\"\n},\n\"ci\": {\n \"format\" : \"junit\" ,\n \"testReportFileName\": \"myproject-xunit\", // in case if you want to override the default filename (xunit.xml)\n \"testSuiteName\" : \"backstopJS\"\n},\n```\n\n#### CLI error handling\n\nWhen a layout error is found in CLI mode, BackstopJS will let you know in a general report displayed in the console. In addition, BackstopJS will return a 1 (error) to the calling CLI process.\n\n### Setting the bitmap and script directory paths\nBy default, BackstopJS saves generated resources into the `backstop_data` directory in parallel with your `backstop.json` config file. The location of the various resource types are configurable so they can easily be moved inside or outside your source control or file sharing environment. See below for options...\n\n**Tip**: these file paths are relative to your current working directory._\n\n```json\n ...\n \"paths\": {\n \"bitmaps_reference\": \"backstop_data/bitmaps_reference\",\n \"bitmaps_test\": \"backstop_data/bitmaps_test\",\n \"engine_scripts\": \"backstop_data/engine_scripts\",\n \"html_report\": \"backstop_data/html_report\",\n \"ci_report\": \"backstop_data/ci_report\"\n }\n ...\n```\n\n### Changing the rendering engine\nBackstopJS supports using Chrome-Headless, PhantomJS or SlimerJS for web app rendering. Chrome-headless (chromy) is currently the default value and will be installed by default.\n\n#### Chrome-Headless (The latest webkit library)\nThis will also enable the very cool _chromy.js_ (https://github.com/OnetapInc/chromy) library. (When creating onBefore and onReady scripts please make sure you are referring to the [Chromy script documentation](https://github.com/OnetapInc/chromy). Casper features will not work with this setting.)\n\n**You must also have [Chrome 62 or greater installed!](https://www.google.com/chrome/browser/beta.html).**\n```json\n\"engine\": \"chrome\"\n```\n\n#### Slimer (Gecko/Mozilla rendering)\nTo run in Slimer, be sure to have SlimerJS installed. From your root directory run...\n\n```sh\n$ npm install -g slimerjs\n```\n\nThen, in your `backstop.json` config file, update the engine property to...\n\n```json\n\"engine\": \"slimerjs\"\n```\nThat's it.\n\n\n### Setting Casper command-line flags\nSee casperjs documentation for more info on instance options. An example config below...\n\n```json\n\"casperFlags\": [\n \"--engine=slimerjs\",\n \"--proxy-type=http\",\n \"--proxy=proxyIp:port\",\n \"--proxy-auth=user:pass\"\n]\n```\n\n### Setting Chromy option flags\nChromy enables a lot of behavior via constructor options. See Chromy documentation for more info.\n\n**NOTE:** Backstop sets defaults for many Chromy properties. Setting a parameter value with engineOptions will override any default value set by backstop. _But please watch out for the following..._\n- (TLDR) Setting `port` as a chromy option flag is _very_ _very_ not advised. Instead, consider changing the `startingPort` property in the Backstop configuration. e.g. `\"startingPort\": 9333`\n- Setting `chromeFlags` will override all chromeFlags properties set by backstop -- **EXCEPT FOR `--window-size`***... (i.e. `--window-size` flag will be added by backstop if not found in chromeFlags)\n- Setting `--window-size` explicitly in `chromeFlags` will override values used in your viewport settings.\n\n\nAn example config below...\n\n```js\n\"engineOptions\": {\n waitTimeout: 120000,\n chromePath: /path/to/chrome,\n chromeFlags: ['--disable-gpu', '--force-device-scale-factor=1']\n}\n```\n\n### Using Chromy static functions\nTo access use of Chromys static functions (such as addCustomDevice) the static chromy reference is sent as the fifth parameter to your onBefore/onReady scripts.\n\nExample usage:\n\n```\nmodule.exports = function (chromy, scenario, vp, isReference, chromyStatic) {\n if(vp.label === \"phone\") {\n chromyStatic.addCustomDevice({ name: \"some-phone\", /.../ });\n chromy.emulate(\"some-phone\");\n }\n}\n```\nFor more info, see the [Chromy script documentation](https://github.com/OnetapInc/chromy).\n\n### Integration options (local install)\n\nInstalling BackstopJS locally to your project makes a few integration options available.\n\nUsing Backstop as a locally installed standalone app looks like this....\n\n```\n# Install from your project root\nnpm install backstopjs\n\n# Then, run commands by directly calling the cli\n./node_modules/backstopjs/cli/index.js test --config=\n```\n\nThe more interesting case is calling backstop from another node app...\n\n```js\nconst backstop = require('backstopjs');\n```\n\n#### Invoke default behavior in the current working directory context\n```js\nbackstop('test')\n .then(() => {\n // test successful\n }).catch(() => {\n // test failed\n });\n```\n\n#### Pass options to the command\n```js\nbackstop('test', {config:'custom/backstop/config.json'});\n```\n\n#### Pass a config object to the command\n```js\n// you can also pass a literal object\nbackstop('test', {\n config: {\n id: \"foo\",\n scenarios: [\n //some scenarios here\n ]\n }\n});\n```\n\n#### The `--filter` argument still works too -- just pass a `filter` prop instead.\n```js\n// you can also pass a literal object\nbackstop('test', {\n filter: 'someScenarioLabelAsRegExString',\n config: {\n id: \"foo\",\n scenarios: [\n //some scenarios here\n ]\n }\n});\n```\n\n#### Parse a config file explicitly\n```js\nbackstop('test', {\n config: require(\"./backstop.config.js\")({\n \"foo\": \"bar\"\n })\n});\n\n\n// Inside of `backstop.config.js` we export a function that returns the configuration object\nmodule.exports = options => {\n return {\n //you can access options.foo here\n }\n}\n```\n\n#### Since the backstop returns promises so it can run natively as a task in build systems like gulp\n```js\nconst gulp = require('gulp');\nconst backstopjs = require('backstopjs');\n\ngulp.task('backstop_reference', () => backstopjs('reference'));\ngulp.task('backstop_test', () => backstopjs('test'));\n```\n\n#### Using npm run scripts\n\nWhen BackstopJS is installed locally, NPM will recognize the `backstop ` pattern originating from your own npm `package.json` scripts. The following would enable you to run the respective `npm ` commands locally in your project.\n\n```json\n\"scripts\": {\n \"approve\": \"backstop approve\",\n \"test\": \"backstop test\",\n \"init\": \"backstop init\"\n}\n```\n\nThe above is a basic example -- check out the NPM documentation for more info.\n\n### Tuning BackstopJS performance\nDuring a test, BackstopJS processes image capture and image comparisons in parallel. You can adjust how","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",2822499683,"orgData","recentTags",[87,125],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":96,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},"content_type","creator",520733,"full_size",750054750,"id",24403140,"images",[97],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},"architecture","amd64","digest","sha256:f3e052c6c3b64f94305cbe6ded1c69de2ca6617e45bf3a2e3acf2c7409f42474","features","","last_pulled","2026-08-29T15:49:05.859806418Z","last_pushed","2018-03-27T09:25:13Z","os","linux","os_features","os_version","size","variant","2018-03-27T09:25:12.996913Z","last_updater","last_updater_username","media_type","latest","repository",4985519,"tag_last_pulled","tag_last_pushed","tag_status","v2",{"_88":40,"_89":90,"_91":92,"_93":126,"_95":127,"_46":129,"_115":90,"_116":29,"_117":52,"_53":130,"_119":120,"_121":105,"_122":129,"_123":62,"_124":17},24403185,[128],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},"2018-03-27T09:25:12.308268Z","puppeteer","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":140,"_147":148,"_136":161,"_162":11},{"_36":141,"_38":142,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":143,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":144,"_75":17,"_76":146,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":145},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_149":150,"_151":-5,"_152":-5,"_153":154},"count",2,"next","previous","results",[155,158],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":156,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},[157],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},{"_88":40,"_89":90,"_91":92,"_93":126,"_95":159,"_46":129,"_115":90,"_116":29,"_117":52,"_53":130,"_119":120,"_121":105,"_122":129,"_123":62,"_124":17},[160],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},[],"canDeleteTags","actionData","errors"]

iain17/backstopjs

Tags for iain17/backstopjs