@alwaysmeticulous/cli 2.331.3 → 2.332.0
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 +16 -0
- package/dist/commands/onboard/__tests__/print-next-steps.spec.d.ts +2 -0
- package/dist/commands/onboard/__tests__/print-next-steps.spec.d.ts.map +1 -0
- package/dist/commands/onboard/__tests__/print-next-steps.spec.js +67 -0
- package/dist/commands/onboard/__tests__/print-next-steps.spec.js.map +1 -0
- package/dist/commands/onboard/__tests__/resolve-project.spec.d.ts +2 -0
- package/dist/commands/onboard/__tests__/resolve-project.spec.d.ts.map +1 -0
- package/dist/commands/onboard/__tests__/resolve-project.spec.js +44 -0
- package/dist/commands/onboard/__tests__/resolve-project.spec.js.map +1 -0
- package/dist/commands/onboard/__tests__/skills-install-choice.spec.d.ts +2 -0
- package/dist/commands/onboard/__tests__/skills-install-choice.spec.d.ts.map +1 -0
- package/dist/commands/onboard/__tests__/skills-install-choice.spec.js +51 -0
- package/dist/commands/onboard/__tests__/skills-install-choice.spec.js.map +1 -0
- package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.d.ts +2 -0
- package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.d.ts.map +1 -0
- package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.js +112 -0
- package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.js.map +1 -0
- package/dist/commands/onboard/build-context.d.ts +1 -0
- package/dist/commands/onboard/build-context.d.ts.map +1 -1
- package/dist/commands/onboard/build-context.js +6 -6
- package/dist/commands/onboard/build-context.js.map +1 -1
- package/dist/commands/onboard/customer-agents.json +0 -1
- package/dist/commands/onboard/customer-docs.json +1 -0
- package/dist/commands/onboard/docs-urls.d.ts +2 -0
- package/dist/commands/onboard/docs-urls.d.ts.map +1 -1
- package/dist/commands/onboard/docs-urls.js +5 -3
- package/dist/commands/onboard/docs-urls.js.map +1 -1
- package/dist/commands/onboard/index.d.ts.map +1 -1
- package/dist/commands/onboard/index.js +8 -6
- package/dist/commands/onboard/index.js.map +1 -1
- package/dist/commands/onboard/launch-agent.d.ts +1 -0
- package/dist/commands/onboard/launch-agent.d.ts.map +1 -1
- package/dist/commands/onboard/launch-agent.js +26 -15
- package/dist/commands/onboard/launch-agent.js.map +1 -1
- package/dist/commands/onboard/resolve-project.d.ts +9 -1
- package/dist/commands/onboard/resolve-project.d.ts.map +1 -1
- package/dist/commands/onboard/resolve-project.js +26 -4
- package/dist/commands/onboard/resolve-project.js.map +1 -1
- package/dist/commands/onboard/setup-agent-integrations.d.ts +2 -1
- package/dist/commands/onboard/setup-agent-integrations.d.ts.map +1 -1
- package/dist/commands/onboard/setup-agent-integrations.js +32 -7
- package/dist/commands/onboard/setup-agent-integrations.js.map +1 -1
- package/dist/commands/onboard/templates/CLAUDE.md +22 -9
- package/dist/commands/onboard/templates/agents/ci-setup.md +28 -0
- package/dist/commands/onboard/templates/agents/recorder-installation.md +6 -0
- package/dist/commands/onboard/templates/docs/ci.ts +2 -6
- package/dist/commands/onboard/templates/docs/github-actions-v2.ts +43 -37
- package/dist/commands/onboard/templates/docs/how-to/connect-git-provider.ts +26 -0
- package/dist/commands/onboard/templates/docs/how-to/typescript-types.ts +1 -1
- package/dist/commands/onboard/templates/docs/onboarding-guide.ts +77 -356
- package/dist/commands/onboard/templates/docs/recorder-getting-started.ts +5 -2
- package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/nuxtjs-instructions.ts +1 -1
- package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/rsbuild-instructions.ts +1 -1
- package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/vite-instructions.ts +1 -1
- package/dist/commands/onboard/templates/docs/reference/cli-commands.ts +37 -0
- package/dist/commands/onboard/validate-ci-yaml.d.ts +22 -0
- package/dist/commands/onboard/validate-ci-yaml.d.ts.map +1 -0
- package/dist/commands/onboard/validate-ci-yaml.js +113 -0
- package/dist/commands/onboard/validate-ci-yaml.js.map +1 -0
- package/package.json +14 -13
- package/dist/commands/onboard/templates/agents/local-simulation-verification.md +0 -96
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
ENSURE_RECORDER_CAPTURES_ALL_REQUESTS_URL,
|
|
2
|
+
CI_SETUP_URL,
|
|
3
|
+
DETECT_DIFFS_LOCALLY_URL,
|
|
5
4
|
FAQ_AND_TROUBLESHOOTING_URL,
|
|
6
5
|
FIX_FALSE_POSITIVES_URL,
|
|
7
6
|
GITHUB_ACTIONS_SETUP_URL,
|
|
7
|
+
INSTALL_RECORDER_URL,
|
|
8
8
|
MAKE_CHECK_BLOCKING_URL,
|
|
9
|
-
NETWORK_STUBBING_EXPLANATION_URL,
|
|
10
|
-
NEXTJS_APP_ROUTER_ADDITIONAL_SETUP_URL,
|
|
11
|
-
REACT_VITE_URL,
|
|
12
9
|
RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL,
|
|
13
|
-
TESTING_FEATURE_FLAGS,
|
|
14
10
|
TROUBLESHOOT_AUTH_URL,
|
|
15
11
|
TROUBLESHOOT_RECORDER_URL,
|
|
16
|
-
VUE_VITE_URL,
|
|
17
12
|
} from "src/lib/utils/internal-urls/docs-urls.utils";
|
|
18
|
-
import {
|
|
19
|
-
import { EXPLANATION_OF_METHODS_TO_ADD_RECORDER } from "./recorder-snippets/explanation-of-methods-to-add-recorder";
|
|
13
|
+
import { connectGitProviderInstructions } from "./how-to/connect-git-provider";
|
|
20
14
|
|
|
21
15
|
export const document = `---
|
|
22
16
|
{
|
|
@@ -26,390 +20,117 @@ export const document = `---
|
|
|
26
20
|
|
|
27
21
|
# {% $frontmatter.title %}
|
|
28
22
|
|
|
29
|
-
|
|
23
|
+
Set up Meticulous in this order:
|
|
30
24
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
Answer 3 questions to get a customized setup guide:
|
|
36
|
-
|
|
37
|
-
**Question 1: What framework are you using?**
|
|
38
|
-
- **Next.js** → See [Next.js Setup Guide](${NEXTJS_APP_ROUTER_ADDITIONAL_SETUP_URL})
|
|
39
|
-
- **React (Vite/CRA)** → See [React Setup Guide](${REACT_VITE_URL})
|
|
40
|
-
- **Vue** → See [Vue Setup Guide](${VUE_VITE_URL})
|
|
41
|
-
- **Angular** → See [Angular Setup Guide](${ANGULAR_CLI_URL})
|
|
42
|
-
- **Other** → Continue with general guide below
|
|
43
|
-
|
|
44
|
-
**Question 2: What are you testing?**
|
|
45
|
-
- **Static site (HTML/JS/CSS, no SSR)** → Use \`upload-assets\` action (simplest and most reliable)
|
|
46
|
-
- **Server-rendered app (Next.js, Nuxt, etc.)** → Use \`upload-container\` action (Docker)
|
|
47
|
-
- **Not sure?** → Continue reading below
|
|
48
|
-
|
|
49
|
-
**Question 3: How do you deploy?**
|
|
50
|
-
- **Vercel Preview URLs** → Use [Cloud Replay](${CLOUD_REPLAY_URL}) (no CI workflow needed)
|
|
51
|
-
- **Netlify/Other preview URLs** → Use [Cloud Replay](${CLOUD_REPLAY_URL})
|
|
52
|
-
- **GitHub Actions CI** → Use [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
|
|
53
|
-
- **Other CI** → Continue with general guide below
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
|
|
57
|
-
## Overview - 3 Steps to Get Started
|
|
58
|
-
|
|
59
|
-
1. **[5 minutes]** Install recorder and test locally
|
|
60
|
-
2. **[15 minutes]** Set up CI/CD workflow
|
|
61
|
-
3. **[Ongoing]** Record sessions and review diffs
|
|
62
|
-
|
|
63
|
-
**Total setup time**: ~20 minutes for basic setup
|
|
64
|
-
|
|
65
|
-
---
|
|
66
|
-
|
|
67
|
-
## Step 1: Install Recorder and Test Locally (5 minutes)
|
|
68
|
-
|
|
69
|
-
Before setting up CI, let's verify Meticulous works on your local machine.
|
|
70
|
-
|
|
71
|
-
### 1.1 Add Recorder Script
|
|
72
|
-
|
|
73
|
-
{% callout type="info" title="Choose Your Environment" %}
|
|
74
|
-
- **Always install on localhost** (for local development)
|
|
75
|
-
- **Recommended**: Install on staging/preview environments
|
|
76
|
-
- **Production**: Contact support for guidance
|
|
77
|
-
{% /callout %}
|
|
78
|
-
|
|
79
|
-
Add the Meticulous recorder script to your HTML \`<head>\`:
|
|
80
|
-
|
|
81
|
-
\`\`\`html
|
|
82
|
-
<script
|
|
83
|
-
data-project-id="YOUR_PROJECT_ID"
|
|
84
|
-
src="https://snippet.meticulous.ai/v1/meticulous.js"
|
|
85
|
-
></script>
|
|
86
|
-
\`\`\`
|
|
87
|
-
|
|
88
|
-
**Get your project ID**: [Meticulous Dashboard](https://app.meticulous.ai) → Project Settings
|
|
89
|
-
|
|
90
|
-
**Where to add it**:
|
|
91
|
-
- **Next.js App Router**: \`app/layout.tsx\` in \`<head>\`
|
|
92
|
-
- **Next.js Pages**: \`pages/_document.tsx\` in \`<Head>\`
|
|
93
|
-
- **React/Vue/Angular**: \`index.html\` or \`src/index.html\` in \`<head>\`
|
|
94
|
-
|
|
95
|
-
### 1.2 Verify Recorder Works
|
|
96
|
-
|
|
97
|
-
1. **Start your dev server**: \`npm run dev\`
|
|
98
|
-
2. **Open browser DevTools Console**
|
|
99
|
-
3. **Check for**: "Meticulous recorder initialized" message
|
|
100
|
-
4. **Verify**: \`window.Meticulous\` object exists
|
|
101
|
-
|
|
102
|
-
If recorder doesn't load, see [Troubleshoot Recorder](${TROUBLESHOOT_RECORDER_URL}).
|
|
103
|
-
|
|
104
|
-
### 1.3 Test Local Simulation
|
|
105
|
-
|
|
106
|
-
Let's verify Meticulous can replay a session on your local machine:
|
|
107
|
-
|
|
108
|
-
{% command_card %}
|
|
109
|
-
\`\`\`shell
|
|
110
|
-
# Get a session ID from the dashboard first
|
|
111
|
-
npx @alwaysmeticulous/cli simulate \\
|
|
112
|
-
--apiToken="{% api_token /%}" \\
|
|
113
|
-
--sessionId="<SESSION_ID>" \\
|
|
114
|
-
--appUrl="http://localhost:3000"
|
|
115
|
-
\`\`\`
|
|
116
|
-
{% /command_card %}
|
|
117
|
-
|
|
118
|
-
**Where to get session ID**:
|
|
119
|
-
1. Use your app normally with recorder installed
|
|
120
|
-
2. Go to [Meticulous Dashboard](https://app.meticulous.ai)
|
|
121
|
-
3. Find a recent session and copy its ID
|
|
122
|
-
|
|
123
|
-
**Success criteria**:
|
|
124
|
-
- Command completes without errors
|
|
125
|
-
- You can view the simulation in the dashboard
|
|
126
|
-
- Screenshots look correct
|
|
127
|
-
|
|
128
|
-
**Common issues**:
|
|
129
|
-
- **Authentication blocks simulation?** → See [Troubleshoot Auth](${TROUBLESHOOT_AUTH_URL})
|
|
130
|
-
- **Different environment errors?** → See [Cross-Environment Guide](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL})
|
|
131
|
-
- **Need to debug?** → Add \`--debugger --devTools\` flags
|
|
132
|
-
|
|
133
|
-
**Debug tools**:
|
|
134
|
-
- View simulation events: Dashboard → Simulation → *${SIMULATION_TAB_NAMES.TIMELINE_AND_LOGS}* tab
|
|
135
|
-
- Step through replay: Add \`--debugger --devTools\` to simulate command
|
|
136
|
-
|
|
137
|
-
{% callout type="warning" title="Test Local Simulation Before CI" %}
|
|
138
|
-
Debugging simulation issues on your local machine is **much easier** than debugging in CI.
|
|
139
|
-
Don't proceed to Step 2 until local simulation works!
|
|
140
|
-
{% /callout %}
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## Step 2: Set Up CI/CD Workflow (15 minutes)
|
|
145
|
-
|
|
146
|
-
Now that local simulation works, let's run tests in CI on every pull request.
|
|
147
|
-
|
|
148
|
-
### 2.1 Choose Your CI Approach
|
|
149
|
-
|
|
150
|
-
**Option A: Upload static assets (Recommended for static sites)**
|
|
151
|
-
- If your app can be served as static HTML/JS/CSS without server-side rendering
|
|
152
|
-
- Simplest and most reliable approach
|
|
153
|
-
- Not recommended for typical Next.js apps
|
|
154
|
-
- Guide: [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
|
|
155
|
-
|
|
156
|
-
**Option B: Upload a Docker container (Recommended for server-rendered apps)**
|
|
157
|
-
- For Next.js, Nuxt, and other SSR frameworks
|
|
158
|
-
- You build a Docker image, Meticulous hosts it
|
|
159
|
-
- Guide: [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
|
|
160
|
-
|
|
161
|
-
**Option C: Preview URL integration**
|
|
162
|
-
- Works with Vercel, Netlify, and other preview URL providers
|
|
163
|
-
- No CI workflow needed (Vercel has a direct integration)
|
|
164
|
-
- Guide: [Cloud Replay Setup](${CLOUD_REPLAY_URL})
|
|
165
|
-
|
|
166
|
-
### 2.2 Add API Token to CI
|
|
167
|
-
|
|
168
|
-
1. **Get API token**: [Dashboard](https://app.meticulous.ai) → Project Settings
|
|
169
|
-
2. **Add to GitHub**: Repo Settings → Secrets → Actions
|
|
170
|
-
3. **Create secret**: Name it \`METICULOUS_API_TOKEN\`
|
|
171
|
-
|
|
172
|
-
### 2.3 Create Workflow File
|
|
173
|
-
|
|
174
|
-
Follow the [CI Setup Guide](${GITHUB_ACTIONS_SETUP_URL}) for step-by-step instructions and example workflow files for your chosen approach (upload static assets or upload a Docker container).
|
|
25
|
+
1. Connect the repository to Meticulous.
|
|
26
|
+
2. Choose automated CLI onboarding or manual setup.
|
|
27
|
+
3. Record sessions and confirm Meticulous runs on pull requests.
|
|
175
28
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
1. **Commit and push** the workflow file
|
|
181
|
-
2. **Create a test PR** with a small change
|
|
182
|
-
3. **Check Actions tab** for workflow run
|
|
183
|
-
4. **Expected first PR**: "No base test run found" (this is normal!)
|
|
184
|
-
|
|
185
|
-
### 2.5 Establish Base Run
|
|
186
|
-
|
|
187
|
-
For the first PR to work, Meticulous needs a base run on your main branch:
|
|
188
|
-
|
|
189
|
-
1. **Merge the PR** that adds Meticulous workflow
|
|
190
|
-
2. **Wait** for workflow to run on main branch
|
|
191
|
-
3. **Verify** in Actions tab: main branch run succeeded
|
|
192
|
-
4. **Check dashboard**: You should see sessions and test runs
|
|
193
|
-
|
|
194
|
-
### 2.6 Test with Second PR
|
|
195
|
-
|
|
196
|
-
1. **Make a small UI change**
|
|
197
|
-
2. **Create another PR**
|
|
198
|
-
3. **Expected**: Meticulous comment with test results
|
|
199
|
-
4. **If you changed UI**: Diffs are detected
|
|
200
|
-
5. **If no changes**: "No diffs detected"
|
|
201
|
-
|
|
202
|
-
{% callout type="success" title="Success!" %}
|
|
203
|
-
If you see a Meticulous comment on your PR, congratulations! You're now running automated visual tests.
|
|
204
|
-
{% /callout %}
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
|
|
208
|
-
## Checklist: Is Everything Working?
|
|
209
|
-
|
|
210
|
-
Use this checklist to verify your setup:
|
|
211
|
-
|
|
212
|
-
### Recorder Installation
|
|
213
|
-
- Recorder script added to HTML \`<head>\`
|
|
214
|
-
- Project ID is correct
|
|
215
|
-
- Console shows "Meticulous recorder initialized"
|
|
216
|
-
- \`window.Meticulous\` object exists
|
|
217
|
-
- Sessions appear in dashboard after using app
|
|
218
|
-
|
|
219
|
-
### Local Simulation
|
|
220
|
-
- \`npx @alwaysmeticulous/cli simulate\` completes successfully
|
|
221
|
-
- Can simulate authenticated pages
|
|
222
|
-
- Can simulate different environments (if needed)
|
|
223
|
-
- Simulation screenshots look correct
|
|
224
|
-
|
|
225
|
-
### CI Setup
|
|
226
|
-
- API token added as repository secret
|
|
227
|
-
- Workflow file created and pushed
|
|
228
|
-
- Workflow runs on PRs
|
|
229
|
-
- Base run exists on main branch
|
|
230
|
-
- Meticulous comments on PRs
|
|
231
|
-
|
|
232
|
-
### Ready for Production
|
|
233
|
-
- No false positive diffs
|
|
234
|
-
- Auth works in tests
|
|
235
|
-
- All critical user flows are recorded
|
|
236
|
-
- Team knows how to review diffs
|
|
29
|
+
Connecting the repository first lets Meticulous identify the base and head
|
|
30
|
+
versions of each pull request or merge request and publish its test result in
|
|
31
|
+
the right place.
|
|
237
32
|
|
|
238
33
|
---
|
|
239
34
|
|
|
240
|
-
##
|
|
241
|
-
|
|
242
|
-
### 3.1 Record Real User Sessions
|
|
243
|
-
|
|
244
|
-
The more sessions you record, the better your test coverage:
|
|
245
|
-
|
|
246
|
-
**Where to record**:
|
|
247
|
-
- **Development**: Engineers testing locally
|
|
248
|
-
- **Staging**: QA and product testing
|
|
249
|
-
- **Preview URLs**: Testing on PRs
|
|
250
|
-
- **Production**: Contact support for guidance
|
|
251
|
-
|
|
252
|
-
**What gets recorded**:
|
|
253
|
-
- User clicks, typing, scrolling
|
|
254
|
-
- Network requests and responses
|
|
255
|
-
- DOM changes and state
|
|
256
|
-
|
|
257
|
-
### 3.2 Curate Your Golden Set
|
|
258
|
-
|
|
259
|
-
Meticulous automatically selects sessions that maximize coverage:
|
|
260
|
-
|
|
261
|
-
1. **View selected sessions**: Dashboard → Selected Sessions tab
|
|
262
|
-
2. **Increase count if needed**: Configure → Number of Sessions
|
|
263
|
-
3. **Manually add important flows**: Select specific sessions
|
|
264
|
-
|
|
265
|
-
### 3.3 Review Diffs on Pull Requests
|
|
35
|
+
## 1. Connect your repository
|
|
266
36
|
|
|
267
|
-
|
|
37
|
+
Create your Meticulous organization and project, then connect the Git provider
|
|
38
|
+
that hosts the repository. Do this before installing the recorder or configuring
|
|
39
|
+
CI.
|
|
268
40
|
|
|
269
|
-
|
|
270
|
-
2. **Determine if change is**:
|
|
271
|
-
- **Expected**: Click "Approve" to mark as intentional
|
|
272
|
-
- **Bug**: Fix the code
|
|
273
|
-
- **False positive**: See [Fix False Positives](${FIX_FALSE_POSITIVES_URL})
|
|
41
|
+
${connectGitProviderInstructions}
|
|
274
42
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
Prevent merging PRs with unacknowledged diffs:
|
|
278
|
-
|
|
279
|
-
1. Go to repository settings
|
|
280
|
-
2. Add Meticulous check as required status
|
|
281
|
-
3. Now PRs can't merge with pending diffs
|
|
282
|
-
|
|
283
|
-
See: [Make CI Check Blocking Guide](${MAKE_CHECK_BLOCKING_URL})
|
|
43
|
+
Once the linked project exists, choose how you want to install Meticulous.
|
|
284
44
|
|
|
285
45
|
---
|
|
286
46
|
|
|
287
|
-
##
|
|
47
|
+
## 2. Choose your setup path
|
|
288
48
|
|
|
289
|
-
|
|
49
|
+
{% tabs tabNameSpace="setup-path" %}
|
|
50
|
+
{% tab label="Meticulous CLI (recommended)" %}
|
|
290
51
|
|
|
291
|
-
##
|
|
52
|
+
## Automated setup with meticulous onboard
|
|
292
53
|
|
|
293
|
-
|
|
54
|
+
\`meticulous onboard\` uses Claude Code or Codex on your machine to inspect the
|
|
55
|
+
application and prepare a pull request containing the recorder and CI
|
|
56
|
+
configuration. Meticulous does not host the model inference; the command uses
|
|
57
|
+
your existing Claude Code or Codex account.
|
|
294
58
|
|
|
295
|
-
|
|
296
|
-
- We also recommend installing it on other internal environments, like staging stacks or preview URLs.
|
|
297
|
-
- If you are interested in recording production sessions, please reach out to Meticulous support for additional details.
|
|
59
|
+
### Prerequisites
|
|
298
60
|
|
|
299
|
-
|
|
61
|
+
- Run the command from a clone of the connected Git repository.
|
|
62
|
+
- Install and authenticate [Claude Code](https://docs.anthropic.com/en/docs/claude-code) or [Codex](https://developers.openai.com/codex/cli/).
|
|
63
|
+
- Use Node.js 20 or newer.
|
|
300
64
|
|
|
301
|
-
|
|
65
|
+
### Run onboarding
|
|
302
66
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
### Validating that sessions can be simulated
|
|
306
|
-
|
|
307
|
-
Before setting up tests to run in CI, you should ensure that sessions can be simulated on your local machine. Debugging any issues on your
|
|
308
|
-
local machine is much easier than debugging any issues that occur in CI. You can replay locally using the following CLI command:
|
|
67
|
+
From the application repository. If you are not logged in, the command opens a
|
|
68
|
+
browser to sign in, then continues:
|
|
309
69
|
|
|
310
70
|
{% command_card %}
|
|
311
|
-
\`\`\`
|
|
312
|
-
npx @alwaysmeticulous/cli
|
|
313
|
-
--apiToken="{% api_token /%}"
|
|
314
|
-
--sessionId="<SESSION_ID>"
|
|
315
|
-
--appUrl="<URL_WHERE_APP_IS_RUNNING_LOCALLY>"
|
|
71
|
+
\`\`\`bash
|
|
72
|
+
npx @alwaysmeticulous/cli onboard --project="{% project_slug /%}"
|
|
316
73
|
\`\`\`
|
|
317
74
|
{% /command_card %}
|
|
318
75
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
- Can you simulate sessions on authenticated pages? If not, see [this doc](${TROUBLESHOOT_AUTH_URL}) on troubleshooting authentication & authorization issues.
|
|
322
|
-
- Can you simulate sessions on a different environment from where they were recorded (e.g. can you simulate a session recorded on sandbox against
|
|
323
|
-
your localhost environment)? If not, see [this doc](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL}) on troubleshooting cross-environment issues.
|
|
324
|
-
|
|
325
|
-
Two tools to debug simulation issues:
|
|
326
|
-
|
|
327
|
-
- Once a simulation has completed and been uploaded to Meticulous, you can view all the events that happened during the simulation on the
|
|
328
|
-
*${SIMULATION_TAB_NAMES.TIMELINE_AND_LOGS}* tab of the simulation’s page in the Meticulous UI
|
|
329
|
-
- Simulating a session with the flags \`--debugger --devTools\` will let you step through the simulation one user event at a time and pinpoint exactly where the issue is occurring
|
|
330
|
-
|
|
331
|
-
### Running tests in CI
|
|
332
|
-
|
|
333
|
-
For test runs to be executed in CI, Meticulous needs to be able to simulate sessions in 3 different contexts:
|
|
334
|
-
|
|
335
|
-
1. **PR test runs**: whenever a new commit is pushed to a PR branch, Meticulous kicks off a test run where it simulates user sessions against the app running that commit.
|
|
336
|
-
Ideally, this version of the app would be hosted on a commit-specific URL, but Meticulous can also run against the app if it's spun up in CI.
|
|
337
|
-
2. **New-commit-on-main test runs:** whenever a new commit is pushed to the main branch, Meticulous kicks off a test run to take new baseline screenshots.
|
|
338
|
-
Ideally, Meticulous would run against a commit-specific URL here as well, but running the app in CI also works.
|
|
339
|
-
3. **Session selection test runs:** each night, Meticulous simulates every new session from the last 24 hours to determine if any of them add new coverage and should be
|
|
340
|
-
included in the *selected set*. In this context, we want to test against the latest version of your app, so usually a publicly accessible staging URL works best.
|
|
341
|
-
|
|
342
|
-
How to get Meticulous to trigger test runs across these contexts depends on how you build and serve your app:
|
|
76
|
+
On a remote machine where a browser cannot reach this terminal, sign in first
|
|
77
|
+
with device login, then re-run onboard:
|
|
343
78
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
You can add Meticulous’ Vercel integration [here](https://vercel.com/integrations/meticulous) and then follow the guide [here](${CLOUD_REPLAY_URL}) to complete installation.
|
|
348
|
-
- **Other preview URL providers (e.g. Netlify).** If you deploy your app to a preview URL without Vercel, you can follow the doc [here](${CLOUD_REPLAY_URL}) to set up Meticulous.
|
|
349
|
-
|
|
350
|
-
Almost any app can be containerized, so if neither static assets nor preview URLs fit your app, uploading a Docker container is the universal fallback.
|
|
351
|
-
|
|
352
|
-
{% callout type="info" title="GitHub Action Configuration" %}
|
|
353
|
-
For a comprehensive list of all GitHub Action options and configuration parameters, see the [report-diffs-action README](https://github.com/alwaysmeticulous/report-diffs-action#readme).
|
|
354
|
-
{% /callout %}
|
|
355
|
-
|
|
356
|
-
## Common Gotchas
|
|
357
|
-
|
|
358
|
-
Before diving into performance tuning, be aware of these common issues that can cause test failures:
|
|
359
|
-
|
|
360
|
-
### Static Assets with Absolute URLs
|
|
361
|
-
|
|
362
|
-
Meticulous automatically swaps the base URL for page navigation and API requests, but **static assets (CSS, JS, images) referenced with absolute URLs in your HTML are NOT rewritten**.
|
|
363
|
-
|
|
364
|
-
If your HTML contains:
|
|
365
|
-
\`\`\`html
|
|
366
|
-
<script src="https://production.example.com/dist/app.js"></script>
|
|
367
|
-
\`\`\`
|
|
368
|
-
|
|
369
|
-
Change it to a relative URL:
|
|
370
|
-
\`\`\`html
|
|
371
|
-
<script src="/dist/app.js"></script>
|
|
79
|
+
{% command_card hideProjectSelector=true %}
|
|
80
|
+
\`\`\`bash
|
|
81
|
+
npx @alwaysmeticulous/cli auth login --device
|
|
372
82
|
\`\`\`
|
|
83
|
+
{% /command_card %}
|
|
373
84
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
85
|
+
It asks you to choose the frontend application in a monorepo and the local
|
|
86
|
+
coding agent, reviews the repository, proposes a plan for approval, and then
|
|
87
|
+
opens a setup pull request.
|
|
377
88
|
|
|
378
|
-
|
|
89
|
+
After the pull request is ready:
|
|
379
90
|
|
|
380
|
-
|
|
91
|
+
1. Review and merge the recorder and CI changes.
|
|
92
|
+
2. Add any requested API token to your CI provider's secret store.
|
|
93
|
+
3. Record a representative session.
|
|
94
|
+
4. Open a pull request and confirm that Meticulous reports a result.
|
|
381
95
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
- URL routing patterns
|
|
385
|
-
- Environment variables
|
|
96
|
+
{% /tab %}
|
|
97
|
+
{% tab label="Manual setup" %}
|
|
386
98
|
|
|
387
|
-
|
|
99
|
+
## Manual recorder and CI setup
|
|
388
100
|
|
|
389
|
-
|
|
101
|
+
Use the guided setup in the Meticulous app or follow these docs:
|
|
390
102
|
|
|
391
|
-
|
|
392
|
-
|
|
103
|
+
1. [Install the recorder](${INSTALL_RECORDER_URL}) for localhost and your
|
|
104
|
+
trusted internal or preview environments.
|
|
105
|
+
2. Exercise a representative user flow and confirm the session appears in the
|
|
106
|
+
Meticulous project.
|
|
107
|
+
3. [Replay the session locally](${DETECT_DIFFS_LOCALLY_URL}) before moving to
|
|
108
|
+
CI. Debugging locally is faster than debugging a CI-only failure.
|
|
109
|
+
4. [Choose a CI approach](${CI_SETUP_URL}):
|
|
110
|
+
[upload static assets or a container](${GITHUB_ACTIONS_SETUP_URL}).
|
|
393
111
|
|
|
394
|
-
|
|
112
|
+
For authenticated applications, make sure the recorded flow can sign in and
|
|
113
|
+
replay reliably. See [Troubleshooting authentication](${TROUBLESHOOT_AUTH_URL})
|
|
114
|
+
and [recording and replaying across environments](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL}).
|
|
395
115
|
|
|
396
|
-
|
|
397
|
-
|
|
116
|
+
{% /tab %}
|
|
117
|
+
{% /tabs %}
|
|
398
118
|
|
|
399
|
-
|
|
119
|
+
---
|
|
400
120
|
|
|
401
|
-
|
|
121
|
+
## 3. Verify the complete setup
|
|
402
122
|
|
|
403
|
-
|
|
404
|
-
you will see a *Number of Sessions to Auto Select* section. Below this, Meticulous will recommend increasing the number of selected sessions if it will add more coverage.
|
|
405
|
-
- **Enable the session recorder on production.** Increasing the number of sessions being ingested by Meticulous should increase the level of
|
|
406
|
-
coverage that Meticulous is able to provide. If you are interested in this option, please reach out to Meticulous support for more information.
|
|
123
|
+
Setup is complete when:
|
|
407
124
|
|
|
408
|
-
|
|
125
|
+
- The project is linked to the correct GitHub, GitLab, or Bitbucket repository.
|
|
126
|
+
- At least one representative session reaches Meticulous.
|
|
127
|
+
- A session replays successfully against your application.
|
|
128
|
+
- The default branch has a baseline test run.
|
|
129
|
+
- A pull request or merge request produces a Meticulous result.
|
|
409
130
|
|
|
410
|
-
|
|
131
|
+
If something fails, start with [recorder troubleshooting](${TROUBLESHOOT_RECORDER_URL})
|
|
132
|
+
or the [FAQ and troubleshooting guide](${FAQ_AND_TROUBLESHOOTING_URL}).
|
|
411
133
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
- If the flake is problematic, you can use the techniques described in [this doc](${FIX_FALSE_POSITIVES_URL}) to debug or ignore the problematic element.
|
|
134
|
+
After the first successful run, [make the Meticulous check blocking](${MAKE_CHECK_BLOCKING_URL})
|
|
135
|
+
and [reduce false-positive diffs](${FIX_FALSE_POSITIVES_URL}).
|
|
415
136
|
`;
|
|
@@ -13,12 +13,15 @@ Meticulous recorder is a tool for recording real user sessions. The recorder cap
|
|
|
13
13
|
include authorization tokens and other headers -- you should therefore only add trusted users to your Meticulous organization.
|
|
14
14
|
You can either add the recorder to all environments or just internal non-production environments.
|
|
15
15
|
|
|
16
|
-
## 1.
|
|
16
|
+
## 1. Create and connect your project
|
|
17
17
|
|
|
18
18
|
Sign up at [https://app.meticulous.ai/signup](https://app.meticulous.ai/signup). You will be prompted to create an organization and
|
|
19
|
-
project.
|
|
19
|
+
project. Connect the project to its GitHub, GitLab, or Bitbucket repository before installing the recorder.
|
|
20
20
|
|
|
21
21
|
## 2. Install the Meticulous recorder
|
|
22
22
|
|
|
23
|
+
You can run \`npx @alwaysmeticulous/cli onboard --project="<ORGANIZATION>/<PROJECT>"\` from the connected repository to have
|
|
24
|
+
Claude Code or Codex prepare the recorder and CI changes, or install the recorder manually:
|
|
25
|
+
|
|
23
26
|
${EXPLANATION_OF_METHODS_TO_ADD_RECORDER}
|
|
24
27
|
`;
|
|
@@ -37,6 +37,7 @@ meticulous [command]
|
|
|
37
37
|
|
|
38
38
|
| Command | Purpose | Use Case |
|
|
39
39
|
|---------|---------|----------|
|
|
40
|
+
| \`onboard\` | Install Meticulous using local Claude Code or Codex | Initial recorder and CI setup |
|
|
40
41
|
| \`ci run-with-tunnel\` | Run tests in cloud via tunnel | CI testing with local app |
|
|
41
42
|
| \`ci upload-assets\` | Upload and test static assets | CI testing for static sites |
|
|
42
43
|
| \`ci upload-asset-chunk\` | Upload one named, versioned asset chunk | Multi-bundle deployments |
|
|
@@ -93,6 +94,42 @@ For a closer look at the \`agent\` and \`auth\` commands — including their fla
|
|
|
93
94
|
|
|
94
95
|
---
|
|
95
96
|
|
|
97
|
+
## onboard
|
|
98
|
+
|
|
99
|
+
Install Meticulous in the current Git repository using your local Claude Code
|
|
100
|
+
or Codex. The command reviews the frontend application and prepares a pull
|
|
101
|
+
request with recorder and CI configuration. Model inference runs through your
|
|
102
|
+
own coding-agent account, not Meticulous-hosted inference.
|
|
103
|
+
|
|
104
|
+
### Authentication
|
|
105
|
+
|
|
106
|
+
If you are not already logged in, \`onboard\` opens a browser to sign in and
|
|
107
|
+
then selects the Meticulous project. On a remote or sandboxed machine, run
|
|
108
|
+
\`npx @alwaysmeticulous/cli auth login --device\` first. Alternatively, pass
|
|
109
|
+
\`--apiToken\`.
|
|
110
|
+
|
|
111
|
+
### Examples
|
|
112
|
+
|
|
113
|
+
\`\`\`bash
|
|
114
|
+
# Interactive setup from the connected application repository
|
|
115
|
+
npx @alwaysmeticulous/cli onboard --project="<ORGANIZATION>/<PROJECT>"
|
|
116
|
+
|
|
117
|
+
# Choose an app in a monorepo and use Claude Code
|
|
118
|
+
npx @alwaysmeticulous/cli onboard \\
|
|
119
|
+
--project="<ORGANIZATION>/<PROJECT>" \\
|
|
120
|
+
--app="apps/web" \\
|
|
121
|
+
--agent=claude
|
|
122
|
+
|
|
123
|
+
# Prepare the workspace without launching an agent
|
|
124
|
+
npx @alwaysmeticulous/cli onboard --printOnly
|
|
125
|
+
\`\`\`
|
|
126
|
+
|
|
127
|
+
Key options include \`--cwd\`, \`--project\`, \`--app\`, \`--agent\`,
|
|
128
|
+
\`--model\`, \`--headless\`, \`--auto\`, \`--printOnly\`, and
|
|
129
|
+
\`--apiToken\`.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
96
133
|
## ci run-with-tunnel
|
|
97
134
|
|
|
98
135
|
Run Meticulous tests in the cloud against a locally-running application.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface InvalidCiYamlFile {
|
|
2
|
+
/** Path relative to the repository root, for display. */
|
|
3
|
+
relativePath: string;
|
|
4
|
+
/** First parse error, already including a line/column when the parser knew one. */
|
|
5
|
+
problem: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Parses the CI files that mention Meticulous and reports the ones a CI
|
|
9
|
+
* provider would reject. The install agent writes this YAML by hand, and a
|
|
10
|
+
* syntax slip there only shows up as a failed pipeline after the PR is open.
|
|
11
|
+
*/
|
|
12
|
+
export declare const findInvalidCiYaml: (options: {
|
|
13
|
+
projectRoot: string;
|
|
14
|
+
}) => InvalidCiYamlFile[];
|
|
15
|
+
/**
|
|
16
|
+
* Prints a warning for CI files the agent left unparseable, so the user hears
|
|
17
|
+
* it here rather than from a red pipeline on the onboarding PR.
|
|
18
|
+
*/
|
|
19
|
+
export declare const warnAboutInvalidCiYaml: (options: {
|
|
20
|
+
projectRoot: string;
|
|
21
|
+
}) => void;
|
|
22
|
+
//# sourceMappingURL=validate-ci-yaml.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-ci-yaml.d.ts","sourceRoot":"","sources":["../../../src/commands/onboard/validate-ci-yaml.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAC;CACjB;AAWD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,YAAa;IACzC,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,iBAAiB,EAgBpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,YAAa;IAC9C,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,IAsBH,CAAC"}
|