{"id":22825858,"url":"https://github.com/wlsf82/backstop-config","last_synced_at":"2025-04-23T08:15:06.064Z","repository":{"id":37177275,"uuid":"142637124","full_name":"wlsf82/backstop-config","owner":"wlsf82","description":"A simple implementation of BackstopJS for running screenshot comparison tests on static websites.","archived":false,"fork":false,"pushed_at":"2023-03-04T02:45:40.000Z","size":3314,"stargazers_count":36,"open_issues_count":6,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T08:14:59.156Z","etag":null,"topics":["backstopjs","screenshot-comparison-tests","software-testing","test-automation","testing","visual-regression-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wlsf82.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-07-28T01:30:07.000Z","updated_at":"2024-12-05T03:41:02.000Z","dependencies_parsed_at":"2024-12-12T17:22:29.712Z","dependency_job_id":null,"html_url":"https://github.com/wlsf82/backstop-config","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/wlsf82%2Fbackstop-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fbackstop-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fbackstop-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fbackstop-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wlsf82","download_url":"https://codeload.github.com/wlsf82/backstop-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250395285,"owners_count":21423400,"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":["backstopjs","screenshot-comparison-tests","software-testing","test-automation","testing","visual-regression-testing"],"created_at":"2024-12-12T17:12:19.090Z","updated_at":"2025-04-23T08:15:06.044Z","avatar_url":"https://github.com/wlsf82.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# backstop-config\n\nA sample project with a simple implementation of [BackstopJS](https://github.com/garris/BackstopJS) tests that can be used by anyone who needs to run screenshot comparison tests in static web pages that have different relative URLs. E.g. http://example.com, http://example.com/page1, http://example.com/page2, etc.\n\n## Pre-requirements\n\n- [git](https://git-scm.com/downloads)\n- [Node.js](https://nodejs.org/) (version 8 or greater)\n- [Chrome](https://www.google.com/chrome/) browser\n\n\u003e To check the Node.js version installed in your computer, run `node -v`. You should see something like this `v10.13.0`. If you don't have Node.js installed, use the above link to download and install it.\n\n## Installation\n\n[Clone](https://help.github.com/articles/cloning-a-repository/) the project to your computer. Run `git clone https://github.com/wlsf82/backstop-config.git`.\n\nInside the directory of the cloned project, run `npm i` to install the project dependencies.\n\n## Tests' setup\n\nThere is only one file you will have to change to get the project configured to run screenshot comparison tests for your website, which is [`test/basicConfig.js`](./test/basicConfig.js). Update this file by following the instructions in its comments.\n\n\u003e If you use Windows operating system, take a look at the [`NPM_SCRIPT_UPDATE_FOR_WINDOWS.md`](./NPM_SCRIPT_UPDATE_FOR_WINDOWS.md) file.\n\nDone. You are ready to go!\n\n## Running the tests\n\nRun `npm t` to run the Backstop screenshot comparison tests against all the configured URLs of your website, in all the configured viewports.\n\n### Running tests on Docker\n\nAlternatively you can run the tests in a Docker container by running `npm run test:docker`.\n\n\u003e Note: For Windows and Mac users, Docker needs to be installed and running. It can be downloaded from the [dockerhub](https://hub.docker.com).\n\n\u003e For more information about running BackstopJS tests on Docker go to the [official documentation](https://github.com/garris/BackstopJS#using-docker-for-testing-across-different-environments).\n\n## Approving bitmaps as references\n\nIn the first time running the tests, it is expected that all of them fail, and an HTML report should be automatically opened for you to review the taken screenshots. It will look like the one below.\n\n![BackstopJS html report - first time tests execution](./assets/backstop-config-first-report.png)\n\nIf all the screenshots represent the correct state of the website, you can approve them as bitmaps references so that next time you run the tests, new screenshots will be taken, and compared with the approved ones.\n\nRun `npm run backstop:approve` to approve the bitmaps as references to be used during the screenshot comparison tests.\n\n## Re-running the tests\n\nRe-run the tests with `npm t`.\n\nAfter re-running the tests an HTML report like this should be available.\n\n![BackstopJS html report](./assets/backstopjs-report.png)\n\nDone! Now every time you make changes that may affect the website visually, you can re-run the tests and get quick feedback to fix visual issues before deploying them to production.\n\n\u003e In case of test failures due to expected visual changes in the website, remember to re-approve the new screenshots as references. Use `npm run backstop:approve` to do so.\n\n## Keeping track of bitmaps references\n\nYou can use [git](https://git-scm.com/downloads) to keep track of the bitmaps reference, also references in this document as screenshots references.\n\nTo do so you just need to commit the files in the `test/backstop_data/bitmaps_reference/` directory, as soon as you reviewed the screenshots, and they look good for usage in future comparisons.\n\n## Test result with failures due to visual changes\n\nBelow you can see an example of the test report when BackstopJS finds a visual failure.\n\n![BackstopJS html report with failure](./assets/backstopjs-report-failure-diff.png)\n\n\u003e In case the failure is due to a real visual bug, provide a fix and continue using the same bitmaps as references (there is no need to re-approve them.)\n\n## Feedback\n\nYour feedback is very important for this project. If you have any doubts or suggestions, open an issue, and I'll look into it as soon as possible.\n\n## Contribute\n\nThis is an open source project. Feel free to [fork](https://help.github.com/articles/fork-a-repo/), improve it, and then create a [pull request](https://help.github.com/articles/about-pull-requests/). I'll be happy to review and have it merged when it gets in a good state.\n\n___\n\nMade with 💚 by [Walmyr Filho](https://walmyrfilho.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlsf82%2Fbackstop-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwlsf82%2Fbackstop-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlsf82%2Fbackstop-config/lists"}