@vizzly-testing/cli 0.23.1 → 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.
Files changed (36) hide show
  1. package/README.md +54 -586
  2. package/dist/api/client.js +3 -1
  3. package/dist/api/endpoints.js +6 -7
  4. package/dist/cli.js +15 -2
  5. package/dist/commands/finalize.js +12 -0
  6. package/dist/commands/preview.js +210 -28
  7. package/dist/commands/run.js +15 -0
  8. package/dist/commands/status.js +34 -8
  9. package/dist/commands/upload.js +13 -0
  10. package/package.json +1 -2
  11. package/claude-plugin/.claude-plugin/README.md +0 -270
  12. package/claude-plugin/.claude-plugin/marketplace.json +0 -28
  13. package/claude-plugin/.claude-plugin/plugin.json +0 -14
  14. package/claude-plugin/.mcp.json +0 -12
  15. package/claude-plugin/CHANGELOG.md +0 -85
  16. package/claude-plugin/commands/setup.md +0 -137
  17. package/claude-plugin/commands/suggest-screenshots.md +0 -111
  18. package/claude-plugin/mcp/vizzly-docs-server/README.md +0 -95
  19. package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js +0 -110
  20. package/claude-plugin/mcp/vizzly-docs-server/index.js +0 -283
  21. package/claude-plugin/mcp/vizzly-server/cloud-api-provider.js +0 -399
  22. package/claude-plugin/mcp/vizzly-server/index.js +0 -927
  23. package/claude-plugin/mcp/vizzly-server/local-tdd-provider.js +0 -455
  24. package/claude-plugin/mcp/vizzly-server/token-resolver.js +0 -185
  25. package/claude-plugin/skills/check-visual-tests/SKILL.md +0 -158
  26. package/claude-plugin/skills/debug-visual-regression/SKILL.md +0 -269
  27. package/docs/api-reference.md +0 -1003
  28. package/docs/authentication.md +0 -334
  29. package/docs/doctor-command.md +0 -44
  30. package/docs/getting-started.md +0 -131
  31. package/docs/internal/SDK-API.md +0 -1018
  32. package/docs/plugins.md +0 -557
  33. package/docs/tdd-mode.md +0 -594
  34. package/docs/test-integration.md +0 -523
  35. package/docs/tui-elements.md +0 -560
  36. package/docs/upload-command.md +0 -196
package/README.md CHANGED
@@ -1,389 +1,74 @@
1
1
  # Vizzly CLI
2
2
 
3
- > Visual review platform for UI developers and designers
3
+ > Visual proof that your UI works
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/@vizzly-testing/cli.svg)](https://www.npmjs.com/package/@vizzly-testing/cli)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
 
8
- ## What is Vizzly?
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 is a visual review platform designed for how modern teams work. Instead of recreating your
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
- It's fast because we don't render anything—we process the images you provide from any source. Bring
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
- ## Features
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
- - 📸 **Smart Screenshots** - Automatic deduplication and intelligent diffing
21
- - 🎨 **Any Screenshot** - Web, mobile, desktop, design mockups, or any visual content
22
- - 🏃 **TDD Mode** - Local visual testing with interactive dashboard, settings, and project tools
23
- - 📊 **Beautiful Dashboard** - Intuitive web interface for reviewing changes
24
- - 👥 **Team Collaboration** - Built for UI developers and designers to work together
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
- Requirements: Node.js 20 or newer.
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
- ### Authentication
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
- #### Whoami Command
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
- **Interactive Dashboard:** The TDD dashboard provides real-time feedback:
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
- # Stop a running TDD server
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
- #### Init Command
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 init # Create config file
304
- vizzly init --force # Overwrite existing config
48
+ vizzly login
49
+ vizzly run "npm test" --wait
305
50
  ```
306
51
 
307
- #### Status Command
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
- ### Doctor
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
- # Local-only checks
334
- vizzly doctor
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
- Run `vizzly init` to generate this file automatically with sensible defaults.
373
-
374
- ## Config Reference
61
+ ## Capture Screenshots
375
62
 
376
- For the full configuration schema and CLI options, see docs/api-reference.md.
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 test', async ({ page }) => {
68
+ test('homepage looks correct', async ({ page }) => {
385
69
  await page.goto('/');
386
- const screenshot = await page.screenshot();
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
- ### Cypress
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
- For CI/CD pipelines, use the `--wait` flag to wait for visual comparison results and get appropriate exit codes:
81
+ Already saving screenshots to disk? Pass the file path instead:
412
82
 
413
- ### GitHub Actions
414
- ```yaml
415
- - name: Visual Tests
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
- ### Parallel Builds in CI
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
- ### GitLab CI
457
- ```yaml
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
- The `--wait` flag ensures the process:
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
- Plugins under the `@vizzly-testing/*` scope are auto-discovered:
96
+ Generate a config file:
540
97
 
541
98
  ```bash
542
- # Install plugin
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
- ### Creating Plugins
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
- name: 'my-plugin',
560
- version: '1.0.0',
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
- Add to your `vizzly.config.js`:
573
-
574
- ```javascript
575
- export default {
576
- plugins: ['./plugin.js']
577
- };
578
- ```
112
+ ## Commands
579
113
 
580
- See the [Plugin Development Guide](./docs/plugins.md) for complete documentation and examples.
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
- - [Getting Started](./docs/getting-started.md)
585
- - [Authentication Guide](./docs/authentication.md)
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
- We welcome contributions! Whether you're fixing bugs, adding features, or improving documentation,
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 © Stubborn Mule Software
134
+ MIT