@vizzly-testing/cli 0.23.0 → 0.23.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -586
- package/dist/api/client.js +3 -1
- package/dist/api/endpoints.js +6 -7
- package/dist/cli.js +15 -2
- package/dist/commands/finalize.js +12 -0
- package/dist/commands/preview.js +210 -28
- package/dist/commands/run.js +15 -0
- package/dist/commands/status.js +34 -8
- package/dist/commands/upload.js +13 -0
- package/dist/reporter/reporter-bundle.iife.js +19 -19
- package/dist/utils/ci-env.js +114 -16
- package/package.json +1 -2
- package/claude-plugin/.claude-plugin/README.md +0 -270
- package/claude-plugin/.claude-plugin/marketplace.json +0 -28
- package/claude-plugin/.claude-plugin/plugin.json +0 -14
- package/claude-plugin/.mcp.json +0 -12
- package/claude-plugin/CHANGELOG.md +0 -85
- package/claude-plugin/commands/setup.md +0 -137
- package/claude-plugin/commands/suggest-screenshots.md +0 -111
- package/claude-plugin/mcp/vizzly-docs-server/README.md +0 -95
- package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js +0 -110
- package/claude-plugin/mcp/vizzly-docs-server/index.js +0 -283
- package/claude-plugin/mcp/vizzly-server/cloud-api-provider.js +0 -399
- package/claude-plugin/mcp/vizzly-server/index.js +0 -927
- package/claude-plugin/mcp/vizzly-server/local-tdd-provider.js +0 -455
- package/claude-plugin/mcp/vizzly-server/token-resolver.js +0 -185
- package/claude-plugin/skills/check-visual-tests/SKILL.md +0 -158
- package/claude-plugin/skills/debug-visual-regression/SKILL.md +0 -269
- package/docs/api-reference.md +0 -1003
- package/docs/authentication.md +0 -334
- package/docs/doctor-command.md +0 -44
- package/docs/getting-started.md +0 -131
- package/docs/internal/SDK-API.md +0 -1018
- package/docs/plugins.md +0 -557
- package/docs/tdd-mode.md +0 -594
- package/docs/test-integration.md +0 -523
- package/docs/tui-elements.md +0 -560
- package/docs/upload-command.md +0 -196
package/README.md
CHANGED
|
@@ -1,389 +1,74 @@
|
|
|
1
1
|
# Vizzly CLI
|
|
2
2
|
|
|
3
|
-
> Visual
|
|
3
|
+
> Visual proof that your UI works
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@vizzly-testing/cli)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Visual bugs slip through code review. They hide in pixel-perfect mockups, sneak past unit tests, and show up right when you're about to ship. Vizzly catches them first.
|
|
9
9
|
|
|
10
|
-
Vizzly
|
|
11
|
-
components in a sandboxed environment, Vizzly captures screenshots directly from your functional
|
|
12
|
-
tests. This means you test the *real thing*, not a snapshot.
|
|
10
|
+
Unlike tools that re-render components in isolation, Vizzly captures screenshots directly from your functional tests—the *real thing*. Whether you're validating AI-generated code or testing manual changes, you get visual proof before anything hits production.
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
screenshots from web apps, mobile apps, or even design mockups, and use our collaborative dashboard
|
|
16
|
-
to streamline the review process between developers and designers.
|
|
12
|
+
## Why Vizzly?
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
**Local TDD workflow.** See changes as you type, not after CI. The `vizzly tdd` command runs a local dashboard that compares screenshots instantly—no cloud roundtrip, no waiting.
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
- 🔄 **CI/CD Ready** - GitHub, GitLab, CircleCI, and more
|
|
16
|
+
**Smart diffing with Honeydiff.** Our Rust-based comparison engine is 12x faster than alternatives and ignores the noise: timestamps, ads, font rendering differences. It finds real changes.
|
|
17
|
+
|
|
18
|
+
**Any screenshot source.** Playwright, Cypress, Puppeteer, Selenium, native mobile apps, or even design mockups. If you can capture it, Vizzly can compare it.
|
|
19
|
+
|
|
20
|
+
**Team-based pricing.** Pay for your team, not your screenshots. Test everything without budget anxiety.
|
|
26
21
|
|
|
27
22
|
## Quick Start
|
|
28
23
|
|
|
29
|
-
|
|
24
|
+
Requires Node.js 22+.
|
|
30
25
|
|
|
31
26
|
```bash
|
|
32
|
-
# Install globally
|
|
33
27
|
npm install -g @vizzly-testing/cli
|
|
34
28
|
|
|
35
|
-
# Initialize your project
|
|
36
29
|
vizzly init
|
|
37
30
|
```
|
|
38
31
|
|
|
39
|
-
###
|
|
40
|
-
|
|
41
|
-
Vizzly supports two authentication methods:
|
|
42
|
-
|
|
43
|
-
**Option 1: User Authentication (Recommended for local development)**
|
|
44
|
-
```bash
|
|
45
|
-
# Authenticate with your Vizzly account
|
|
46
|
-
vizzly login
|
|
47
|
-
|
|
48
|
-
# Optional: Configure project-specific token
|
|
49
|
-
vizzly project:select
|
|
50
|
-
|
|
51
|
-
# Run tests
|
|
52
|
-
vizzly run "npm test"
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
**Option 2: API Token (Recommended for CI/CD)**
|
|
56
|
-
```bash
|
|
57
|
-
# Set via environment variable
|
|
58
|
-
export VIZZLY_TOKEN=your-project-token
|
|
59
|
-
|
|
60
|
-
# Run tests
|
|
61
|
-
vizzly run "npm test"
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
For local development with `.env` files:
|
|
65
|
-
```
|
|
66
|
-
VIZZLY_TOKEN=your-project-token
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
Then add `.env` to your `.gitignore` file. For CI/CD, use your provider's secret management system.
|
|
70
|
-
|
|
71
|
-
**Token Priority:**
|
|
72
|
-
1. CLI flag (`--token`)
|
|
73
|
-
2. Environment variable (`VIZZLY_TOKEN`)
|
|
74
|
-
3. Project mapping (configured via `vizzly project:select`)
|
|
75
|
-
4. User access token (from `vizzly login`)
|
|
76
|
-
|
|
77
|
-
### Upload existing screenshots
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
vizzly upload ./screenshots --build-name "Release v1.2.3"
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Integrate with your tests
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
# Run tests with cloud integration (CI/CD)
|
|
87
|
-
vizzly run "npm test"
|
|
88
|
-
|
|
89
|
-
# Use TDD mode for local development
|
|
90
|
-
vizzly tdd start # Start TDD server
|
|
91
|
-
npm test --watch # Run tests in watch mode
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### In your test code
|
|
95
|
-
|
|
96
|
-
```javascript
|
|
97
|
-
import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
|
|
98
|
-
|
|
99
|
-
// Option 1: Using a Buffer
|
|
100
|
-
const screenshot = await page.screenshot();
|
|
101
|
-
await vizzlyScreenshot('homepage', screenshot, {
|
|
102
|
-
browser: 'chrome',
|
|
103
|
-
viewport: '1920x1080'
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
// Option 2: Using a file path
|
|
107
|
-
await page.screenshot({ path: './screenshots/homepage.png' });
|
|
108
|
-
await vizzlyScreenshot('homepage', './screenshots/homepage.png', {
|
|
109
|
-
browser: 'chrome',
|
|
110
|
-
viewport: '1920x1080'
|
|
111
|
-
});
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
> **Multi-Language Support**: Currently available as a JavaScript/Node.js SDK with Python, Ruby, and
|
|
115
|
-
> other language bindings coming soon. The client SDK is lightweight and simply POSTs screenshot
|
|
116
|
-
> data to the CLI for processing.
|
|
117
|
-
|
|
118
|
-
## Commands
|
|
119
|
-
|
|
120
|
-
### Authentication Commands
|
|
121
|
-
|
|
122
|
-
```bash
|
|
123
|
-
vizzly login # Authenticate with your Vizzly account
|
|
124
|
-
vizzly logout # Clear stored authentication tokens
|
|
125
|
-
vizzly whoami # Show current user and authentication status
|
|
126
|
-
vizzly project:select # Configure project-specific token
|
|
127
|
-
vizzly project:list # Show all configured projects
|
|
128
|
-
vizzly project:token # Display project token for current directory
|
|
129
|
-
vizzly project:remove # Remove project configuration
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
#### Login Command
|
|
133
|
-
Authenticate using OAuth 2.0 device flow. Opens your browser to authorize the CLI with your Vizzly account.
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
# Interactive browser-based login
|
|
137
|
-
vizzly login
|
|
138
|
-
|
|
139
|
-
# JSON output for scripting
|
|
140
|
-
vizzly login --json
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
**Features:**
|
|
144
|
-
- Browser auto-opens with pre-filled device code
|
|
145
|
-
- Secure OAuth 2.0 device authorization flow
|
|
146
|
-
- 30-day token expiry with automatic refresh
|
|
147
|
-
- Tokens stored securely in `~/.vizzly/config.json` with 0600 permissions
|
|
148
|
-
|
|
149
|
-
#### Logout Command
|
|
150
|
-
Clear all stored authentication tokens from your machine.
|
|
151
|
-
|
|
152
|
-
```bash
|
|
153
|
-
# Clear all tokens
|
|
154
|
-
vizzly logout
|
|
155
|
-
|
|
156
|
-
# JSON output
|
|
157
|
-
vizzly logout --json
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
Revokes tokens on the server and removes them from local storage.
|
|
32
|
+
### Local Development (TDD Mode)
|
|
161
33
|
|
|
162
|
-
|
|
163
|
-
Display current authentication status, user information, and organizations.
|
|
34
|
+
Start the TDD server, run your tests in watch mode, and see visual diffs instantly at `http://localhost:47392`.
|
|
164
35
|
|
|
165
36
|
```bash
|
|
166
|
-
# Show user and authentication info
|
|
167
|
-
vizzly whoami
|
|
168
|
-
|
|
169
|
-
# JSON output for scripting
|
|
170
|
-
vizzly whoami --json
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
Shows:
|
|
174
|
-
- Current user email and name
|
|
175
|
-
- Organizations you belong to
|
|
176
|
-
- Token status and expiry
|
|
177
|
-
- Project mappings (if any)
|
|
178
|
-
|
|
179
|
-
#### Project Commands
|
|
180
|
-
Configure directory-specific project tokens for multi-project workflows.
|
|
181
|
-
|
|
182
|
-
```bash
|
|
183
|
-
# Select a project for current directory
|
|
184
|
-
vizzly project:select
|
|
185
|
-
|
|
186
|
-
# List all configured projects
|
|
187
|
-
vizzly project:list
|
|
188
|
-
|
|
189
|
-
# Show token for current directory
|
|
190
|
-
vizzly project:token
|
|
191
|
-
|
|
192
|
-
# Remove project configuration
|
|
193
|
-
vizzly project:remove
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
**Use case:** Working on multiple Vizzly projects? Configure each project directory with its specific token. The CLI automatically uses the right token based on your current directory.
|
|
197
|
-
|
|
198
|
-
### Upload Screenshots
|
|
199
|
-
```bash
|
|
200
|
-
vizzly upload <directory> # Upload screenshots from directory
|
|
201
|
-
vizzly upload ./screenshots --wait # Wait for processing
|
|
202
|
-
vizzly upload ./screenshots --upload-all # Upload all without deduplication
|
|
203
|
-
vizzly upload ./screenshots --parallel-id "ci-run-123" # For parallel CI builds
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
### Run Tests with Integration
|
|
207
|
-
```bash
|
|
208
|
-
vizzly run "npm test" # Run with Vizzly integration
|
|
209
|
-
vizzly run "pytest" --port 3002 # Custom port
|
|
210
|
-
vizzly run "npm test" --wait # Wait for build completion
|
|
211
|
-
vizzly run "npm test" --allow-no-token # Run without API token
|
|
212
|
-
vizzly run "npm test" --parallel-id "ci-run-123" # For parallel CI builds
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
#### Run Command Options
|
|
216
|
-
|
|
217
|
-
**Server Configuration:**
|
|
218
|
-
- `--port <port>` - Port for screenshot server (default: 47392)
|
|
219
|
-
- `--timeout <ms>` - Server timeout in milliseconds (default: 30000)
|
|
220
|
-
|
|
221
|
-
**Build Configuration:**
|
|
222
|
-
- `-b, --build-name <name>` - Custom build name
|
|
223
|
-
- `--branch <branch>` - Git branch override
|
|
224
|
-
- `--commit <sha>` - Git commit SHA override
|
|
225
|
-
- `--message <msg>` - Commit message
|
|
226
|
-
- `--environment <env>` - Environment name (default: test)
|
|
227
|
-
|
|
228
|
-
**Processing Options:**
|
|
229
|
-
- `--wait` - Wait for build completion and exit with appropriate code
|
|
230
|
-
- `--threshold <number>` - Comparison threshold (CIEDE2000 Delta E, default: 2.0)
|
|
231
|
-
- `--upload-timeout <ms>` - Upload wait timeout in ms
|
|
232
|
-
- `--upload-all` - Upload all screenshots without SHA deduplication
|
|
233
|
-
|
|
234
|
-
**Parallel Execution:**
|
|
235
|
-
- `--parallel-id <id>` - Unique identifier for parallel test execution (also via `VIZZLY_PARALLEL_ID`)
|
|
236
|
-
|
|
237
|
-
**Development & Testing:**
|
|
238
|
-
- `--allow-no-token` - Allow running without API token (useful for local development)
|
|
239
|
-
- `--token <token>` - API token override
|
|
240
|
-
|
|
241
|
-
## TDD Command
|
|
242
|
-
|
|
243
|
-
For local development with visual testing, use the `tdd` command:
|
|
244
|
-
|
|
245
|
-
```bash
|
|
246
|
-
# Start TDD server (runs in background)
|
|
247
37
|
vizzly tdd start
|
|
248
|
-
|
|
249
|
-
# Run your tests in watch mode (same terminal or new one)
|
|
250
38
|
npm test -- --watch
|
|
251
|
-
|
|
252
|
-
# View the dashboard at http://localhost:47392
|
|
253
39
|
```
|
|
254
40
|
|
|
255
|
-
|
|
256
|
-
- **Visual Comparisons** - See diffs as tests run with multiple view modes
|
|
257
|
-
- **Baseline Management** - Accept/reject changes directly from the UI
|
|
258
|
-
- **Configuration Editor** - Edit settings without touching config files
|
|
259
|
-
- **Project Management** - Login, link directories to cloud projects
|
|
260
|
-
- **Test Statistics** - Real-time pass/fail metrics
|
|
261
|
-
- **Dark Theme** - Easy on the eyes during long sessions
|
|
262
|
-
|
|
263
|
-
**TDD Subcommands:**
|
|
264
|
-
|
|
265
|
-
```bash
|
|
266
|
-
# Start the TDD server (primary workflow)
|
|
267
|
-
vizzly tdd start [options]
|
|
268
|
-
|
|
269
|
-
# Run tests once with ephemeral server (generates static report)
|
|
270
|
-
vizzly tdd run "npm test" [options]
|
|
271
|
-
|
|
272
|
-
# Check TDD server status
|
|
273
|
-
vizzly tdd status
|
|
41
|
+
The dashboard shows diffs in real-time. Accept or reject changes right from the UI.
|
|
274
42
|
|
|
275
|
-
|
|
276
|
-
vizzly tdd stop
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
**TDD Command Options:**
|
|
280
|
-
- `--set-baseline` - Accept current screenshots as new baseline
|
|
281
|
-
- `--baseline-build <id>` - Use specific build as baseline (requires API token)
|
|
282
|
-
- `--threshold <number>` - Comparison threshold (CIEDE2000 Delta E, default: 2.0)
|
|
283
|
-
- `--port <port>` - Server port (default: 47392)
|
|
284
|
-
- `--timeout <ms>` - Server timeout (default: 30000)
|
|
285
|
-
- `--open` - Auto-open dashboard in browser (start command only)
|
|
286
|
-
|
|
287
|
-
### Setup and Status Commands
|
|
288
|
-
```bash
|
|
289
|
-
vizzly init # Create vizzly.config.js with defaults
|
|
290
|
-
vizzly status <build-id> # Check build progress and results
|
|
291
|
-
vizzly status <build-id> --verbose # Detailed build information
|
|
292
|
-
vizzly status <build-id> --json # Machine-readable output
|
|
293
|
-
vizzly finalize <parallel-id> # Finalize parallel build after all shards complete
|
|
294
|
-
vizzly doctor # Fast local preflight (no network)
|
|
295
|
-
vizzly doctor --api # Include API connectivity checks
|
|
296
|
-
```
|
|
43
|
+
### Cloud Integration (CI/CD)
|
|
297
44
|
|
|
298
|
-
|
|
299
|
-
Creates a basic `vizzly.config.js` configuration file with sensible defaults. No interactive
|
|
300
|
-
prompts - just generates a clean config you can customize.
|
|
45
|
+
For team collaboration and CI pipelines:
|
|
301
46
|
|
|
302
47
|
```bash
|
|
303
|
-
vizzly
|
|
304
|
-
vizzly
|
|
48
|
+
vizzly login
|
|
49
|
+
vizzly run "npm test" --wait
|
|
305
50
|
```
|
|
306
51
|
|
|
307
|
-
|
|
308
|
-
Check the progress and results of your builds. Shows comprehensive information including:
|
|
309
|
-
- Build status and progress
|
|
310
|
-
- Screenshot and comparison counts (new, changed, identical)
|
|
311
|
-
- Git branch and commit details
|
|
312
|
-
- Direct web dashboard link
|
|
313
|
-
- Timing and execution information
|
|
314
|
-
|
|
315
|
-
```bash
|
|
316
|
-
# Basic status check
|
|
317
|
-
vizzly status abc123-def456-build-id
|
|
318
|
-
|
|
319
|
-
# Detailed information for debugging
|
|
320
|
-
vizzly status abc123-def456-build-id --verbose
|
|
321
|
-
|
|
322
|
-
# JSON output for CI/CD integration
|
|
323
|
-
vizzly status abc123-def456-build-id --json
|
|
324
|
-
```
|
|
52
|
+
The `--wait` flag polls for results and exits with code 1 if visual differences are detected.
|
|
325
53
|
|
|
326
|
-
|
|
327
|
-
- Purpose: Quickly validate your local setup without network calls by default.
|
|
328
|
-
- Checks: Node.js version (>= 20), `apiUrl` format, comparison `threshold`, effective `port` (default 47392).
|
|
329
|
-
- Optional: Add `--api` to verify connectivity using your `VIZZLY_TOKEN`.
|
|
54
|
+
For CI environments, set your project token:
|
|
330
55
|
|
|
331
|
-
Examples:
|
|
332
56
|
```bash
|
|
333
|
-
|
|
334
|
-
vizzly
|
|
335
|
-
|
|
336
|
-
# Include API connectivity
|
|
337
|
-
VIZZLY_TOKEN=your-token vizzly doctor --api
|
|
338
|
-
|
|
339
|
-
# JSON output for tooling
|
|
340
|
-
vizzly doctor --json
|
|
341
|
-
```
|
|
342
|
-
|
|
343
|
-
The `tdd` command provides fast local development with immediate visual feedback. See the
|
|
344
|
-
[TDD Mode Guide](./docs/tdd-mode.md) for complete details on local visual testing.
|
|
345
|
-
|
|
346
|
-
## Configuration
|
|
347
|
-
|
|
348
|
-
Create a `vizzly.config.js` file with `vizzly init` or manually:
|
|
349
|
-
|
|
350
|
-
```javascript
|
|
351
|
-
export default {
|
|
352
|
-
// Server configuration
|
|
353
|
-
server: {
|
|
354
|
-
port: 47392,
|
|
355
|
-
timeout: 30000
|
|
356
|
-
},
|
|
357
|
-
|
|
358
|
-
// Comparison configuration (CIEDE2000 Delta E: 0=exact, 1=JND, 2=recommended)
|
|
359
|
-
comparison: {
|
|
360
|
-
threshold: 2.0,
|
|
361
|
-
ignoreAntialiasing: true
|
|
362
|
-
},
|
|
363
|
-
|
|
364
|
-
// Upload configuration
|
|
365
|
-
upload: {
|
|
366
|
-
concurrency: 5,
|
|
367
|
-
timeout: 30000
|
|
368
|
-
}
|
|
369
|
-
};
|
|
57
|
+
export VIZZLY_TOKEN=your-project-token
|
|
58
|
+
vizzly run "npm test" --wait
|
|
370
59
|
```
|
|
371
60
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
## Config Reference
|
|
61
|
+
## Capture Screenshots
|
|
375
62
|
|
|
376
|
-
|
|
63
|
+
Add screenshots to your existing tests:
|
|
377
64
|
|
|
378
|
-
## Framework Examples
|
|
379
|
-
|
|
380
|
-
### Playwright
|
|
381
65
|
```javascript
|
|
382
66
|
import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
|
|
383
67
|
|
|
384
|
-
test('homepage
|
|
68
|
+
test('homepage looks correct', async ({ page }) => {
|
|
385
69
|
await page.goto('/');
|
|
386
|
-
|
|
70
|
+
|
|
71
|
+
let screenshot = await page.screenshot();
|
|
387
72
|
await vizzlyScreenshot('homepage', screenshot, {
|
|
388
73
|
browser: 'chrome',
|
|
389
74
|
viewport: '1920x1080'
|
|
@@ -391,276 +76,59 @@ test('homepage test', async ({ page }) => {
|
|
|
391
76
|
});
|
|
392
77
|
```
|
|
393
78
|
|
|
394
|
-
|
|
395
|
-
```javascript
|
|
396
|
-
// cypress/support/commands.js
|
|
397
|
-
Cypress.Commands.add('vizzlyScreenshot', (name, properties = {}) => {
|
|
398
|
-
cy.screenshot(name, { capture: 'viewport' });
|
|
399
|
-
cy.readFile(`cypress/screenshots/${name}.png`, 'base64').then((imageBase64) => {
|
|
400
|
-
const imageBuffer = Buffer.from(imageBase64, 'base64');
|
|
401
|
-
return vizzlyScreenshot(name, imageBuffer, {
|
|
402
|
-
browser: Cypress.browser.name,
|
|
403
|
-
...properties
|
|
404
|
-
});
|
|
405
|
-
});
|
|
406
|
-
});
|
|
407
|
-
```
|
|
408
|
-
|
|
409
|
-
## CI/CD Integration
|
|
79
|
+
The client SDK is lightweight—it just POSTs to the local server. Works with any test runner. SDKs available for [JavaScript](https://docs.vizzly.dev/integration/sdk/javascript), [Ruby](https://docs.vizzly.dev/integration/sdk/ruby), [Swift](https://docs.vizzly.dev/integration/sdk/swift), and [more](https://docs.vizzly.dev/integration/sdk/overview).
|
|
410
80
|
|
|
411
|
-
|
|
81
|
+
Already saving screenshots to disk? Pass the file path instead:
|
|
412
82
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
run: npx vizzly run "npm test" --wait
|
|
417
|
-
env:
|
|
418
|
-
VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
|
|
419
|
-
# Optional: Provide correct git information from GitHub context
|
|
420
|
-
VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
|
|
421
|
-
VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
|
|
422
|
-
VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
|
|
83
|
+
```javascript
|
|
84
|
+
await page.screenshot({ path: './screenshots/homepage.png' });
|
|
85
|
+
await vizzlyScreenshot('homepage', './screenshots/homepage.png');
|
|
423
86
|
```
|
|
424
87
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
For parallel test execution, use `--parallel-id` to ensure all shards contribute to the same build:
|
|
428
|
-
|
|
429
|
-
```yaml
|
|
430
|
-
# GitHub Actions with parallel matrix
|
|
431
|
-
jobs:
|
|
432
|
-
e2e-tests:
|
|
433
|
-
strategy:
|
|
434
|
-
matrix:
|
|
435
|
-
shard: [1/4, 2/4, 3/4, 4/4]
|
|
436
|
-
steps:
|
|
437
|
-
- name: Run tests with Vizzly
|
|
438
|
-
run: |
|
|
439
|
-
npx vizzly run "npm test -- --shard=${{ matrix.shard }}" \
|
|
440
|
-
--parallel-id="${{ github.run_id }}-${{ github.run_attempt }}"
|
|
441
|
-
env:
|
|
442
|
-
VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
|
|
443
|
-
|
|
444
|
-
finalize-e2e:
|
|
445
|
-
needs: e2e-tests
|
|
446
|
-
runs-on: ubuntu-latest
|
|
447
|
-
if: always() && needs.e2e-tests.result == 'success'
|
|
448
|
-
steps:
|
|
449
|
-
- name: Finalize parallel build
|
|
450
|
-
run: |
|
|
451
|
-
npx vizzly finalize "${{ github.run_id }}-${{ github.run_attempt }}"
|
|
452
|
-
env:
|
|
453
|
-
VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
|
|
454
|
-
```
|
|
88
|
+
Or upload an existing folder of screenshots:
|
|
455
89
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
visual-tests:
|
|
459
|
-
stage: test
|
|
460
|
-
image: node:20
|
|
461
|
-
script:
|
|
462
|
-
- npm ci
|
|
463
|
-
- npx vizzly run "npm test" --wait
|
|
464
|
-
variables:
|
|
465
|
-
VIZZLY_TOKEN: $VIZZLY_TOKEN
|
|
90
|
+
```bash
|
|
91
|
+
vizzly upload ./screenshots
|
|
466
92
|
```
|
|
467
93
|
|
|
468
|
-
|
|
469
|
-
- Waits for all screenshots to be processed
|
|
470
|
-
- Exits with code `1` if visual differences are detected
|
|
471
|
-
- Exits with code `0` if all comparisons pass
|
|
472
|
-
- Allows your CI to fail appropriately when visual regressions occur
|
|
473
|
-
|
|
474
|
-
## API Reference
|
|
475
|
-
|
|
476
|
-
### `vizzlyScreenshot(name, imageBuffer, properties)`
|
|
477
|
-
Send a screenshot to Vizzly.
|
|
478
|
-
- `name` (string): Screenshot identifier
|
|
479
|
-
- `imageBuffer` (Buffer | string): Image data as Buffer, or file path to an image
|
|
480
|
-
- `properties` (object): Metadata for organization
|
|
481
|
-
|
|
482
|
-
**File Path Support:**
|
|
483
|
-
- Accepts both absolute and relative paths
|
|
484
|
-
- Automatically reads the file and converts to Buffer internally
|
|
485
|
-
- Works with any PNG image file
|
|
486
|
-
|
|
487
|
-
### `isVizzlyEnabled()`
|
|
488
|
-
Check if Vizzly is enabled in the current environment.
|
|
489
|
-
|
|
490
|
-
## AI & Editor Integrations
|
|
491
|
-
|
|
492
|
-
### Claude Code Plugin
|
|
493
|
-
|
|
494
|
-
Vizzly includes built-in support for [Claude Code](https://claude.com/code), Anthropic's official CLI tool. The integration brings AI-powered visual testing workflows directly into your development environment.
|
|
495
|
-
|
|
496
|
-
**Features:**
|
|
497
|
-
- 🤖 **AI-assisted debugging** - Get intelligent analysis of visual regressions
|
|
498
|
-
- 📊 **TDD status insights** - Check dashboard status with contextual suggestions
|
|
499
|
-
- 🔍 **Smart diff analysis** - AI helps determine if changes should be accepted or fixed
|
|
500
|
-
- ✨ **Test coverage suggestions** - Get framework-specific screenshot recommendations
|
|
501
|
-
- 🛠️ **Interactive setup** - Guided configuration and CI/CD integration help
|
|
502
|
-
|
|
503
|
-
**Getting Started with Claude Code:**
|
|
504
|
-
|
|
505
|
-
1. **Install Claude Code** (if you haven't already):
|
|
506
|
-
```bash
|
|
507
|
-
npm install -g @anthropic-ai/claude-code
|
|
508
|
-
```
|
|
509
|
-
|
|
510
|
-
2. **Install the Vizzly plugin** via Claude Code marketplace:
|
|
511
|
-
```
|
|
512
|
-
/plugin marketplace add vizzly-testing/cli
|
|
513
|
-
```
|
|
514
|
-
|
|
515
|
-
3. **Use AI-powered workflows** with slash commands:
|
|
516
|
-
```
|
|
517
|
-
/vizzly:check-visual-tests # Check dev server status with AI insights
|
|
518
|
-
/vizzly:debug-visual-regression # Analyze visual failures with AI
|
|
519
|
-
/vizzly:suggest-screenshots # Find test coverage gaps
|
|
520
|
-
/vizzly:setup # Interactive setup wizard
|
|
521
|
-
```
|
|
522
|
-
|
|
523
|
-
The plugin works seamlessly with both local dev mode and cloud builds, providing contextual help based on your current workflow.
|
|
524
|
-
|
|
525
|
-
## Plugin Ecosystem
|
|
526
|
-
|
|
527
|
-
Vizzly supports a powerful plugin system that allows you to extend the CLI with custom
|
|
528
|
-
commands. Plugins are automatically discovered from `@vizzly-testing/*` packages or can be
|
|
529
|
-
explicitly configured.
|
|
530
|
-
|
|
531
|
-
### Official Plugins
|
|
532
|
-
|
|
533
|
-
- **Claude Code Integration** *(built-in)* - AI-powered visual testing workflows for Claude Code
|
|
534
|
-
- **[@vizzly-testing/storybook](https://npmjs.com/package/@vizzly-testing/storybook)** *(coming
|
|
535
|
-
soon)* - Capture screenshots from Storybook builds
|
|
536
|
-
|
|
537
|
-
### Using Plugins
|
|
94
|
+
## Configuration
|
|
538
95
|
|
|
539
|
-
|
|
96
|
+
Generate a config file:
|
|
540
97
|
|
|
541
98
|
```bash
|
|
542
|
-
|
|
543
|
-
npm install @vizzly-testing/storybook
|
|
544
|
-
|
|
545
|
-
# Use immediately - commands are automatically available!
|
|
546
|
-
vizzly storybook ./storybook-static
|
|
547
|
-
|
|
548
|
-
# Plugin commands show in help
|
|
549
|
-
vizzly --help
|
|
99
|
+
vizzly init
|
|
550
100
|
```
|
|
551
101
|
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
You can create your own plugins to add custom commands:
|
|
102
|
+
Or create `vizzly.config.js` manually:
|
|
555
103
|
|
|
556
104
|
```javascript
|
|
557
|
-
// plugin.js
|
|
558
105
|
export default {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
register(program, { config, logger, services }) {
|
|
562
|
-
program
|
|
563
|
-
.command('my-command')
|
|
564
|
-
.description('My custom command')
|
|
565
|
-
.action(async () => {
|
|
566
|
-
logger.info('Running my command!');
|
|
567
|
-
});
|
|
106
|
+
comparison: {
|
|
107
|
+
threshold: 2.0 // CIEDE2000 Delta E (0=exact, 2=recommended)
|
|
568
108
|
}
|
|
569
109
|
};
|
|
570
110
|
```
|
|
571
111
|
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
```javascript
|
|
575
|
-
export default {
|
|
576
|
-
plugins: ['./plugin.js']
|
|
577
|
-
};
|
|
578
|
-
```
|
|
112
|
+
## Commands
|
|
579
113
|
|
|
580
|
-
|
|
114
|
+
| Command | Description |
|
|
115
|
+
|---------|-------------|
|
|
116
|
+
| `vizzly tdd start` | Start local TDD server with dashboard |
|
|
117
|
+
| `vizzly tdd run "cmd"` | Run tests once, generate static report |
|
|
118
|
+
| `vizzly run "cmd"` | Run tests with cloud integration |
|
|
119
|
+
| `vizzly upload <dir>` | Upload existing screenshots |
|
|
120
|
+
| `vizzly login` | Authenticate via browser |
|
|
121
|
+
| `vizzly doctor` | Validate local setup |
|
|
581
122
|
|
|
582
123
|
## Documentation
|
|
583
124
|
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
- [Upload Command Guide](./docs/upload-command.md)
|
|
587
|
-
- [Test Integration Guide](./docs/test-integration.md)
|
|
588
|
-
- [Dev Mode Guide](./docs/dev-mode.md)
|
|
589
|
-
- [Plugin Development](./docs/plugins.md)
|
|
590
|
-
- [API Reference](./docs/api-reference.md)
|
|
591
|
-
- [Doctor Command](./docs/doctor-command.md)
|
|
592
|
-
|
|
593
|
-
**AI & Editor Integrations:**
|
|
594
|
-
- Claude Code Plugin - Built-in support (see [AI & Editor Integrations](#ai--editor-integrations) above)
|
|
595
|
-
|
|
596
|
-
## Environment Variables
|
|
597
|
-
|
|
598
|
-
### Authentication
|
|
599
|
-
- `VIZZLY_TOKEN`: API authentication token (project token or access token). Example: `export VIZZLY_TOKEN=your-token`.
|
|
600
|
-
- For local development: Use `vizzly login` instead of manually managing tokens
|
|
601
|
-
- For CI/CD: Use project tokens from environment variables
|
|
602
|
-
|
|
603
|
-
### Core Configuration
|
|
604
|
-
- `VIZZLY_API_URL`: Override API base URL. Default: `https://app.vizzly.dev`.
|
|
605
|
-
- `VIZZLY_LOG_LEVEL`: Logger level. One of `debug`, `info`, `warn`, `error`. Example: `export VIZZLY_LOG_LEVEL=debug`.
|
|
606
|
-
|
|
607
|
-
### Parallel Builds
|
|
608
|
-
- `VIZZLY_PARALLEL_ID`: Unique identifier for parallel test execution. Example: `export VIZZLY_PARALLEL_ID=ci-run-123`.
|
|
609
|
-
|
|
610
|
-
### Git Information Override
|
|
611
|
-
For enhanced CI/CD integration, you can override git detection with these environment variables:
|
|
612
|
-
|
|
613
|
-
- `VIZZLY_COMMIT_SHA`: Override detected commit SHA. Useful in CI environments.
|
|
614
|
-
- `VIZZLY_COMMIT_MESSAGE`: Override detected commit message. Useful in CI environments.
|
|
615
|
-
- `VIZZLY_BRANCH`: Override detected branch name. Useful in CI environments.
|
|
616
|
-
- `VIZZLY_PR_NUMBER`: Override detected pull request number. Useful for PR-specific builds.
|
|
617
|
-
|
|
618
|
-
**Example for GitHub Actions:**
|
|
619
|
-
```yaml
|
|
620
|
-
env:
|
|
621
|
-
VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
|
|
622
|
-
VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
|
|
623
|
-
VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
|
|
624
|
-
VIZZLY_PR_NUMBER: ${{ github.event.pull_request.number }}
|
|
625
|
-
```
|
|
626
|
-
|
|
627
|
-
These variables take highest priority over both CLI arguments and automatic git detection.
|
|
125
|
+
Full documentation at **[docs.vizzly.dev](https://docs.vizzly.dev)**—including framework guides,
|
|
126
|
+
CI/CD setup, configuration reference, and more.
|
|
628
127
|
|
|
629
128
|
## Contributing
|
|
630
129
|
|
|
631
|
-
|
|
632
|
-
your help makes Vizzly better for everyone.
|
|
633
|
-
|
|
634
|
-
### Getting Started
|
|
635
|
-
|
|
636
|
-
1. Fork the repository on [GitHub](https://github.com/vizzly-testing/cli)
|
|
637
|
-
2. Clone your fork locally: `git clone https://github.com/your-username/cli.git`
|
|
638
|
-
3. Install dependencies: `npm install`
|
|
639
|
-
4. Run tests to ensure everything works: `npm test`
|
|
640
|
-
|
|
641
|
-
### Development Workflow
|
|
642
|
-
|
|
643
|
-
1. Create a feature branch: `git checkout -b feature/your-feature-name`
|
|
644
|
-
2. Make your changes and **add tests** for any new functionality
|
|
645
|
-
3. Run the linter: `npm run lint`
|
|
646
|
-
4. Run tests: `npm test`
|
|
647
|
-
5. Commit your changes using [gitmoji](https://gitmoji.dev/) format: `git commit -m '✨ Add your feature'`
|
|
648
|
-
6. Push to your fork: `git push origin feature/your-feature-name`
|
|
649
|
-
7. Open a Pull Request
|
|
650
|
-
|
|
651
|
-
### Reporting Issues
|
|
652
|
-
|
|
653
|
-
Found a bug or have a feature request? Please [open an issue](https://github.com/vizzly-testing/cli/issues) with:
|
|
654
|
-
|
|
655
|
-
- A clear description of the problem or request
|
|
656
|
-
- Steps to reproduce (for bugs)
|
|
657
|
-
- Your environment details (OS, Node.js version, etc.)
|
|
658
|
-
|
|
659
|
-
### Development Setup
|
|
660
|
-
|
|
661
|
-
The CLI is built with modern JavaScript and requires Node.js 20+ (LTS). See the development scripts
|
|
662
|
-
in `package.json` for available commands.
|
|
130
|
+
Found a bug? Have an idea? [Open an issue](https://github.com/vizzly-testing/cli/issues) or submit a PR.
|
|
663
131
|
|
|
664
132
|
## License
|
|
665
133
|
|
|
666
|
-
MIT
|
|
134
|
+
MIT
|