HTMLのファイルの変更を視覚的にレビューのWebページのスクリーンショットのギタブアクションをプル要求に導入された

マイワークフロー
コメントWebpageスクリーンショットは、ウェブページのスクリーンショットとリポジトリに位置するHTMLファイルをキャプチャし、画像のアップロードサービスにアップロードするgithubアクションです.
この動作により、メンテナは、プル要求に対して最新のHTMLファイルの変更のスクリーンショットにコメントを追加することで、プルリクエストで導入されたHTMLファイルの変更を視覚的に評価することができます

提出カテゴリ
メンテーナは必要である

YAMLファイルまたはコードへのリンク
コメントWebpageスクリーンショットのためのリンクは、ここにあります
githubリポジトリ

saadmk11 / comment-webpage-screenshot
コメントWebpageスクリーンショットは、ウェブページとリポジトリに位置するHTMLファイルのスクリーンショットをキャプチャするgithubアクションです
コメントウェブページスクリーンショット
コメントWebpageスクリーンショットは、スクリーンショットを捕えます
WebページとリポジトリにあるHTMLファイル
それらをImage Upload Serviceにアップロードしてください、そして
アクションを引き起こしたプル要求のスクリーンショット.
注意:このアクションはプルリクエストのみで動作します.
ワークフロー入力
これらはワークフローで提供できる入力です.
名称
必要
説明
デフォルトupload_toなし
イメージアップロードサービス名github_branchimgurなし
プルリクエストの変更されたHTMLファイルのスクリーンショットキャプチャを有効または無効にするgithub_branchcapture_changed_html_filesなし
キャプチャするHTMLファイルへのパスをコンマ区切ります(例: yes )noyesなし
カンマ区切りのURL (例: capture_html_file_paths )/pages/index.html, about.htmlnullなし
ワークフロー実行または個人のアクセストークン(PAT)によって、提供されるcapture_urlshttps://dev.example.com, https://dev.example.com/about.htmlワークフロー例
…
More Details
市場
View on GitHub
https://github.com/marketplace/actions/comment-webpage-screenshot
追加情報

例:TruwindCSSで構築された静的なHTMLページのスクリーンショットをキャプチャする
あなたの倉庫が静的なファイルだけを含んで、サーバーを必要としないならば.ちょうどスクリーンショットをキャプチャするHTMLファイルのファイルパスを置くことができます.
この例では、静的ファイルの変更を視覚的に確認するために、null GitHubアクションを使用する方法を示します.
ワークフロー:

name: Capture Webpage Screenshot

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/[email protected]

      - 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"

スクリーンショット

この例で示されているHTMLテンプレートをTailwind UIから取得しました
Tailwind UIは素晴らしいビルド済みのフロントウィンドのコンポーネントを提供します.ここでチェックしてください:
例プル要求:https://tailwindui.com/
デモリポジトリ

https://github.com/saadmk11/static-page-screenshot-demo/pull/2/ saadmk11
静的ページのスクリーンショット
テンプレートTailwind UIから収集.
ここでチェックしてください: static-page-screenshot-demo
https://tailwindui.com/
View on GitHub
ノート
ダイナミックなWebアプリケーションにも使用できます.詳細については、 ドキュメントを参照してください.
saadmk11/comment-webpage-screenshot
結論
私は、この行動がオープンソース管理者にとって本当に有用であると思います.興味がある方は を試してみてください.