This GitHub Action will use Puppeteer to generate screenshots from any URL or even a file://. It's great for creating dynamic banners for GitHub projects.
Example of a screenshot generated by this action from the test/html HTML.
Note
This project is part of Cloud Posse's comprehensive "SweetOps" approach towards DevOps.
Learn More
It's 100% Open Source and licensed under the APACHE2.
We have dozens of GitHub Actions that are Open Source and well-maintained. Check them out!
This action generates a screenshot of any website (including file://) using Puppeteer.
Important
In Cloud Posse's examples, we avoid pinning GitHub Actions to specific versions to prevent discrepancies between the documentation and the latest released versions. However, for your own projects, we strongly advise pinning each GitHub Action to the exact version you're using. This practice ensures the stability of your workflows. Additionally, we recommend implementing a systematic approach for updating versions to avoid unexpected changes.
For a complete working example that generated the demo image, see the .github/workflows/test.yaml workflow.
name: Generate Screenshot
on:
pull_request:
types: [opened, synchronize, reopened]
jobs:
screenshot:
runs-on: ubuntu-latest
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true
steps:
- uses: actions/checkout@v2
- name: Run this composite action
id: screenshot
uses: cloudposse-github-actions/screenshot@v0
with:
url: "file://${{github.workspace}}/test/html/index.html"
output: "docs/example.png"
# Overwrite any CSS
css: |
body {
background: rgb(2,0,36);
background: linear-gradient(139deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 56%, rgba(147,0,255,1) 100%);
}
# Replace any text using JQuery-style CSS path selectors"
customizations: |
"#name": "${{ github.event.repository.name }}"
# Set the width & height of the viewport
viewportWidth: 800
viewportHeight: 600| Name | Description | Default | Required |
|---|---|---|---|
| consoleOutputEnabled | Whether or not to output the browser console log | true | false |
| css | Custom CSS overrides | N/A | false |
| customizations | String representation of a YAML or JSON map of CSS paths (key) and replacement (value) | N/A | false |
| deviceScaleFactor | Specifies the device scale factor (pixel ratio) for the web page rendering. It determines how many physical pixels are used to represent a single logical pixel. For example, a device scale factor of 2 means one logical pixel is represented by two physical pixels, commonly used for high-DPI (Retina) displays. A value of 1 uses standard pixel density. This factor affects the resolution and quality of the rendered page or screenshot. | 2 | false |
| fullPage | Screen capture the entire page by scrolling down | false | false |
| imageQuality | Quality of the output image (1-100, applicable for JPEG) | N/A | false |
| omitBackground | Omit the browser default background. Enable to support transparency. | true | false |
| output | Output image file path | screenshot.png | false |
| outputType | Output image type | png | false |
| puppeteerImage | Docker image to run puppeteer. See https://github.com/puppeteer/puppeteer/pkgs/container/puppeteer | ghcr.io/puppeteer/puppeteer:22.13.1 | false |
| url | URL of the HTML content to convert to an image. Use file:// for local files | N/A | true |
| viewportHeight | Viewport height in pixels | N/A | true |
| viewportWidth | Viewport width in pixels | N/A | true |
| waitForTimeout | Number of milliseconds to delay before taking screenshot | 500 | false |
| Name | Description |
|---|---|
| file | File containing the generated screenshot |
Check out these related projects.
For additional context, refer to some of these links.
- Cloud Posse GitHub Actions - A collection of all Cloud Posse managed GitHub Actions
This project is under active development, and we encourage contributions from our community. Many thanks to our outstanding contributors:
Please use the issue tracker to report any bugs or file feature requests.
If you are interested in being a contributor and want to get involved in developing this project or help out with Cloud Posse's other projects, we would love to hear from you!
Hit us up in Slack, in the #cloudposse channel.
In general, PRs are welcome. We follow the typical "fork-and-pull" Git workflow.
- Review our Code of Conduct and Contributor Guidelines.
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull Request so that we can review your changes
NOTE: Be sure to merge the latest changes from "upstream" before making a pull request!
Join our Open Source Community on Slack. It's FREE for everyone! Our "SweetOps" community is where you get to talk with others who share a similar vision for how to rollout and manage infrastructure. This is the best place to talk shop, ask questions, solicit feedback, and work together as a community to build totally sweet infrastructure.
Sign up for our newsletter and join 3,000+ DevOps engineers, CTOs, and founders who get insider access to the latest DevOps trends, so you can always stay in the know. Dropped straight into your Inbox every week — and usually a 5-minute read.
Join us every Wednesday via Zoom for your weekly dose of insider DevOps trends, AWS news and GitHub Action insights, all sourced from our SweetOps community, plus a live Q&A that you can’t find anywhere else. It's FREE for everyone!
This project is maintained by Cloud Posse, LLC.
We are a DevOps Accelerator for funded startups and enterprises. Use our ready-to-go terraform architecture blueprints for AWS & GitHub Actions to get up and running quickly. We build it with you. You own everything. Your team wins. Plus, we stick around until you succeed.
Your team can operate like a pro today.
Ensure that your team succeeds by using our proven process and turnkey blueprints. Plus, we stick around until you succeed.
📚 See What's Included
- Reference Architecture. You'll get everything you need from the ground up built using 100% infrastructure as code.
- Deployment Strategy. You'll have a battle-tested deployment strategy using GitHub Actions that's automated and repeatable.
- Site Reliability Engineering. You'll have total visibility into your apps and microservices.
- Security Baseline. You'll have built-in governance with accountability and audit logs for all changes.
- GitOps. You'll be able to operate your infrastructure via Pull Requests.
- Training. You'll receive hands-on training so your team can operate what we build.
- Questions. You'll have a direct line of communication between our teams via a Shared Slack channel.
- Troubleshooting. You'll get help to triage when things aren't working.
- Code Reviews. You'll receive constructive feedback on Pull Requests.
- Bug Fixes. We'll rapidly work with you to fix any bugs in our projects.
Preamble to the Apache License, Version 2.0
Complete license is available in the LICENSE file.
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
Copyright © 2017-2024 Cloud Posse, LLC