My Workflow
Comment Webpage Screenshot is a GitHub Action that captures screenshots of webpages and HTML files located in the repository, uploads them to an Image Upload Service and comments the screenshots on the pull request that triggered the action.
This action helps maintainers visually review HTML file changes introduced on a Pull Request by adding comments with the screenshots of the latest HTML file changes on the Pull Request
Submission Category:
Maintainer Must-Haves
Yaml File or Link to Code
Here are the links for Comment Webpage Screenshot
GitHub repository:
saadmk11
/
comment-webpage-screenshot
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
Comment Webpage Screenshot
Comment Webpage Screenshot is a GitHub Action that captures screenshots of web pages and HTML files located in the repository uploads them to an Image Upload Service and comments the screenshots on the pull request that triggered the action.
Note: This Action Only Works on Pull Requests.
Workflow inputs
These are the inputs that can be provided on the workflow.
| Name | Required | Description | Default |
|---|---|---|---|
upload_to |
No | Image Upload Service Name (Options are: github_branch, imgur) More Details
|
github_branch |
capture_changed_html_files |
No | Enable or Disable Screenshot Capture for Changed HTML Files on the Pull Request (Options are: yes, no) |
yes |
capture_html_file_paths |
No | Comma Seperated paths to the HTML files to be captured (Example: /pages/index.html, about.html) |
null |
capture_urls |
No | Comma Seperated URLs to be captured (Example: https://dev.example.com, https://dev.example.com/about.html) |
null |
github_token |
No |
GITHUB_TOKEN provided by the workflow run or Personal Access Token (PAT) |
github.token |
Example Workflow
…Marketplace:
https://github.com/marketplace/actions/comment-webpage-screenshot
Additional Resources / Info
Example: Capture Screenshots for Static HTML Pages built with TailwindCSS
If your repository contains only static files and does not require a server. You can just put the file path of the HTML files you want to capture screenshot of.
In this Example I'll show you how I used saadmk11/comment-website-screenshot GitHub Action to Visually Review Static file Changes.
WorkFlow:
name: Capture Webpage Screenshot
on:
pull_request:
types: [opened, synchronize]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Capture Webpage Screenshot
uses: saadmk11/comment-website-screenshot@v0.5
with:
upload_to: github_branch
# Capture Screenshots of Changed HTML Files
capture_changed_html_files: yes
# Comma separated paths to any other HTML File
capture_html_file_paths: "index.html"
Output Screenshot:
The HTML Template Shown in this Example was Taken from Tailwind UI
Tailwind UI Provides Awesome Pre-Built TailwindCSS Components. Check them out here: https://tailwindui.com/
Example Pull Request: https://github.com/saadmk11/static-page-screenshot-demo/pull/2
Demo Repository:
static-page-screenshot-demo
Templates Collected from Tailwind UI.
Check it out here: https://tailwindui.com/
Note
You can also use this for Dynamic Web Applications. See the saadmk11/comment-webpage-screenshot documentation for more examples.
Conclusion
I think this action will be really helpful for Open Source Maintainers to provide quick reviews on UI changes. If anyone is interested please try saadmk11/comment-webpage-screenshot out and leave some feedback :)
Top comments (0)