Summary
Create a composite GitHub Action (vizzly-testing/preview) that wraps the vizzly preview CLI command for easier integration in GitHub Actions workflows.
Motivation
After running visual tests with vizzly run, users often want to deploy a preview of their static site attached to the same build. The CLI already supports this via vizzly preview ./dist, but a dedicated GitHub Action provides better ergonomics:
- Cleaner workflow syntax
- Typed inputs/outputs
- Better discoverability in GitHub Marketplace
Proposed Implementation
Composite action that calls the CLI - keeps it simple since all logic is already in the CLI.
Inputs
| Input |
Required |
Default |
Description |
path |
Yes |
- |
Path to static files (dist/, build/, out/) |
build-id |
No |
$VIZZLY_BUILD_ID |
Build ID to attach preview to |
token |
No |
$VIZZLY_TOKEN |
API token |
Outputs
| Output |
Description |
preview-url |
The deployed preview URL |
Example Usage
- name: Run visual tests
run: npx @vizzly-testing/cli run "npm test"
env:
VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
- name: Build
run: npm run build
- name: Deploy preview
uses: vizzly-testing/preview@v1
with:
path: ./dist
# VIZZLY_BUILD_ID automatically set by previous step
Implementation Details
# action.yml
name: 'Vizzly Preview'
description: 'Upload static files as a preview for a Vizzly build'
branding:
icon: 'eye'
color: 'orange'
inputs:
path:
description: 'Path to static files'
required: true
build-id:
description: 'Build ID (defaults to VIZZLY_BUILD_ID env var)'
required: false
token:
description: 'Vizzly API token (defaults to VIZZLY_TOKEN env var)'
required: false
outputs:
preview-url:
description: 'The deployed preview URL'
value: ${{ steps.preview.outputs.preview-url }}
runs:
using: composite
steps:
- name: Upload preview
id: preview
shell: bash
run: |
BUILD_ARG=""
if [ -n "${{ inputs.build-id }}" ]; then
BUILD_ARG="--build ${{ inputs.build-id }}"
fi
npx @vizzly-testing/cli preview "${{ inputs.path }}" $BUILD_ARG --json | tee result.json
echo "preview-url=$(jq -r '.previewUrl' result.json)" >> $GITHUB_OUTPUT
env:
VIZZLY_TOKEN: ${{ inputs.token }}
Questions
- Should this live in its own repo (
vizzly-testing/preview) or alongside other actions?
- Should we also create a combined
vizzly-testing/action that handles run + preview in one step?
Related
Summary
Create a composite GitHub Action (
vizzly-testing/preview) that wraps thevizzly previewCLI command for easier integration in GitHub Actions workflows.Motivation
After running visual tests with
vizzly run, users often want to deploy a preview of their static site attached to the same build. The CLI already supports this viavizzly preview ./dist, but a dedicated GitHub Action provides better ergonomics:Proposed Implementation
Composite action that calls the CLI - keeps it simple since all logic is already in the CLI.
Inputs
pathbuild-id$VIZZLY_BUILD_IDtoken$VIZZLY_TOKENOutputs
preview-urlExample Usage
Implementation Details
Questions
vizzly-testing/preview) or alongside other actions?vizzly-testing/actionthat handles run + preview in one step?Related