Workflows

ViSnap integrates into your development process in several ways, from initial setup to daily development and CI/CD pipelines. Here are the common workflows teams use, with real-world examples to help you choose the right approach for your project.

Local Development

Setup Workflow

Initialize ViSnap:
```
npx visnap init
```
Configure your adapters (Storybook or URLs) and browser settings
Create baseline screenshots:
```
npx visnap update
```

This creates your "source of truth" screenshots that represent the correct appearance of your UI. You'll commit these baseline screenshots to your repository so your team has a shared reference.

Development Workflow

Make UI changes to your components or pages
Run visual tests:
```
npx visnap test
```
Review results in the generated HTML report:
```
npx visnap open
```
Update baselines for intentional changes:
```
npx visnap update
```
Commit your changes knowing your UI is consistent

Example scenario: You're updating a button component's hover state. After making the change, run visnap test to see if any other components were affected. If the change looks good, update the baselines with visnap update and commit both your code changes and the new baseline screenshots.

Filtering

Focus on what matters by filtering test cases:

Command-line filtering:

npx visnap test --include "Button/*" --exclude "*-skip*"

Configuration filtering:

// In your visnap.config.ts
options: {
  include: ["Button/*", "Card/*"],
  exclude: ["*-skip*", "*-test*"]
}

CI/CD Pipelines

Docker Workflow

Use Docker for consistent testing across different environments:

# Run tests in Docker
npx visnap test --docker

# Update baselines in Docker
npx visnap update --docker

This ensures reproducible results across different machines and environments.

Best Practices

Use Docker in CI to ensure consistent results
Cache dependencies to speed up CI runs
Upload test artifacts for review
Set appropriate timeouts for visual tests
Handle failures gracefully with proper error reporting

Next Steps

Interactive Testing - Test hover states and forms
Screenshot Stabilization - Make tests more stable
CI Integration - Run tests in your pipeline
Configuration Reference - All configuration options

Workflows

On this page