4

Visually Review HTML file changes introduced on a Pull Request with Comment Webp...

 2 years ago
source link: https://dev.to/saadmk11/visually-review-html-file-changes-introduced-on-a-pull-request-with-comment-webpage-screenshot-github-action-43gd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 modeExit fullscreen mode

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/[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"
Enter fullscreen modeExit fullscreen mode

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/

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK