screenshots-ci-action

Generate a website screenshots in different viewpoint, devices.

Parameters

Name(type)	required(default)	Description
`url`(string)	required(`""`)	The target website's URL to generate screenshots
`devices`(string)	optional(`""`)	Specific mobile devices to generate screenshots. Use comma(`,`) to separate devices name. Device name list in below.
`noDesktop`(boolean)	optional(`false`)	Set `true` if not require to get desktop viewpoint screenshots.
`fullPage`(boolean)	optional(`false`)	Set `true`, takes a screenshot of the full scrollable page.
`noCommitHashFileName`(boolean)	optional(`false`)	Set `true`, the filename would not have commit hash.
`type`(string)	optional(`jpeg`)	Specify screenshot type, can be either `jpeg` or `png`.
`waitUntil`(string)	optional(`networkidle0`)	When to consider navigation succeeded. - `load`: consider navigation to be finished when the load event is fired. - `domcontentloaded`: consider navigation to be finished when the DOMContentLoaded event is fired. - `networkidle0`: consider navigation to be finished when there are no more than 0 network connections for at least `500` ms. - `networkidle2`: consider navigation to be finished when there are no more than 2 network connections for at least `500` ms. Consider set to `networkidle2` when target website has long polling request.
`waitForSelector`(string)	optional(`''`)	Wait for the selector to appear in page. If the selector doesn't appear after the `waitForSelectorTimeout` of waiting, it will take screenshots immediately. See README.waitForSelector for example
`waitForSelectorTimeout`(number)	optional(`30000`)	WaitForSelector Options: Maximum time to wait in milliseconds. Pass `0` to disable timeout. - `30000` means 30 seconds
`waitForSelectorVisible`(boolean)	optional(`false`)	WaitForSelector Options: Wait for the selected element to be present in DOM and to be visible, i.e. to not have `display: none` or `visibility: hidden` CSS properties.
`waitForSelectorHidden`(boolean)	optional(`false`)	WaitForSelector Options: Wait for the selected element to not be found in the DOM or to be hidden, i.e. have `display: none` or `visibility: hidden` CSS properties.
`releaseId`(string)	optional(`"`)	Github Release Id, it's required to upload screenshots to PR comment. see README.PR for more detail

Envs

Name(type)	required(default)	Description
`TELE_CHAT_ID`(string)	optional(`""`)	Integration with Telegram. `screenshots-ci-action` will send screenshots to telegram. see README.Telegram for setting detail.
`TELE_BOT_TOKEN`(string)	optional(`""`)	Integration with Telegram. `screenshots-ci-action` will send screenshots to telegram. see README.Telegram for setting detail.
`GITHUB_TOKEN`(string)	optional(`""`)	Github Actions Tokens, it's required to upload screenshots to PR comment. See README.PR for more detail

Output screenshots

There are 3 different way to output files

Upload to Actions Artifacts
Send message to Telegram chat
Comment in PR

More full example in below

Example 1

About this example:

screenshot desktop and few specific devices
Upload screenshots to Actions Artifacts

How to create new workflow

At the root of your repository, create a directory named .github/workflows to store your workflow files.
In .github/workflows, add a .yml or .yaml file for your workflow. For example, .github/workflows/screenshots-workflow.yml.

More workflow info:

https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow

name: screenshots ci actions
on:
  push:
    branches:
    - master # Trigger flow when something pushed to master branch

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: install puppeteer-headful
      uses: mujo-code/puppeteer-headful@master # Required for headful puppeteer
      env:
        CI: 'true'
    - name: screenshots-ci-action
      uses: flameddd/screenshots-ci-action@master
      with:
        url: https://github.com
        devices: iPhone 6,iPhone 6 landscape,Nexus 7,Pad Pro,Galaxy S III landscape,iPad Pro landscape
    - uses: actions/upload-artifact@v2 # Uplaod screenshots to Actions Artifacts via actions/upload-artifact@v2
      with:
        path: screenshots
        name: Download-screenshots

Example 2(screenshot iphone 6, without desktop)

name: screenshots ci actions
on:
  push:
    branches:
    - master

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: install puppeteer-headful
      uses: mujo-code/puppeteer-headful@master
      env:
        CI: 'true'
    - name: screenshots-ci-action
      uses: flameddd/screenshots-ci-action@master
      with:
        url: https://github.com
        devices: iPhone 6,iPhone 6 landscape
        noDesktop: true
    - uses: actions/upload-artifact@v2
      with:
        path: screenshots
        name: Download-screenshots

Example 3 (multi URLs)

URL 1: https://www.facebook.com/ (desktop)
URL 2: https://m.facebook.com/ (mobile (iPhone 6))

name: screenshots ci actions
on:
  push:
    branches:
    - master

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: install puppeteer-headful
      uses: mujo-code/puppeteer-headful@master
      env:
        CI: 'true'
    - name: screenshots-desktop-facebook
      uses: flameddd/screenshots-ci-action@master
      with:
        url: https://www.facebook.com/
    - uses: actions/upload-artifact@v2
      with:
        path: screenshots
        name: Download-desktop-screenshots # Put URL1 screenshots into Download-desktop-screenshots
    - run: rm ./screenshots/* # Remove URL1 files

    - name: screenshots-mobile-facebook
      uses: flameddd/screenshots-ci-action@master
      with:
        url: https://m.facebook.com/
        devices: iPhone 6,iPhone 6 landscape
        noDesktop: true
    - uses: actions/upload-artifact@v2
      with:
        path: screenshots
        name: Download-mobile-screenshots # Put URL2 screenshots into Download-desktop-screenshots

More examples (Vercel, Netlify)

Vercel Preview Deployment screenhots
Netlify Preview Deployment screenhots
Integration with Telegram
Post screenshots into PR comment
Manually dispatch workflow

Download screenshots (more result example in below)

Telegram

Desktop: auto-create all of these ratio

width: 540px, height: 405px
width: 600px, height: 450px
width: 720px, height: 540px
width: 960px, height: 720px
width: 1140px, height: 640px
width: 1280px, height: 720px
width: 1920px, height: 1080px

Supported mobile devices options

ref: https://github.com/puppeteer/puppeteer/blob/main/docs/api/puppeteer.knowndevices.md


'iPhone 4' 'iPhone 4 landscape' 'iPhone 5' 'iPhone 5 landscape' 'iPhone 6' 'iPhone 6 landscape' 'iPhone 6 Plus' 'iPhone 6 Plus landscape' 'iPhone 7' 'iPhone 7 landscape' 'iPhone 7 Plus' 'iPhone 7 Plus landscape' 'iPhone 8' 'iPhone 8 landscape' 'iPhone 8 Plus' 'iPhone 8 Plus landscape' 'iPhone SE' 'iPhone SE landscape' 'iPhone X' 'iPhone X landscape' 'iPhone XR' 'iPhone XR landscape' 'iPhone 11' 'iPhone 11 landscape' 'iPhone 11 Pro' 'iPhone 11 Pro landscape' 'iPhone 11 Pro Max' 'iPhone 11 Pro Max landscape' 'iPhone 12' 'iPhone 12 landscape' 'iPhone 12 Pro' 'iPhone 12 Pro landscape' 'iPhone 12 Pro Max' 'iPhone 12 Pro Max landscape' 'iPhone 12 Mini' 'iPhone 12 Mini landscape' 'iPhone 13' 'iPhone 13 landscape' 'iPhone 13 Pro' 'iPhone 13 Pro landscape' 'iPhone 13 Pro Max' 'iPhone 13 Pro Max landscape' 'iPhone 13 Mini' 'iPhone 13 Mini landscape'	'iPad' 'iPad landscape' 'iPad (gen 6)' 'iPad (gen 6) landscape' 'iPad (gen 7)' 'iPad (gen 7) landscape' 'iPad Mini' 'iPad Mini landscape' 'iPad Pro' 'iPad Pro landscape' 'iPad Pro 11' 'iPad Pro 11 landscape'	'Galaxy Note 3' 'Galaxy Note 3 landscape' 'Galaxy Note II' 'Galaxy Note II landscape' 'Galaxy S III' 'Galaxy S III landscape' 'Galaxy S5' 'Galaxy S5 landscape' 'Galaxy S8' 'Galaxy S8 landscape' 'Galaxy S9+' 'Galaxy S9+ landscape' 'Galaxy Tab S4' 'Galaxy Tab S4 landscape'
'Pixel 2' 'Pixel 2 landscape' 'Pixel 2 XL' 'Pixel 2 XL landscape' 'Pixel 3' 'Pixel 3 landscape' 'Pixel 4' 'Pixel 4 landscape' 'Pixel 4a (5G)' 'Pixel 4a (5G) landscape' 'Pixel 5' 'Pixel 5 landscape'	'Nexus 4' 'Nexus 4 landscape' 'Nexus 5' 'Nexus 5 landscape' 'Nexus 5X' 'Nexus 5X landscape' 'Nexus 6' 'Nexus 6 landscape' 'Nexus 6P' 'Nexus 6P landscape' 'Nexus 7' 'Nexus 7 landscape' 'Nokia Lumia 520' 'Nokia Lumia 520 landscape' 'Nokia N9' 'Nokia N9 landscape' 'Nexus 10' 'Nexus 10 landscape'	'Blackberry PlayBook' 'BlackBerry Z30' 'BlackBerry Z30 landscape' 'JioPhone 2' 'JioPhone 2 landscape' 'Kindle Fire HDX' 'Kindle Fire HDX landscape' 'LG Optimus L70' 'LG Optimus L70 landscape' 'Microsoft Lumia 550' 'Microsoft Lumia 950' 'Microsoft Lumia 950 landscape' 'Moto G4' 'Moto G4 landscape'

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

screenshots-ci-action

Parameters

Envs

Output screenshots

Example 1

Example 2(screenshot iphone 6, without desktop)

Example 3 (multi URLs)

More examples (Vercel, Netlify)

Download screenshots (more result example in below)

Telegram

Desktop: auto-create all of these ratio

Supported mobile devices options

Result examples

desktop (600x450)

desktop (960x720)

desktop (1140x640)

desktop (1920x1080)

mobile (iPhone_6_landscape)

mobile (iPhone_6)

mobile (Nexus_7)

mobile (iPhone_6, fullPage)

Files

README.md

Latest commit

History

README.md

File metadata and controls

screenshots-ci-action

Parameters

Envs

Output screenshots

Example 1

Example 2(screenshot iphone 6, without desktop)

Example 3 (multi URLs)

More examples (Vercel, Netlify)

Download screenshots (more result example in below)

Telegram

Desktop: auto-create all of these ratio

Supported mobile devices options

Result examples

desktop (600x450)

desktop (960x720)

desktop (1140x640)

desktop (1920x1080)

mobile (iPhone_6_landscape)

mobile (iPhone_6)

mobile (Nexus_7)

mobile (iPhone_6, fullPage)