Skip to content

✨ Add GitHub Action for preview uploads #178

@Robdel12

Description

@Robdel12

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions