Visually Review HTML file changes introduced on a Pull Request with Comment Webpage Screenshot GitHub Action

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

…

View on GitHub

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:

saadmk11 / static-page-screenshot-demo

static-page-screenshot-demo

Templates Collected from Tailwind UI.

Check it out here: https://tailwindui.com/

View on GitHub

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 :)