{"id":19115262,"url":"https://github.com/saadmk11/comment-webpage-screenshot","last_synced_at":"2025-04-30T22:51:56.117Z","repository":{"id":37934792,"uuid":"427728607","full_name":"saadmk11/comment-webpage-screenshot","owner":"saadmk11","description":"A GitHub Action that Helps to Visually Review HTML file changes on a Pull Request by adding comments with the screenshots of the HTML file changes on the PR","archived":false,"fork":false,"pushed_at":"2023-02-07T13:18:16.000Z","size":454,"stargazers_count":28,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T22:51:50.575Z","etag":null,"topics":["actions","capture-screenshots","comment","comments","docker","github","github-actions","image","image-comment","javascript","pull-request","pull-request-action","pull-requests","python","screenshot","webpage","webpage-screenshot","website-screenshot"],"latest_commit_sha":null,"homepage":"https://github.com/marketplace/actions/comment-webpage-screenshot","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saadmk11.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-13T17:23:49.000Z","updated_at":"2024-07-18T19:03:02.000Z","dependencies_parsed_at":"2023-02-19T17:21:28.398Z","dependency_job_id":null,"html_url":"https://github.com/saadmk11/comment-webpage-screenshot","commit_stats":{"total_commits":117,"total_committers":1,"mean_commits":117.0,"dds":0.0,"last_synced_commit":"1ec1bd1103fde37173eecb5d4c8bea28c2e02a96"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmk11%2Fcomment-webpage-screenshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmk11%2Fcomment-webpage-screenshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmk11%2Fcomment-webpage-screenshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmk11%2Fcomment-webpage-screenshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saadmk11","download_url":"https://codeload.github.com/saadmk11/comment-webpage-screenshot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251795424,"owners_count":21645020,"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":["actions","capture-screenshots","comment","comments","docker","github","github-actions","image","image-comment","javascript","pull-request","pull-request-action","pull-requests","python","screenshot","webpage","webpage-screenshot","website-screenshot"],"created_at":"2024-11-09T04:45:55.961Z","updated_at":"2025-04-30T22:51:56.098Z","avatar_url":"https://github.com/saadmk11.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Comment Webpage Screenshot\n\nComment Webpage Screenshot is a GitHub Action that **captures screenshots** of\n**web pages** and **HTML files** located in the repository,\nuploads them to an [Image Upload Service](#available-image-upload-services) and\n**comments** the screenshots on the **pull request** that **triggered** the action.\n\n**Note:** This Action Only Works on Pull Requests.\n\n## Workflow inputs\n\nThese are the inputs that can be provided on the workflow.\n\n| Name | Required | Description | Default |\n|------|----------|-------------|---------|\n| `upload_to` | No | Image Upload Service Name (Options are: `github_branch`, `imgur`) **[More Details](#available-image-upload-services)** | `github_branch` |\n| `capture_changed_html_files` | No | Enable or Disable Screenshot Capture for Changed HTML Files on the Pull Request (Options are: `yes`, `no`) | `yes` |\n| `capture_html_file_paths` | No | Comma Seperated paths to the HTML files to be captured (Example: `/pages/index.html, about.html`) | `null` |\n| `capture_urls` | No | Comma Seperated URLs to be captured (Example: `https://dev.example.com, https://dev.example.com/about.html`) | `null` |\n| `github_token` | No | `GITHUB_TOKEN` provided by the workflow run or Personal Access Token (PAT) | `github.token` |\n\n## Example Workflow\n\n```yaml\nname: Comment Webpage Screenshot\n\non:\n  pull_request:\n    types: [opened, reopened, synchronize]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v2\n\n      - name: Comment Webpage Screenshot\n        uses: saadmk11/comment-webpage-screenshot@main\n        with:\n          # Optional, the action will create a new branch and\n          # upload the screenshots to that branch.\n          upload_to: github_branch  # Or, imgur\n          # Optional, the action will capture screenshots\n          # of all the changed html files on the pull request.\n          capture_changed_html_files: yes  # Or, no\n          # Optional, the action will capture screenshots\n          # of the html files provided in this input.\n          # Comma seperated file paths are accepted\n          capture_html_file_paths: \"/pages/index.html, about.html\"\n          # Optional, the action will capture screenshots\n          # of the URLs provided in this input.\n          # You can add URLs of your development server or\n          # run the server in the previous step\n          # and add that URL here (For Example: http://172.17.0.1:8000/).\n          # Comma seperated URLs are accepted.\n          capture_urls: \"https://dev.example.com, https://dev.example.com/about.html\"\n          # Optional\n          github_token: {{ secrets.MY_GITHUB_TOKEN }}\n```\n\n## Run Local Development Server Inside the Workflow and Capture Screenshots\n\nIf you want to run your **application development server inside** the **action workflow**\nand capture screenshot from the server running inside the workflow,\nThen You can structure the workflow `yaml` file similar to this:\n\n**Using Docker to Run The Application:**\n\n```yaml\nname: Comment App Screenshot\n\non:\n  pull_request:\n    types: [opened, synchronize]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # Checkout your pull request code\n      - uses: actions/checkout@v2\n    \n      # Build Development Docker Image\n      - run: docker build -t local .\n      # Run the Docker Image\n      # You need to run this detached (-d)\n      # so that the action is not blocked\n      # and can move on to the next step\n      # You Need to publish the port on the host (-p 8000:8000)\n      # So that it is reachable outside the container\n      - run: docker run --name demo -d -p 8000:8000 local\n      # Sleep for few seconds and let the container start\n      - run: sleep 10\n\n      # Run Screenshot Comment Action\n      - name: Run Screenshot Comment Action\n        uses: saadmk11/comment-webpage-screenshot@main\n        with:\n          upload_to: github_branch\n          capture_changed_html_files: no\n          # You must use `172.17.0.1` if you are running\n          # the application locally inside the workflow\n          # Otherwise the container which will run this action \n          # will not be able to reach the application\n          capture_urls: 'http://172.17.0.1:8000/, http://172.17.0.1:8000/admin/login/'\n```\n\n**Directly Running The Application:**\n```yaml\nname: Comment App Screenshot\n\non:\n  pull_request:\n    types: [opened, synchronize]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # Checkout your pull request code\n      - uses: actions/checkout@v2\n\n      - name: Use Node.js\n        uses: actions/setup-node@v1\n        with:\n          node-version: '16.x'\n      # Use `nohup` to run the node app\n      # so that the execution of the next steps are not blocked\n      - run: nohup node main.js \u0026\n      # Sleep for few seconds and let the container start\n      - run: sleep 5\n\n      # Run Screenshot Comment Action\n      - name: Run Screenshot Comment Action\n        uses: saadmk11/comment-webpage-screenshot@main\n        with:\n          upload_to: imgur\n          capture_changed_html_files: no\n          # You must use `172.17.0.1` if you are running\n          # the application locally inside the workflow\n          # Otherwise, the container which will run this action \n          # will not be able to reach the application\n          capture_urls: 'http://172.17.0.1:8081'\n```\n\n### Important Note:\n\nIf you run the application server **inside** the **GitHub Actions Workflow**:\n\n- You need to run it in the **background** or **detached** mode.\n\n- If you are using **docker** to run your application server you need top **publish** the **port** to\nthe host (for example: `-p 8000:8000`).\n\n- you can not use `localhost` url on `capture_urls`.\nYou need to use `172.17.0.1` so that `comment-webpage-screenshot` \naction can send request to the server running locally.\n**So, `http://localhost:8081` will become `http://172.17.0.1:8081`**\n\n**Examples including application code can be found here:** [Example Projects](https://github.com/saadmk11/comment-webpage-screenshot/tree/main/examples)\n\n## Run External Development Server and Capture Screenshots\n\nIf your application has a **external development server** that deploys changes on **every pull request**.\nYou can add the URLs of your development server on `capture_urls` input.\nThis will let the action capture screenshots from the **external development server** after deployment.\n\n**Example:**\n\n```yaml\nname: Comment App Screenshot\n\non:\n  pull_request:\n    types: [opened, synchronize]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # Checkout your pull request code\n      - uses: actions/checkout@v2\n\n      # Run Screenshot Comment Action\n      - name: Run Screenshot Comment Action\n        uses: saadmk11/comment-webpage-screenshot@main\n        with:\n          upload_to: github_branch\n          capture_changed_html_files: no\n          # Add you external development server URL\n          capture_urls: 'https://dev.example.com, https://dev.example.com/about.html'\n```\n\n## Capture Screenshots for Static HTML Pages\n\nIf your repository contains **only static files** and does **not require a server**.\nYou can just put the **file path** of the **HTML files** you want to capture screenshot of.\n\n**Example:**\n\n```yaml\nname: Comment Static Site Screenshot\n\non:\n  pull_request:\n    types: [opened, synchronize]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # Checkout your pull request code\n      - uses: actions/checkout@v2\n\n      # Run Screenshot Comment Action\n      - name: Run Screenshot Comment Action\n        uses: saadmk11/comment-webpage-screenshot@main\n        with:\n          upload_to: imgur\n          # Capture Screenshots of Changed HTML Files\n          capture_changed_html_files: yes\n          # Comma seperated paths to any other HTML File\n          capture_html_file_paths: \"/pages/index.html, about.html\"\n```\n\n## Available Image Upload Services\n\n**As GitHub Does not allow us to upload images to a comment using the API\nwe need to rely on other services to host the screenshots.**\n\nThese are the currently available image upload services.\n\n### Imgur\n\nIf the value of `upload_to` input is `imgur` then the screenshots will be uploaded to Imgur.\nKeep in mind that the uploaded screenshots will be **public** and anyone can see them.\nImgur also has a rate limit of how many images can be uploaded per hour.\nRefer to Imgur's [Rate Limits](https://api.imgur.com/#limits) Docs for more details.\nThis is suitable for **small open source** repositories.\n\nPlease refer to Imgur terms of service [here](https://imgur.com/tos)\n\n### GitHub Branch (Default)\n\nIf the value of `upload_to` input is `github_branch` then the screenshots will be pushed\nto a GitHub branch created by the action on your repository.\nThe screenshots on the comments will reference the Images pushed to this branch.\n\nThis is suitable for **open source** and **private** repositories.\n\n**If you want to add/use a different image upload service, feel free create a new issue/pull request.**\n\n## Examples\n\nYou Can find some example use cases of this action here: [Example Projects](https://github.com/saadmk11/comment-webpage-screenshot/tree/main/examples)\n\nHere are some comments created by this action on the Example Project:\n\n![Screenshot from 2021-11-18 21-32-20](https://user-images.githubusercontent.com/24854406/142447670-e61115ec-444a-4869-b133-2b9969b681de.png)\n![screencapture-github-saadmk11-django-demo-pull-11-2021-11-18-21_31_00](https://user-images.githubusercontent.com/24854406/142447685-22aee5cf-49f1-4c50-8908-ccad5c56514b.png)\n\n# License\n\nThe code in this project is released under the [GNU GENERAL PUBLIC LICENSE Version 3](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadmk11%2Fcomment-webpage-screenshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaadmk11%2Fcomment-webpage-screenshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadmk11%2Fcomment-webpage-screenshot/lists"}