DEV Community

Rajitha Gunathilake
Rajitha Gunathilake

Posted on

Automate adding screenshots to GitHub commits and pull requests

My Workflow

This workflow will run puppeteer and capture screenshots of a web application, and then add screenshots to commit comments or pull request comments. This will ease the process of verifying the web app UI state.

comment preview

workflow file

Submission Category:

Maintainer Must-Haves

Yaml File

name: Browser-Testing on: [push, pull_request] jobs: Browser-Testing: runs-on: ubuntu-latest # Service containers to run postgres services: postgres: image: postgres env: POSTGRES_PASSWORD: postgres POSTGRES_USER: postgres POSTGRES_DB: postgres options: >- --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5 ports: - 5432:5432 steps: - name: Checkout repository uses: actions/checkout@v2 - name: Set up Node.js 14.x uses: actions/setup-node@v1 with: node-version: 14.x # install puppeteer dependency libraries using apt - name: install puppeteer libraries run: | sudo apt-get update sudo apt-get install -y libgbm1 # since puppeteer is large in size caching will reduce the runtime  - name: Cache node modules uses: actions/cache@v2 env: cache-name: cache-node-modules with: path: "node_modules" key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.os }}-build- ${{ runner.os }}- - name: Install dependencies run: npm install - name: Install puppeteer run: npm install puppeteer - name: Migrate database run: npm run prismamigrateprod env: NODE_ENV: production DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres" - name: Seed database run: npm run seed env: NODE_ENV: production DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres" # run a bash script to start the server and then run puppeteer to capture the screenshots # after capturing screenshots , they will be uploaded to cloudinary image service and pass the image url to next step using environment variables  - name: Run browser testing script id: browser-testing env: HASHSALT: 123 DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres" CLOUDINARY_CLOUD_NAME: ${{ secrets.CLOUDINARY_CLOUD_NAME }} CLOUDINARY_API_KEY: ${{ secrets.CLOUDINARY_API_KEY }} CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }} run: | chmod +x run-browser-testing.sh ./run-browser-testing.sh # add comment to commit or pull request  - name: Add comment uses: actions/github-script@v5 env: SHA: ${{ github.sha }} commentBody: ${{ env.commentBody }} with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | let buffercommentBody = process.env.commentBody let utf8commentBody = new Buffer.from(buffercommentBody, "base64").toString("utf8"); console.log(utf8commentBody); github.rest.repos.createCommitComment({ owner: context.repo.owner, repo: context.repo.repo, commit_sha: process.env.SHA, body: utf8commentBody }) 
Enter fullscreen mode Exit fullscreen mode

Main workflow steps boils down to

  1. Run puppeteer and capture the screenshots.
  2. upload the screenshots to a external image service (in this case cloudinary) and get the image url.
  3. Create markdown file as string using the image urls.
  4. Convert markdown file string into base64 encoded string to ease passing to the environment variables (easier to pass control characters such as newlines).
  5. Use actions/github-script action createCommitComment method to post the comment to commit or pull request.

Additional Info

Used in

GitHub logo RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin logo

Linkin · DeepScan grade codecov license Code Coverage

Linkin is a customizable self-hosted link tree application.

Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks using a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports one-click deploy using multiple cloud providers 🚀

View Demo
Demo Admin http://linkindemo.vercel.app/admin

  • Demo username = admin
  • Demo password = linkin123

linkin gif


Deploy with Vercel

Deploy with Vercel

Deploy with Heroku

Deploy

Deploy with Railway

Deploy on Railway

Screenshot_2021-05-22 LinkIn's Link tree Page

Screenshot_2021-05-22 Linkin Dashboard

Screenshot_2021-05-22 Linkin Dashboard

Getting started

  • Deploy in Vercel
    • set environment variables
      • DATABASE_URL - Postgres database url
      • HASHSALT - random secret key
      • NODE_ENV - set NODE_ENV to production
    • after successfully deploying visit youdomain/admin to view admin login
    • use default login credentials
      • username = admin
      • password = linkin123
    • after a successfull login you will be able to see above admin dashboard.


  • Deploy in Heroku
    • set environment variables
      • DATABASE_URL - Postgres database url
      • HASHSALT - random secret key
    • after successfully deploying visit youdomain/admin to…

Example commit comment

Top comments (0)