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.
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
})
Main workflow steps boils down to
- Run puppeteer and capture the screenshots.
- upload the screenshots to a external image service (in this case cloudinary) and get the image url.
- Create markdown file as string using the image urls.
- Convert markdown file string into base64 encoded string to ease passing to the environment variables (easier to pass control characters such as newlines).
- Use
actions/github-script
actioncreateCommitComment
method to post the comment to commit or pull request.
Additional Info
Used in
RizkyRajitha / linkin
Linkin is a customizable self hosted link tree platform.
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
Deploy with Vercel
Deploy with Heroku
Deploy with Railway
Getting started
- Deploy in Vercel
- set environment variables
-
DATABASE_URL
- Postgres database url -
HASHSALT
- random secret key -
NODE_ENV
- set NODE_ENV toproduction
-
- after successfully deploying visit
youdomain/admin
to view admin login - use default login credentials
- username =
admin
- password =
linkin123
- username =
- after a successfull login you will be able to see above admin dashboard.
- set environment variables
- Deploy in Heroku
- set environment variables
-
DATABASE_URL
- Postgres database url -
HASHSALT
- random secret key
-
- after successfully deploying visit
youdomain/admin
to…
- set environment variables
Top comments (0)