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:

GitHub logo saadmk11 / 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

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

…
Enter fullscreen mode Exit fullscreen mode
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-[email protected]
        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:

GitHub logo saadmk11 / static-page-screenshot-demo

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

30

دسته بندی ها:

GithubPython

برچسب ها:

Actionshackathon21GithubPythonOpensource