@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.
Files changed (38) 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/dist/reporter/reporter-bundle.iife.js +19 -19
  11. package/dist/utils/ci-env.js +114 -16
  12. package/package.json +1 -2
  13. package/claude-plugin/.claude-plugin/README.md +0 -270
  14. package/claude-plugin/.claude-plugin/marketplace.json +0 -28
  15. package/claude-plugin/.claude-plugin/plugin.json +0 -14
  16. package/claude-plugin/.mcp.json +0 -12
  17. package/claude-plugin/CHANGELOG.md +0 -85
  18. package/claude-plugin/commands/setup.md +0 -137
  19. package/claude-plugin/commands/suggest-screenshots.md +0 -111
  20. package/claude-plugin/mcp/vizzly-docs-server/README.md +0 -95
  21. package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js +0 -110
  22. package/claude-plugin/mcp/vizzly-docs-server/index.js +0 -283
  23. package/claude-plugin/mcp/vizzly-server/cloud-api-provider.js +0 -399
  24. package/claude-plugin/mcp/vizzly-server/index.js +0 -927
  25. package/claude-plugin/mcp/vizzly-server/local-tdd-provider.js +0 -455
  26. package/claude-plugin/mcp/vizzly-server/token-resolver.js +0 -185
  27. package/claude-plugin/skills/check-visual-tests/SKILL.md +0 -158
  28. package/claude-plugin/skills/debug-visual-regression/SKILL.md +0 -269
  29. package/docs/api-reference.md +0 -1003
  30. package/docs/authentication.md +0 -334
  31. package/docs/doctor-command.md +0 -44
  32. package/docs/getting-started.md +0 -131
  33. package/docs/internal/SDK-API.md +0 -1018
  34. package/docs/plugins.md +0 -557
  35. package/docs/tdd-mode.md +0 -594
  36. package/docs/test-integration.md +0 -523
  37. package/docs/tui-elements.md +0 -560
  38. package/docs/upload-command.md +0 -196
@@ -1,334 +0,0 @@
1
- # Authentication Guide
2
-
3
- Vizzly CLI supports flexible authentication to fit different workflows: user authentication for local development and API tokens for CI/CD pipelines.
4
-
5
- ## Overview
6
-
7
- The CLI provides two authentication methods:
8
-
9
- 1. **User Authentication** - OAuth-based login for individual developers
10
- 2. **API Tokens** - Direct token authentication for automation and CI/CD
11
-
12
- ## User Authentication (Recommended for Local Development)
13
-
14
- User authentication uses OAuth 2.0 device flow to securely authenticate with your Vizzly account.
15
-
16
- ### Login
17
-
18
- ```bash
19
- vizzly login
20
- ```
21
-
22
- **What happens:**
23
- 1. CLI displays a device code
24
- 2. Browser automatically opens to https://app.vizzly.dev/auth/device
25
- 3. Device code is pre-filled in the form
26
- 4. You authorize the CLI with your Vizzly account
27
- 5. Access token is stored securely in `~/.vizzly/config.json`
28
-
29
- **Features:**
30
- - 30-day token expiry with automatic refresh
31
- - Secure storage with 0600 file permissions (Unix/Linux/macOS)
32
- - Works across all your projects
33
-
34
- **JSON Output:**
35
- ```bash
36
- vizzly login --json
37
- ```
38
-
39
- Returns machine-readable output for scripting:
40
- ```json
41
- {
42
- "success": true,
43
- "user": {
44
- "email": "you@example.com",
45
- "name": "Your Name"
46
- }
47
- }
48
- ```
49
-
50
- ### Check Authentication Status
51
-
52
- ```bash
53
- vizzly whoami
54
- ```
55
-
56
- Shows:
57
- - Current user email and name
58
- - Organizations you belong to
59
- - Token expiry date
60
- - Project mappings (if configured)
61
-
62
- **Example output:**
63
- ```
64
- Authenticated as you@example.com (Your Name)
65
-
66
- Organizations:
67
- - Acme Inc
68
- - Personal
69
-
70
- Token expires: 2025-11-15
71
-
72
- Project mappings:
73
- /Users/you/projects/acme-app → Acme Inc / Marketing Site
74
- ```
75
-
76
- **JSON Output:**
77
- ```bash
78
- vizzly whoami --json
79
- ```
80
-
81
- ### Logout
82
-
83
- ```bash
84
- vizzly logout
85
- ```
86
-
87
- Clears all stored authentication:
88
- - Revokes tokens on the server
89
- - Removes tokens from `~/.vizzly/config.json`
90
- - Clears project mappings
91
-
92
- ## Project-Specific Tokens
93
-
94
- For multi-project workflows, configure directory-specific tokens.
95
-
96
- ### Select a Project
97
-
98
- ```bash
99
- cd /path/to/project
100
- vizzly project:select
101
- ```
102
-
103
- **Interactive prompts:**
104
- 1. Choose an organization
105
- 2. Choose a project
106
- 3. Token is mapped to current directory path
107
-
108
- The CLI automatically uses the correct token based on your current directory.
109
-
110
- ### List Projects
111
-
112
- ```bash
113
- vizzly project:list
114
- ```
115
-
116
- Shows all configured project mappings:
117
- ```
118
- Project mappings:
119
- /Users/you/projects/acme-app → Acme Inc / Marketing Site
120
- /Users/you/projects/startup → Personal / Landing Page
121
- ```
122
-
123
- ### Show Project Token
124
-
125
- ```bash
126
- vizzly project:token
127
- ```
128
-
129
- Displays the project token for the current directory (first 10 characters only for security).
130
-
131
- **JSON Output:**
132
- ```bash
133
- vizzly project:token --json
134
- ```
135
-
136
- ### Remove Project Configuration
137
-
138
- ```bash
139
- vizzly project:remove
140
- ```
141
-
142
- Removes the project mapping for the current directory.
143
-
144
- ## API Token Authentication (Recommended for CI/CD)
145
-
146
- For automated environments, use project tokens directly.
147
-
148
- ### Using Environment Variables
149
-
150
- ```bash
151
- export VIZZLY_TOKEN=vzt_your_project_token_here
152
- vizzly run "npm test"
153
- ```
154
-
155
- ### Using CLI Flags
156
-
157
- ```bash
158
- vizzly run "npm test" --token vzt_your_project_token_here
159
- ```
160
-
161
- ### Using .env Files (Local Development)
162
-
163
- Create a `.env` file in your project root:
164
-
165
- ```
166
- VIZZLY_TOKEN=vzt_your_project_token_here
167
- ```
168
-
169
- **Important:** Add `.env` to your `.gitignore` to prevent committing secrets.
170
-
171
- ### CI/CD Integration
172
-
173
- Use your CI provider's secret management:
174
-
175
- **GitHub Actions:**
176
- ```yaml
177
- - name: Run visual tests
178
- run: npx vizzly run "npm test" --wait
179
- env:
180
- VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
181
- ```
182
-
183
- **GitLab CI:**
184
- ```yaml
185
- visual-tests:
186
- script:
187
- - npx vizzly run "npm test" --wait
188
- variables:
189
- VIZZLY_TOKEN: $VIZZLY_TOKEN
190
- ```
191
-
192
- **CircleCI:**
193
- ```yaml
194
- - run:
195
- name: Visual tests
196
- command: npx vizzly run "npm test" --wait
197
- environment:
198
- VIZZLY_TOKEN: $VIZZLY_TOKEN
199
- ```
200
-
201
- ## Token Resolution Priority
202
-
203
- The CLI resolves tokens in this order (highest to lowest):
204
-
205
- 1. **CLI flag** (`--token`)
206
- 2. **Environment variable** (`VIZZLY_TOKEN`)
207
- 3. **Project mapping** (from `vizzly project:select`)
208
- 4. **User access token** (from `vizzly login`)
209
-
210
- This allows flexible authentication across different contexts.
211
-
212
- ### Examples
213
-
214
- **Override with CLI flag:**
215
- ```bash
216
- vizzly run "npm test" --token vzt_different_token
217
- ```
218
-
219
- **Use project mapping:**
220
- ```bash
221
- cd /path/to/project
222
- vizzly run "npm test" # Uses token from project:select
223
- ```
224
-
225
- **Fallback to user token:**
226
- ```bash
227
- vizzly login
228
- cd /new/project
229
- vizzly run "npm test" # Uses user access token
230
- ```
231
-
232
- ## Token Storage
233
-
234
- Tokens are stored in `~/.vizzly/config.json` with the following structure:
235
-
236
- ```json
237
- {
238
- "accessToken": "vzt_...",
239
- "refreshToken": "vzr_...",
240
- "expiresAt": "2025-11-15T10:30:00Z",
241
- "user": {
242
- "id": "usr_...",
243
- "email": "you@example.com",
244
- "name": "Your Name"
245
- },
246
- "projectMappings": {
247
- "/Users/you/projects/acme-app": {
248
- "organizationId": "org_...",
249
- "organizationName": "Acme Inc",
250
- "projectId": "prj_...",
251
- "projectName": "Marketing Site",
252
- "token": "vzt_..."
253
- }
254
- }
255
- }
256
- ```
257
-
258
- **Security:**
259
- - File created with `0600` permissions (owner read/write only)
260
- - On Windows, permissions are set via ACLs when possible
261
- - Never commit this file to version control
262
-
263
- ## Token Refresh
264
-
265
- Access tokens expire after 30 days. The CLI automatically refreshes tokens:
266
-
267
- - **5-minute expiry buffer** - Tokens are refreshed 5 minutes before expiry
268
- - **Automatic refresh on 401** - If a request fails with 401, token is refreshed and retried
269
- - **Refresh tokens** - Long-lived refresh tokens are used to obtain new access tokens
270
-
271
- You don't need to manually manage token refresh.
272
-
273
- ## Troubleshooting
274
-
275
- ### "Not authenticated" error
276
-
277
- **Solution:**
278
- ```bash
279
- vizzly login
280
- ```
281
-
282
- Or set `VIZZLY_TOKEN` environment variable.
283
-
284
- ### "Token expired" error
285
-
286
- **Solution:**
287
- The CLI should auto-refresh. If it doesn't:
288
- ```bash
289
- vizzly logout
290
- vizzly login
291
- ```
292
-
293
- ### Permission denied writing config file
294
-
295
- **Linux/macOS:**
296
- ```bash
297
- chmod 700 ~/.vizzly
298
- chmod 600 ~/.vizzly/config.json
299
- ```
300
-
301
- **Windows:**
302
- Run CLI as administrator or check file permissions.
303
-
304
- ### Project token not being used
305
-
306
- **Solution:**
307
- Verify project mapping:
308
- ```bash
309
- vizzly project:list
310
- ```
311
-
312
- Check you're in the correct directory. The CLI traverses parent directories to find project mappings.
313
-
314
- ### Browser doesn't open during login
315
-
316
- **Solution:**
317
- 1. Copy the device code shown in the terminal
318
- 2. Manually visit https://app.vizzly.dev/auth/device
319
- 3. Paste the device code
320
- 4. Press Enter in the terminal after authorizing
321
-
322
- ## Security Best Practices
323
-
324
- 1. **Never commit tokens** - Add `.env` and `~/.vizzly/config.json` to `.gitignore`
325
- 2. **Use CI secrets** - Store `VIZZLY_TOKEN` in your CI provider's secret manager
326
- 3. **Rotate tokens regularly** - Generate new project tokens periodically
327
- 4. **Use project tokens in CI** - Don't use personal access tokens in shared pipelines
328
- 5. **Limit token scope** - Use project-specific tokens instead of organization-wide tokens when possible
329
-
330
- ## Next Steps
331
-
332
- - [Getting Started Guide](./getting-started.md)
333
- - [Test Integration Guide](./test-integration.md)
334
- - [API Reference](./api-reference.md)
@@ -1,44 +0,0 @@
1
- # Doctor Command
2
-
3
- The `doctor` command provides a quick preflight to validate your local setup. It is designed to be fast and non-invasive by default.
4
-
5
- ## Summary
6
-
7
- - Local-only checks by default (no network)
8
- - Optional API connectivity check via `--api`
9
- - Node.js 20+ required
10
-
11
- ## What It Checks
12
-
13
- - Node.js version: must be 20 or newer
14
- - `apiUrl`: must be a valid `http` or `https` URL
15
- - `comparison.threshold`: a non-negative number (CIEDE2000 Delta E units, default: 2.0)
16
- - Effective `server.port`: reports the port without binding (default `47392`)
17
-
18
- ## Usage
19
-
20
- ```bash
21
- # Local-only checks
22
- vizzly doctor
23
-
24
- # Include API connectivity checks (requires VIZZLY_TOKEN)
25
- vizzly doctor --api
26
-
27
- # JSON output for CI/tooling
28
- vizzly doctor --json
29
- ```
30
-
31
- ## Environment Variables
32
-
33
- - `VIZZLY_API_URL` — Override the API base URL (default: `https://app.vizzly.dev`)
34
- - `VIZZLY_TOKEN` — API token used only when `--api` is provided
35
-
36
- ## Exit Codes
37
-
38
- - `0` — All requested checks passed
39
- - `1` — One or more checks failed
40
-
41
- ## Notes
42
-
43
- - The `--api` flag performs a minimal, read-only API request to verify connectivity.
44
- - The command does not bind or reserve the configured port; it only reports it.
@@ -1,131 +0,0 @@
1
- # Getting Started with Vizzly CLI
2
-
3
- ## Installation
4
-
5
- ```bash
6
- npm install -g @vizzly-testing/cli
7
- # or
8
- npx @vizzly-testing/cli
9
- ```
10
-
11
- ## Quick Start
12
-
13
- ### Requirements
14
-
15
- - Node.js 20 or newer
16
-
17
- ### 1. Initialize your project
18
-
19
- ```bash
20
- npx vizzly init
21
- ```
22
-
23
- This creates a basic `vizzly.config.js` file with sensible defaults.
24
-
25
- ### 2. Authenticate
26
-
27
- **Option 1: User Authentication (Recommended for local development)**
28
-
29
- ```bash
30
- # Authenticate with your Vizzly account
31
- npx vizzly login
32
-
33
- # Optional: Configure project-specific token for this directory
34
- npx vizzly project:select
35
- ```
36
-
37
- **Option 2: API Token (Recommended for CI/CD)**
38
-
39
- ```bash
40
- export VIZZLY_TOKEN=your-project-token
41
- ```
42
-
43
- **Token Priority:**
44
- The CLI resolves tokens in this order:
45
- 1. CLI flag (`--token`)
46
- 2. Environment variable (`VIZZLY_TOKEN`)
47
- 3. Project mapping (from `vizzly project:select`)
48
- 4. User access token (from `vizzly login`)
49
-
50
- ### 3. Verify your setup
51
-
52
- Run a fast local preflight:
53
-
54
- ```bash
55
- npx vizzly doctor
56
- ```
57
-
58
- Optionally, include API connectivity:
59
-
60
- ```bash
61
- VIZZLY_TOKEN=your-api-token npx vizzly doctor --api
62
- ```
63
-
64
- ### 4. Upload existing screenshots
65
-
66
- ```bash
67
- # Upload a directory of screenshots
68
- npx vizzly upload ./screenshots
69
-
70
- # Upload with metadata
71
- npx vizzly upload ./screenshots --build-name "Release v1.2.3"
72
- ```
73
-
74
- ### 5. Integrate with your tests
75
-
76
- ```bash
77
- # Run your test suite with Vizzly
78
- npx vizzly run "npm test"
79
-
80
- # Use TDD mode for local development
81
- npx vizzly tdd run "npm test"
82
- ```
83
-
84
- ### 6. In your test code
85
-
86
- ```javascript
87
- import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
88
-
89
- // Take a screenshot with your test framework
90
- const screenshot = await page.screenshot();
91
-
92
- // Send to Vizzly
93
- await vizzlyScreenshot('homepage', screenshot, {
94
- browser: 'chrome',
95
- viewport: '1920x1080'
96
- });
97
- ```
98
-
99
- ### 7. Check build status
100
-
101
- After running tests or uploading screenshots, check your build status:
102
-
103
- ```bash
104
- # Check status of a specific build
105
- npx vizzly status your-build-id
106
-
107
- # Get detailed information
108
- npx vizzly status your-build-id --verbose
109
-
110
- # JSON output for automation
111
- npx vizzly status your-build-id --json
112
- ```
113
-
114
- The status command shows:
115
- - Build progress and completion status
116
- - Screenshot and comparison counts
117
- - Direct link to view results in the web dashboard
118
- - Git branch and commit information
119
- - Timing and execution details
120
-
121
- ## Next Steps
122
-
123
- - [Upload Command Guide](./upload-command.md)
124
- - [Test Integration Guide](./test-integration.md)
125
- - [TDD Mode Guide](./tdd-mode.md)
126
- - [API Reference](./api-reference.md)
127
- If you’re using a self-hosted or preview API, override the base URL:
128
-
129
- ```bash
130
- export VIZZLY_API_URL=https://your-api.example.com
131
- ```