{"id":15692438,"url":"https://github.com/ryelle/grab-screenshots","last_synced_at":"2025-05-08T02:41:00.857Z","repository":{"id":142637570,"uuid":"320457393","full_name":"ryelle/grab-screenshots","owner":"ryelle","description":"Capture screenshots of the WordPress admin","archived":false,"fork":false,"pushed_at":"2021-05-20T20:48:27.000Z","size":77,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T16:50:31.780Z","etag":null,"topics":["grab-screenshots","puppeteer","wordpress"],"latest_commit_sha":null,"homepage":"","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/ryelle.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":"2020-12-11T03:32:30.000Z","updated_at":"2021-05-28T21:35:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"cac4ef80-7cdd-4c1b-876e-551796caa11b","html_url":"https://github.com/ryelle/grab-screenshots","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/ryelle%2Fgrab-screenshots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fgrab-screenshots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fgrab-screenshots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fgrab-screenshots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryelle","download_url":"https://codeload.github.com/ryelle/grab-screenshots/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252989666,"owners_count":21836662,"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":["grab-screenshots","puppeteer","wordpress"],"created_at":"2024-10-03T18:33:16.536Z","updated_at":"2025-05-08T02:41:00.837Z","avatar_url":"https://github.com/ryelle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Grab Screenshots\n================\n\nThis is a collection of scripts for taking and comparing screenshots of WordPress admin pages. This is mostly a personal tool, where I create scripts to run through various pages while testing tickets.\n\n## Quickstart\n\n```\ncd grab-screenshots\nnpm install\nnpm run snap\n```\n\n## Available scripts\n\nThe scripts use environment variables for configuration. Pass these in before the script command, ex:\n\n```bash\nWP_BASE_URL=http://localhost:8888 npm run snap\n```\n\nThe following variables are used for `index.js`/`npm run snap`.\n\n| Env Variable | Default | Description |\n|--------------|---------|-------------|\n| WP_USERNAME  | admin | Username to log in with, should have access to all pages that are requested. |\n| WP_PASSWORD  | password | Password for account. |\n| WP_BASE_URL  | http://trunk.wordpress.test/ | The URL to the running WordPress instance. Note, this does not _have_ to be a local install. |\n| IMAGE_PATH | screenshots | Where the screenshots will be saved. This directory needs to exist already. |\n\n### `index.js`\n\nRun this with `npm run snap`. It will loop over all core color schemes and take screenshots of an assortment of pages, sometimes with elements hovered or focused. Read through the script to see the steps it takes.\n\n### `diff.js`\n\nRun this with `npm run diff`. Assuming you have two folders of matching screenshots, this will run [`blink-diff`](http://yahoo.github.io/blink-diff/) over each file-pair in the folders.\n\n| Env Variable | Default | Description |\n|--------------|---------|-------------|\n| IMAGE_A_PATH | photos-a | First folder of screenshots. |\n| IMAGE_B_PATH | photos-b | Second folder of screenshots. |\n| DIFF_PATH    | photos-diffs | Output folder for visual diffs. |\n\n### Putting them together\n\nIf you want to check the difference between two branches of WordPress, you could…\n\n1. Check out `trunk` and build.\n2. Run the first screenshot grab.\n\t```bash\n\tmkdir screenshots-trunk\n\tIMAGE_PATH=screenshots-trunk node index.js\n\t```\n3. Check out your branch and build.\n4. Run the second screenshot grab.\n\t```bash\n\tmkdir screenshots-branch\n\tIMAGE_PATH=screenshots-branch node index.js\n\t```\n5. Run the image comparison script with each folder.\n\t```bash\n\tmkdir screenshots-diff\n\tIMAGE_A_PATH=screenshots-trunk IMAGE_B_PATH=screenshots-branch DIFF_PATH=screenshots-diff npm run diff\n\t```\n6. 🎉 You should now have a folder `screenshots-diff` with the differences highlighted.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryelle%2Fgrab-screenshots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryelle%2Fgrab-screenshots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryelle%2Fgrab-screenshots/lists"}