Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shresht7/web-screenshot-action
GitHub Action to take a screenshots of a website 📷
https://github.com/shresht7/web-screenshot-action
github-actions puppeteer screenshot
Last synced: 17 days ago
JSON representation
GitHub Action to take a screenshots of a website 📷
- Host: GitHub
- URL: https://github.com/shresht7/web-screenshot-action
- Owner: Shresht7
- License: mit
- Created: 2022-03-06T09:10:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T11:54:35.000Z (about 1 month ago)
- Last Synced: 2024-10-14T14:06:45.415Z (about 1 month ago)
- Topics: github-actions, puppeteer, screenshot
- Language: TypeScript
- Homepage:
- Size: 8.81 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
📷 Web Screenshot Action 📷
[](https://github.com/Shresht7/web-screenshot-action/releases)
[](./LICENSE)
Capture screenshots of a website 📷
[](https://github.com/Shresht7/web-screenshot-action/actions/workflows/test.yml)
[](https://github.com/Shresht7/web-screenshot-action/actions/workflows/validate.yml)
[](https://github.com/Shresht7/web-screenshot-action/actions/workflows/action-readme.yml)
[](https://github.com/Shresht7/web-screenshot-action/actions/workflows/screenshot.yml)
Table of Contents
- [📖 Usage](#-usage)
- [📋 Inputs](#-inputs)
- [📋 Outputs](#-outputs)
- [📄 Workflow Example](#-workflow-example)
- [📑 License](#-license)
---
## 📖 Usage
Use this action in a workflow step and provide the URL you want to take the screenshot of.
```yaml
- name: Take Screenshot
uses: Shresht7/web-screenshot-action@v1
with:
url: https://github.com/Shresht7/web-screenshot-action
```
The screenshot will be saved as `screenshot.png`. The file-path and type can be changed using [input parameters](#-inputs).
if `shouldCreateArtifacts` is set to `true`, an [artifact](https://help.github.com/en/actions/configuring-and-managing-workflows/persisting-workflow-data-using-artifacts) will be created with the generated screenshots.
Intended to be used as a sub-task in some other workflow, this action's only job is to generate the screenshots. What you do with them is up to you. See [example workflow](#-workflow-example).
---
## 📋 Inputs
| Input | Description | Default | Required |
| :---------------------- | :--------------------------------------------------------------------- | ---------------: | :------: |
| `url` | URL to take the screenshot of | `undefined` | ✅ |
| `path` | Save screenshot as | `screenshot.png` | |
| `width` | Viewport width | `1920` | |
| `height` | Viewport height | `1080` | |
| `captureFullPage` | Take screenshot of the entire page | `false` | |
| `captureBeyondViewport` | Capture beyond the viewport constraints | `false` | |
| `omitBackground` | Omit the background allowing for transparent images | `false` | |
| `encoding` | Output screenshot encoding. (`base64` / `binary` / `undefined`) | `undefined` | |
| `shouldCreateArtifacts` | Generate screenshot artifacts | `false` | |
| `delay` | Wait for duration (in milliseconds) before taking a screenshot | `1000` | |
| `darkMode` | Enable dark mode by setting `prefers-color-scheme: dark` media feature | `false` | |
## 📋 Outputs
if `shouldCreateArtifacts` is set to `true`, an [artifact](https://help.github.com/en/actions/configuring-and-managing-workflows/persisting-workflow-data-using-artifacts) will be created with the screenshots.
## 📄 Workflow Example
The [screenshot](#-web-screenshot-action) in this README is auto-generated using this action!
[`.github/workflows/screenshot.yml`](./.github/workflows/screenshot.yml):
[](https://github.com/Shresht7/web-screenshot-action/actions/workflows/screenshot.yml)
click here to show the workflow
```yaml
# ============================
# SCREENSHOT
# ----------------------------
# Take screenshot of a website
# ============================
name: Screenshot
# Activation Events
# =================
on:
workflow_dispatch: # When a workflow event is dispatched manually
# Jobs
# ====
jobs:
screenshot:
runs-on: ubuntu-latest
name: Screenshot
steps:
# Actions/Checkout ✅
# ===================
# Required for GITHUB_WORKSPACE
- name: Checkout
uses: actions/checkout@v3
# Take Screenshots 📷
# ===================
- name: Screenshot
uses: Shresht7/web-screenshot-action@v1
id: screenshot
with:
url: https://www.github.com/Shresht7/web-screenshot-action
path: screenshot.png
- name: Screenshot-Light
uses: Shresht7/web-screenshot-action@v1
id: screenshot-light
with:
url: https://www.github.com/Shresht7/web-screenshot-action
path: screenshots/screenshot-light.png
- name: Screenshot-Dark
uses: Shresht7/web-screenshot-action@v1
id: screenshot-dark
with:
url: https://www.github.com/Shresht7/web-screenshot-action
path: screenshots/screenshot-dark.png
darkMode: true
# Push to Main 🌐
# ===============
# Check if there are any changes in the current-working-directory
- name: check for changes
id: git-diff
run: |
if git diff --exit-code; then
echo "::set-output name=changes_exist::false"
else
echo "::set-output name=changes_exist::true"
fi
- name: add, commit and push
if: ${{ steps.git-diff.outputs.changes_exist == 'true' }}
run: |
git config user.name 'github-actions[bot]'
git config user.email 'github-actions[bot]@users.noreply.github.com'
git add .
git commit -m 'Update screenshot 📷'
git push
```
---
## 📑 License
> [MIT License](./LICENSE)