{"id":28135818,"url":"https://github.com/bph/playground-for-screenshots","last_synced_at":"2026-02-26T01:02:23.595Z","repository":{"id":290403612,"uuid":"974340126","full_name":"bph/playground-for-screenshots","owner":"bph","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-28T16:47:05.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T17:32:21.772Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/bph.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,"zenodo":null}},"created_at":"2025-04-28T16:14:09.000Z","updated_at":"2025-04-28T16:47:08.000Z","dependencies_parsed_at":"2025-04-28T17:33:19.599Z","dependency_job_id":"4701b934-5b91-4125-b31e-d0f3580a384a","html_url":"https://github.com/bph/playground-for-screenshots","commit_stats":null,"previous_names":["bph/useplaygroundforsitedirectories"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bph%2Fplayground-for-screenshots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bph%2Fplayground-for-screenshots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bph%2Fplayground-for-screenshots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bph%2Fplayground-for-screenshots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bph","download_url":"https://codeload.github.com/bph/playground-for-screenshots/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170120,"owners_count":22026223,"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":"2025-05-14T15:19:57.101Z","updated_at":"2025-10-30T22:13:41.470Z","avatar_url":"https://github.com/bph.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# WordPress Playground Screenshot Automation\n\nThis project allows you to automate screenshots of a WordPress Playground instance using Node.js, Express, and Playwright.\n\n## Features\n\n- Automated, reliable screenshots of WordPress Playground\n- Manual and automated usage\n- Debug mode for troubleshooting\n- Screenshots saved to `/screenshots` directory\n\n## Getting Started\n\n1. **Fork and clone this repository:**\n   ```bash\n   git clone https://github.com/bph/your-repo.git\n   cd your-repo\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n3. **Install Playwright browsers (if needed):**\n   ```bash\n   npx playwright install\n   ```\n\n4. **Start the server:**\n   ```bash\n   node server.js\n   ```\nHow to use it: \n\n1. Open the Playground manually (for testing or debugging): http://localhost:3000/index.html in your browser.\n2. Take an automated screenshot: Visit http://localhost:3000/screenshot in your browser, or use a tool like curl: curl http://localhost:3000/screenshot --output screenshot.png\nThe server will load the Playground, wait for it to finish, and return a screenshot.\n3. Debug mode (see the browser window): Visit http://localhost:3000/screenshot?debug=true\n\n\u003e **Note:**  \n\u003e If you use a different port or host, adjust the URLs accordingly.\n\n## Architecture Diagram\n\n```mermaid\nsequenceDiagram\n    participant User as User (Browser)\n    participant Server as Node.js Server (Express + Playwright)\n    participant Playwright as Playwright (Headless Browser)\n    participant WP as WordPress Playground (iframe)\n\n    User-\u003e\u003eServer: GET /screenshot\n    Server-\u003e\u003ePlaywright: Launch browser, open /index.html\n    Playwright-\u003e\u003eWP: Load Playground in iframe\n    WP--\u003e\u003ePlaywright: Render site (may take 20s)\n    Playwright-\u003e\u003ePlaywright: Wait for #wp-playground iframe\n    Playwright-\u003e\u003ePlayground: Wait for \u003cbody\u003e in iframe\n    Playwright-\u003e\u003ePlayground: Wait extra 20s for full load\n    Playwright-\u003e\u003ePlaywright: Take screenshot of iframe\n    Playwright-\u003e\u003eServer: Return screenshot\n    Server-\u003e\u003eUser: Send screenshot as HTTP response\n    Note over Server: Also saves screenshot to /screenshots directory\n    User-\u003e\u003eUser: (Optional) Download or display screenshot\n\n    User-\u003e\u003eServer: (Optional) Open /index.html for manual testing\n    User-\u003e\u003eUser: Click \"Take Screenshot\" button (triggers /screenshot)\n```\n---\nCaveat: This is only a proof of concept for educational purposes, mostly mine. The code was created together with Cursor AI. Please check for security and bugs before using any of this in production. \n\nYou could modify it to use with a dynamic playground blueprint for instance if you want to create a set of screenshot for a webdirectory. Or a list of demo sites for our products categories. Or for visual regression testing. \n\nThe blueprint is hardcoded in the index.html to show a screenshot of the theme demo of Twenty-Twenty-Five. Consult the [WordPress Playground Blueprint API](https://wordpress.github.io/wordpress-playground/blueprints) documentation to modify things to your needs. \n\n## License\n\n   This project is licensed under the GNU General Public License v3.0 (GPL-3.0).\n   See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbph%2Fplayground-for-screenshots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbph%2Fplayground-for-screenshots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbph%2Fplayground-for-screenshots/lists"}