@testdriverai/agent 7.11.150-test → 7.11.151-canary

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/ai/skills/testdriver-agent/SKILL.md +15 -15
  2. package/ai/skills/testdriver-aws-setup/SKILL.md +6 -6
  3. package/ai/skills/testdriver-cache/SKILL.md +8 -8
  4. package/ai/skills/testdriver-caching/SKILL.md +10 -9
  5. package/ai/skills/testdriver-captcha/SKILL.md +7 -7
  6. package/ai/skills/testdriver-ci-cd/SKILL.md +10 -10
  7. package/ai/skills/testdriver-claude-mcp-plugin/SKILL.md +37 -0
  8. package/ai/skills/testdriver-client/SKILL.md +3 -166
  9. package/ai/skills/testdriver-customizing-devices/SKILL.md +1 -1
  10. package/ai/skills/testdriver-dashcam/SKILL.md +3 -3
  11. package/ai/skills/testdriver-debugging-with-screenshots/SKILL.md +5 -5
  12. package/ai/skills/testdriver-elements/SKILL.md +5 -5
  13. package/ai/skills/testdriver-errors/SKILL.md +3 -3
  14. package/ai/skills/testdriver-events/SKILL.md +3 -3
  15. package/ai/skills/testdriver-extract/SKILL.md +5 -5
  16. package/ai/skills/testdriver-find/SKILL.md +1 -1
  17. package/ai/skills/testdriver-generating-tests/SKILL.md +6 -6
  18. package/ai/skills/testdriver-hosted/SKILL.md +4 -4
  19. package/ai/skills/testdriver-interacting-with-your-app/SKILL.md +197 -0
  20. package/ai/skills/testdriver-locating-elements/SKILL.md +390 -39
  21. package/ai/skills/testdriver-making-assertions/SKILL.md +4 -4
  22. package/ai/skills/testdriver-options/SKILL.md +319 -0
  23. package/ai/skills/testdriver-parse/SKILL.md +8 -8
  24. package/ai/skills/testdriver-performing-actions/SKILL.md +7 -7
  25. package/ai/skills/testdriver-provision/SKILL.md +7 -7
  26. package/ai/skills/testdriver-quickstart/SKILL.md +15 -441
  27. package/ai/skills/testdriver-quickstart-cli/SKILL.md +436 -0
  28. package/ai/skills/testdriver-quickstart-github/SKILL.md +53 -0
  29. package/ai/skills/testdriver-quickstart-manual/SKILL.md +134 -0
  30. package/ai/skills/testdriver-redraw/SKILL.md +6 -6
  31. package/ai/skills/testdriver-reusable-code/SKILL.md +3 -3
  32. package/ai/skills/testdriver-screenshots/SKILL.md +3 -3
  33. package/ai/skills/testdriver-secrets/SKILL.md +4 -4
  34. package/ai/skills/testdriver-self-hosted/SKILL.md +6 -6
  35. package/ai/skills/testdriver-test-results-json/SKILL.md +4 -4
  36. package/ai/skills/testdriver-variables/SKILL.md +2 -2
  37. package/ai/skills/testdriver-wait/SKILL.md +2 -2
  38. package/package.json +1 -1
@@ -0,0 +1,436 @@
1
+ ---
2
+ name: testdriver:quickstart-cli
3
+ description: Scaffold a project, connect TestDriver to your AI client, and run your first test.
4
+ ---
5
+ <!-- Generated from quickstart-cli.mdx. DO NOT EDIT. -->
6
+
7
+ Use the TestDriver CLI to scaffold a project, connect your AI client, and run the example test. `testdriverai init` installs three things so you can write, run, and debug real end-to-end tests from chat:
8
+
9
+ - **The agent**: an expert test-writer. It controls a live sandbox, writes code after each step, and re-runs the test until it passes.
10
+ - **Skills**: small instruction files that teach the agent the correct syntax for each TestDriver capability (`find`, `click`, `type`, `assert`, and more).
11
+ - **The MCP server**: exposes TestDriver's computer-use tools through the [Model Context Protocol](https://modelcontextprotocol.io) so any MCP client can call them.
12
+
13
+ <Info>
14
+ **Prerequisites**
15
+
16
+ - [Node.js](https://nodejs.org) 20.19 or later
17
+ - A TestDriver account. [Create one for free](https://console.testdriver.ai/settings). You get 60 device minutes, no credit card required.
18
+ </Info>
19
+
20
+ <Steps>
21
+ <Step title="Scaffold a project">
22
+
23
+ Make a new folder (or open an existing project) and run `init`:
24
+
25
+ ```bash
26
+ mkdir my-tests && cd my-tests
27
+ npx testdriverai init
28
+ ```
29
+
30
+ `init` asks two questions:
31
+
32
+ 1. **How to authenticate.** Choose **Login with browser** to sign in and save your key automatically, or paste an API key from [console.testdriver.ai/settings](https://console.testdriver.ai/settings). Either way, it is saved to `.env` as `TD_API_KEY`.
33
+ 2. **Which AI clients to set up.** Pick VS Code, Cursor, Claude Code, and others, or press Enter to skip. `init` detects the clients already present in your project and pre-selects them. You can run `init` again later to add more; it merges the TestDriver entry into your existing config and does not overwrite your other servers.
34
+
35
+ It then installs `vitest` and `testdriverai` and creates these files:
36
+
37
+ | File | Purpose |
38
+ | --- | --- |
39
+ | `tests/example.test.js` | Example test: log in to a demo store and add an item to the cart |
40
+ | `tests/login.js` | Reusable login snippet imported by the example test |
41
+ | `vitest.config.js` | Vitest config with the TestDriver reporter and long timeouts |
42
+ | `.env` | Your `TD_API_KEY` (git-ignored) |
43
+ | `.github/workflows/testdriver.yml` | GitHub Actions workflow that runs your tests on every PR |
44
+ | `.github/agents/`, `.github/skills/` | Agent and skills for the AI clients you selected |
45
+
46
+ <Tip>
47
+ Skip the prompts in CI or scripts with flags:
48
+
49
+ ```bash
50
+ npx testdriverai init --client claude-code # one client
51
+ npx testdriverai init --client claude-code,cursor,vscode # several
52
+ npx testdriverai init --client all # everything
53
+ npx testdriverai init --no-sample-test # no example files
54
+ ```
55
+ </Tip>
56
+
57
+ </Step>
58
+
59
+ <Step title="Connect your AI client">
60
+
61
+ `init` writes the agent, skills, and MCP server config in the format and location each client expects. Here is what it installs and where.
62
+
63
+ #### The agent
64
+
65
+ The **TestDriver agent** runs inside your AI client (Claude Code, Cursor, VS Code, and others). Unlike a chat assistant that only suggests code, it works **iteratively on a live sandbox**: it starts a session, performs each action, writes the code to your test file, confirms the result with a screenshot, and re-runs the test until it passes.
66
+
67
+ | Client | Agent location |
68
+ | --- | --- |
69
+ | Claude Code | `.claude/agents/testdriver.md` |
70
+ | VS Code (Copilot) | `.github/agents/testdriver.agent.md` |
71
+ | Cursor | `.cursor/rules/testdriver.mdc` |
72
+ | Windsurf | `.windsurf/rules/testdriver.md` |
73
+ | Codex | `AGENTS.md` |
74
+ | Zed | `.rules` |
75
+
76
+ #### Skills
77
+
78
+ **Skills** are small instruction files, one per TestDriver capability, in the [Anthropic `SKILL.md` format](https://code.claude.com/docs/en/skills). There are over 100, generated from this documentation, covering every action and concept: `find`, `click`, `type`, `assert`, `check`, `scroll`, `press-keys`, `provision`, caching, secrets, CI/CD, and more.
79
+
80
+ | Client | Skills location |
81
+ | --- | --- |
82
+ | Claude Code | `.claude/skills/<name>/SKILL.md` |
83
+ | Zed | `.agents/skills/<name>/SKILL.md` |
84
+ | Codex | referenced from `AGENTS.md` |
85
+ | VS Code · Cursor · Windsurf | folded into the agent rules/instructions |
86
+
87
+ #### MCP server
88
+
89
+ The **TestDriver MCP server** exposes the computer-use tools (`session_start`, `find`, `click`, `type`, `assert`, `check`, `screenshot`, and more). It runs as a local stdio process and authenticates with your `TD_API_KEY`:
90
+
91
+ ```bash
92
+ npx -p testdriverai testdriverai-mcp
93
+ ```
94
+
95
+ | Client | Auto-install | MCP config file | Config key |
96
+ | --- | --- | --- | --- |
97
+ | Claude Code | ✅ | `.mcp.json` | `mcpServers` |
98
+ | Claude Desktop | ✅ | OS-specific | `mcpServers` |
99
+ | Cursor | ✅ | `.cursor/mcp.json` | `mcpServers` |
100
+ | VS Code (Copilot) | ✅ | `.vscode/mcp.json` | `servers` |
101
+ | Windsurf | ✅ | `~/.codeium/windsurf/mcp_config.json` | `mcpServers` |
102
+ | Codex | ✅ | `~/.codex/config.toml` | `[mcp_servers]` |
103
+ | Zed | ✅ | `.zed/settings.json` | `context_servers` |
104
+ | Lovable | ⚙️ partial | GitHub `AGENTS.md` + UI | — |
105
+ | Replit | ⚙️ partial | `replit.md` + UI | — |
106
+ | v0 (Vercel) | 📝 manual | web UI only | — |
107
+
108
+ <Accordion title="Configure the MCP server by hand">
109
+ <Note>
110
+ Each client uses a **different top-level key** for MCP servers. The most common manual-config mistake is using `mcpServers` for VS Code (which needs `servers`), Codex (TOML `[mcp_servers]`), or Zed (`context_servers`).
111
+ </Note>
112
+
113
+ <Tabs>
114
+ <Tab title="Claude Code">
115
+ Add this to `.mcp.json` at your project root (or `~/.claude.json` for all projects):
116
+
117
+ ```json
118
+ {
119
+ "mcpServers": {
120
+ "testdriver": {
121
+ "type": "stdio",
122
+ "command": "npx",
123
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
124
+ "env": { "TD_API_KEY": "${TD_API_KEY}" }
125
+ }
126
+ }
127
+ }
128
+ ```
129
+ </Tab>
130
+
131
+ <Tab title="Claude Desktop">
132
+ Edit the Claude Desktop config file:
133
+
134
+ - **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
135
+ - **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
136
+ - **Linux:** `~/.config/Claude/claude_desktop_config.json`
137
+
138
+ ```json
139
+ {
140
+ "mcpServers": {
141
+ "testdriver": {
142
+ "command": "npx",
143
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
144
+ "env": { "TD_API_KEY": "your_api_key" }
145
+ }
146
+ }
147
+ }
148
+ ```
149
+
150
+ Start Claude Desktop again after you save.
151
+ </Tab>
152
+
153
+ <Tab title="Cursor">
154
+ Add this to `.cursor/mcp.json` (project) or `~/.cursor/mcp.json` (global):
155
+
156
+ ```json
157
+ {
158
+ "mcpServers": {
159
+ "testdriver": {
160
+ "type": "stdio",
161
+ "command": "npx",
162
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
163
+ "env": { "TD_API_KEY": "${TD_API_KEY}" }
164
+ }
165
+ }
166
+ }
167
+ ```
168
+ </Tab>
169
+
170
+ <Tab title="VS Code">
171
+ Add this to `.vscode/mcp.json`. VS Code uses the `servers` key and an `inputs` prompt for secrets:
172
+
173
+ ```json
174
+ {
175
+ "servers": {
176
+ "testdriver": {
177
+ "type": "stdio",
178
+ "command": "npx",
179
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
180
+ "env": { "TD_API_KEY": "${input:testdriver-api-key}" }
181
+ }
182
+ },
183
+ "inputs": [
184
+ {
185
+ "type": "promptString",
186
+ "id": "testdriver-api-key",
187
+ "description": "TestDriver API Key From https://console.testdriver.ai/settings",
188
+ "password": true
189
+ }
190
+ ]
191
+ }
192
+ ```
193
+ </Tab>
194
+
195
+ <Tab title="Windsurf">
196
+ Windsurf reads the MCP config globally. Add this to `~/.codeium/windsurf/mcp_config.json`:
197
+
198
+ ```json
199
+ {
200
+ "mcpServers": {
201
+ "testdriver": {
202
+ "command": "npx",
203
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
204
+ "env": { "TD_API_KEY": "${TD_API_KEY}" }
205
+ }
206
+ }
207
+ }
208
+ ```
209
+ </Tab>
210
+
211
+ <Tab title="Codex">
212
+ Codex uses TOML. Add this to `~/.codex/config.toml`:
213
+
214
+ ```toml
215
+ [mcp_servers.testdriver]
216
+ command = "npx"
217
+ args = ["-p", "testdriverai", "testdriverai-mcp"]
218
+ env = { TD_API_KEY = "${TD_API_KEY}" }
219
+ ```
220
+ </Tab>
221
+
222
+ <Tab title="Zed">
223
+ Zed calls them "context servers". Add this to `.zed/settings.json` (project) or `~/.config/zed/settings.json` (global):
224
+
225
+ ```json
226
+ {
227
+ "context_servers": {
228
+ "testdriver": {
229
+ "command": "npx",
230
+ "args": ["-p", "testdriverai", "testdriverai-mcp"],
231
+ "env": { "TD_API_KEY": "${TD_API_KEY}" }
232
+ }
233
+ }
234
+ }
235
+ ```
236
+ </Tab>
237
+ </Tabs>
238
+ </Accordion>
239
+
240
+ <Accordion title="Web-based clients (Lovable, Replit, v0)">
241
+ These run in the browser, so they cannot start the MCP server as a local process. Configure them through each product's UI.
242
+
243
+ **Lovable**
244
+
245
+ 1. Connect your GitHub repo, then run `npx testdriverai init --client lovable`. This writes `AGENTS.md` and the skills into the repo so the Lovable agent can use them.
246
+ 2. In Lovable, open **Settings → MCP** and add the TestDriver server.
247
+
248
+ **Replit**
249
+
250
+ 1. Run `npx testdriverai init --client replit` to write `replit.md` with the TestDriver agent guidance.
251
+ 2. In Replit, open **Tools → Integrations → MCP** and add a custom MCP server.
252
+
253
+ **v0 (Vercel)**
254
+
255
+ v0 is UI-only and does not read repo files.
256
+
257
+ 1. Open **[v0.app/chat/settings/mcp-connections](https://v0.app/chat/settings/mcp-connections)** and add the TestDriver MCP connection.
258
+ 2. Paste the agent guidance into **Instructions** (the **+** in the prompt bar).
259
+ </Accordion>
260
+
261
+ #### Verify the install
262
+
263
+ Open your client's chat and ask the agent to write a test:
264
+
265
+ ```text
266
+ @testdriver write a test that opens the homepage and asserts the title
267
+ ```
268
+
269
+ If the MCP server is connected, the agent starts a sandbox session and you see screenshots as it works. It writes the steps into a test file in `tests/` and runs it for you. If the tools do not appear, confirm that `TD_API_KEY` is set and restart the client.
270
+
271
+ </Step>
272
+
273
+ <Step title="Run the example test">
274
+
275
+ TestDriver tests are plain [Vitest](https://vitest.dev) tests. Run them with:
276
+
277
+ ```bash
278
+ npm test
279
+ ```
280
+
281
+ Here is what happens:
282
+
283
+ 1. A cloud sandbox starts and opens Chrome at the demo app.
284
+ 2. A live preview of the sandbox opens in your browser so you can watch.
285
+ 3. The test finds the login form, types credentials, adds an item to the cart, and asserts the cart has an item.
286
+ 4. The sandbox is torn down and results are uploaded.
287
+
288
+ At the end of the output, look for the run link:
289
+
290
+ ```text
291
+ TESTDRIVER_RUN_URL=https://console.testdriver.ai/runs/...
292
+ ```
293
+
294
+ Open it to see the video recording, screenshots, and logs for each step.
295
+
296
+ <Note>
297
+ The first run takes a minute or two while the sandbox boots. Later runs are faster because element locations are [cached](/caching).
298
+ </Note>
299
+
300
+ </Step>
301
+
302
+ <Step title="Read the example test">
303
+
304
+ Open `tests/example.test.js`. Every TestDriver test follows the same shape: create an instance, provision an app, then find, act, and assert in natural language.
305
+
306
+ ```js tests/example.test.js
307
+ import { test, expect } from 'vitest';
308
+ import { TestDriver } from 'testdriverai/vitest/hooks';
309
+ import { login } from './login.js';
310
+
311
+ test('should login and add item to cart', async (context) => {
312
+ // Connects to a sandbox and records the session
313
+ const testdriver = TestDriver(context);
314
+
315
+ // Launch Chrome at the app under test
316
+ await testdriver.provision.chrome({
317
+ url: 'http://testdriver-sandbox.vercel.app/login',
318
+ });
319
+
320
+ // Reusable step from tests/login.js
321
+ await login(testdriver);
322
+
323
+ // Describe elements in plain English
324
+ const addToCart = await testdriver.find('add to cart button under TestDriver Hat');
325
+ await addToCart.click();
326
+
327
+ const cart = await testdriver.find('cart button in the top right corner');
328
+ await cart.click();
329
+
330
+ // Assert with natural language, then use Vitest's expect
331
+ const result = await testdriver.assert('There is an item in the cart');
332
+ expect(result).toBeTruthy();
333
+ });
334
+ ```
335
+
336
+ The pieces you will use most:
337
+
338
+ - [`provision.chrome()`](/provision) starts a browser (or a desktop app) in the sandbox
339
+ - [`find()`](/find) locates an element by description; then call `.click()`, `.hover()`, and so on
340
+ - [`type()`](/type) and [`pressKeys()`](/press-keys) send keyboard input
341
+ - [`assert()`](/assert) asks a yes/no question about the screen
342
+
343
+ </Step>
344
+
345
+ <Step title="Write your own test">
346
+
347
+ The fastest way is to ask the agent:
348
+
349
+ ```text
350
+ @testdriver write a test that searches duckduckgo.com for "testdriver.ai" and verifies results appear
351
+ ```
352
+
353
+ Or write it by hand. Create `tests/search.test.js` and point it at a site you want to test:
354
+
355
+ ```js tests/search.test.js
356
+ import { test, expect } from 'vitest';
357
+ import { TestDriver } from 'testdriverai/vitest/hooks';
358
+
359
+ test('search shows results', async (context) => {
360
+ const testdriver = TestDriver(context);
361
+
362
+ await testdriver.provision.chrome({ url: 'https://duckduckgo.com' });
363
+
364
+ const searchBox = await testdriver.find('search input field');
365
+ await searchBox.click();
366
+ await testdriver.type('testdriver.ai');
367
+ await testdriver.pressKeys(['enter']);
368
+
369
+ const result = await testdriver.assert('search results are displayed');
370
+ expect(result).toBeTruthy();
371
+ });
372
+ ```
373
+
374
+ Run just that file:
375
+
376
+ ```bash
377
+ npx vitest run tests/search.test.js
378
+ ```
379
+
380
+ <Tip>
381
+ Not sure how to describe an element? Say what a person sees: `"blue Sign In button in the header"` works better than `"button"`. See [Locating elements](/locating-elements).
382
+ </Tip>
383
+
384
+ </Step>
385
+
386
+ <Step title="Run in CI">
387
+
388
+ `init` already created `.github/workflows/testdriver.yml`. Push your project to GitHub, then add `TD_API_KEY` as a repository secret (**Settings → Secrets and variables → Actions**). Your tests now run on every pull request.
389
+
390
+ See [CI/CD](/ci-cd) for other providers and for keyless auth with the TestDriver GitHub App.
391
+
392
+ </Step>
393
+ </Steps>
394
+
395
+ ## Troubleshooting
396
+
397
+ <AccordionGroup>
398
+ <Accordion title="TD_API_KEY is not configured">
399
+ The SDK reads `TD_API_KEY` from `.env` in the folder where you run `vitest`. Make sure the file exists and has this line:
400
+
401
+ ```bash .env
402
+ TD_API_KEY=your_api_key
403
+ ```
404
+
405
+ You can also export it in your shell: `export TD_API_KEY=your_api_key`.
406
+ </Accordion>
407
+
408
+ <Accordion title="The agent or MCP tools do not appear in my client">
409
+ Confirm `TD_API_KEY` is set, check that the MCP config uses the correct top-level key for your client (see the table above), and restart the client. Running `npx testdriverai init --client <name>` again rewrites the config in the correct format.
410
+ </Accordion>
411
+
412
+ <Accordion title="No test files found">
413
+ Vitest only picks up files that match `*.test.js`, `*.test.mjs`, or `*.spec.*`. Check the file name and that the file is inside your project folder.
414
+ </Accordion>
415
+
416
+ <Accordion title="Test times out">
417
+ Sandbox provisioning and teardown take time. `init` sets `testTimeout` and `hookTimeout` to 5 minutes in `vitest.config.js`. If you wrote the config by hand, add both values.
418
+ </Accordion>
419
+ </AccordionGroup>
420
+
421
+ ## Next steps
422
+
423
+ <CardGroup cols={2}>
424
+ <Card title="Generating tests" icon="wand-magic-sparkles" href="/generating-tests" arrow horizontal>
425
+ Prompting patterns that get the best tests out of the agent.
426
+ </Card>
427
+ <Card title="Walkthrough" icon="map" href="/provision" arrow horizontal>
428
+ Provision apps, locate elements, perform actions, and make assertions.
429
+ </Card>
430
+ <Card title="Reusable code" icon="recycle" href="/reusable-code" arrow horizontal>
431
+ Share login flows and other steps across tests.
432
+ </Card>
433
+ <Card title="Secrets" icon="key" href="/secrets" arrow horizontal>
434
+ Keep passwords and tokens out of logs and recordings.
435
+ </Card>
436
+ </CardGroup>
@@ -0,0 +1,53 @@
1
+ ---
2
+ name: testdriver:quickstart-github
3
+ description: Drop-in UI tests for any GitHub repository.
4
+ ---
5
+ <!-- Generated from quickstart-github.mdx. DO NOT EDIT. -->
6
+
7
+ Drop-in UI tests for any GitHub repository. Mention `@testdriverai` in a pull request or issue and it writes, runs, and commits UI tests, then catches regressions before they merge. No local install required.
8
+
9
+ <Card
10
+ title="Add to GitHub"
11
+ icon="github"
12
+ href="https://go.testdriver.ai/github"
13
+ arrow
14
+ horizontal
15
+ >
16
+ Install the TestDriver GitHub App and start testing in minutes.
17
+ </Card>
18
+
19
+ <Steps>
20
+ <Step title="Install the GitHub App">
21
+ Click **Add to GitHub** above and choose the repositories you want to test. You can add more repositories later from your GitHub organization settings.
22
+ </Step>
23
+
24
+ <Step title="Mention @testdriverai">
25
+ Open a pull request or an issue and describe the test you want in a comment:
26
+
27
+ ```text
28
+ @testdriverai Write a test that verifies the homepage loads and the signup button works.
29
+ ```
30
+
31
+ TestDriver replies in the thread, starts a sandbox, writes the test, runs it, and posts the result with a link to the recording. It then opens a pull request that adds the test file to your repository.
32
+
33
+ <Tip>
34
+ Describe what a user does and what they should see, not implementation details. "Log in, add the first product to the cart, and confirm the cart badge shows 1" gives better results than "click `#add-btn`".
35
+ </Tip>
36
+ </Step>
37
+
38
+ <Step title="Catch regressions automatically">
39
+ Once tests are committed, TestDriver runs them on every pull request that changes something a user would see and posts a review with what it observed, including a recording. Mention `@testdriverai` on any PR to ask follow-up questions or request more tests.
40
+ </Step>
41
+ </Steps>
42
+
43
+ Want to use TestDriver from GitHub Copilot or the GitHub Mobile app? Read the full GitHub guide:
44
+
45
+ <Card
46
+ title="GitHub Integration Guide"
47
+ icon="arrow-right"
48
+ href="/copilot/auto-healing#use-testdriver-in-github"
49
+ arrow
50
+ horizontal
51
+ >
52
+ Use TestDriver from GitHub web, Copilot chat, PR reviews, and mobile.
53
+ </Card>
@@ -0,0 +1,134 @@
1
+ ---
2
+ name: testdriver:quickstart-manual
3
+ description: Add TestDriver to an existing project by hand.
4
+ ---
5
+ <!-- Generated from quickstart-manual.mdx. DO NOT EDIT. -->
6
+
7
+ Add TestDriver to an existing project without the `init` scaffold. This is useful when you already have a Vitest setup or want full control over each file.
8
+
9
+ <Tip>
10
+ If you are starting from scratch, the [CLI quickstart](/quickstart-cli) does all of this for you with one command.
11
+ </Tip>
12
+
13
+ <Steps>
14
+ <Step title="Get an API key">
15
+
16
+ <Card
17
+ title="Get an API Key"
18
+ icon="user-plus"
19
+ href="https://console.testdriver.ai/settings"
20
+ arrow
21
+ horizontal
22
+ >
23
+ Start with 60 free device minutes, no credit card required.
24
+ </Card>
25
+
26
+ Save the key in a `.env` file at your project root. The SDK loads it automatically:
27
+
28
+ ```bash .env
29
+ TD_API_KEY=your_api_key
30
+ ```
31
+
32
+ Add `.env` to `.gitignore` so the key is not committed.
33
+
34
+ </Step>
35
+ <Step title="Install dependencies">
36
+
37
+ Install Vitest and TestDriver as dev dependencies:
38
+
39
+ ```bash
40
+ npm install --save-dev vitest testdriverai
41
+ ```
42
+
43
+ <Note>
44
+ TestDriver requires Node.js 20.19 or later and only runs on [Vitest](https://vitest.dev). Jest, Mocha, and other runners are not supported.
45
+ </Note>
46
+
47
+ </Step>
48
+ <Step title="Configure Vitest">
49
+
50
+ Create `vitest.config.js` at your project root (or add these settings to an existing one):
51
+
52
+ ```js vitest.config.js
53
+ import { defineConfig } from 'vitest/config';
54
+ import TestDriver from 'testdriverai/vitest';
55
+
56
+ export default defineConfig({
57
+ test: {
58
+ // Sandboxes take time to boot and tear down. Both values are required.
59
+ testTimeout: 300000,
60
+ hookTimeout: 300000,
61
+ reporters: ['default', TestDriver()],
62
+ setupFiles: ['testdriverai/vitest/setup'],
63
+ },
64
+ });
65
+ ```
66
+
67
+ - `TestDriver()` reporter uploads results, recordings, and screenshots to the console.
68
+ - `setupFiles` registers the hooks that connect each test to a sandbox and clean it up.
69
+ - Without `hookTimeout`, cleanup fails at Vitest's default 10-second limit.
70
+
71
+ </Step>
72
+ <Step title="Write a test">
73
+
74
+ Create `tests/search.test.js`:
75
+
76
+ ```js tests/search.test.js
77
+ import { test, expect } from 'vitest';
78
+ import { TestDriver } from 'testdriverai/vitest/hooks';
79
+
80
+ test('search shows results', async (context) => {
81
+ // Connects to a sandbox and records the session
82
+ const testdriver = TestDriver(context);
83
+
84
+ // Launch Chrome at a URL
85
+ await testdriver.provision.chrome({ url: 'https://duckduckgo.com' });
86
+
87
+ // Locate elements by describing them
88
+ const searchBox = await testdriver.find('search input field');
89
+ await searchBox.click();
90
+
91
+ // Type into the focused element and submit
92
+ await testdriver.type('testdriver.ai');
93
+ await testdriver.pressKeys(['enter']);
94
+
95
+ // Ask a yes/no question about the screen
96
+ const result = await testdriver.assert('search results are displayed');
97
+ expect(result).toBeTruthy();
98
+ });
99
+ ```
100
+
101
+ If your project does not have `"type": "module"` in `package.json`, name the file `search.test.mjs` instead.
102
+
103
+ </Step>
104
+ <Step title="Run the test">
105
+
106
+ ```bash
107
+ npx vitest run
108
+ ```
109
+
110
+ A sandbox starts, Chrome opens, and a live preview appears in your browser. When the run finishes, open the `TESTDRIVER_RUN_URL` printed at the end of the output to see the recording and step-by-step screenshots.
111
+
112
+ </Step>
113
+ </Steps>
114
+
115
+ ## Optional: AI client setup
116
+
117
+ If you want to write tests with an AI assistant, connect the TestDriver agent and MCP server. You can do this without re-scaffolding the project:
118
+
119
+ ```bash
120
+ npx testdriverai init --client cursor,claude-code,vscode --no-sample-test
121
+ ```
122
+
123
+ See [Configure Your Agent](/quickstart-cli#connect-your-ai-client) for the manual configuration of each client.
124
+
125
+ ## Next steps
126
+
127
+ <CardGroup cols={2}>
128
+ <Card title="Walkthrough" icon="map" href="/provision" arrow horizontal>
129
+ Provision apps, locate elements, perform actions, and make assertions.
130
+ </Card>
131
+ <Card title="CI/CD" icon="github" href="/ci-cd" arrow horizontal>
132
+ Run tests on every pull request with GitHub Actions or another provider.
133
+ </Card>
134
+ </CardGroup>
@@ -6,20 +6,20 @@ description: Wait for the screen to stabilize after interactions
6
6
 
7
7
  ## Overview
8
8
 
9
- The redraw system waits for the screen to stabilize after an interaction before continuing. It detects when animations, page loads, and network requests have settled, preventing actions from being performed on a changing screen.
9
+ The redraw system waits for the screen to become stable after an interaction. Then it continues. It finds when animations, page loads, and network requests are complete. This stops actions on a screen that changes.
10
10
 
11
11
  <Note>
12
- **Redraw is disabled by default since v7.3.** Enable it explicitly if your tests interact with applications that have significant animations or loading states.
12
+ **Redraw is disabled by default from v7.3.** Enable it if your tests interact with applications that have many animations or load states.
13
13
  </Note>
14
14
 
15
15
  ## How It Works
16
16
 
17
- Redraw uses a **two-phase detection** approach:
17
+ Redraw uses a **two-phase detection** method:
18
18
 
19
- 1. **Change Detection** — Compare the current frame to the initial screenshot taken right after the action. If the pixel diff exceeds 0.1%, the screen has changed.
20
- 2. **Stability Detection** — Compare consecutive frames using z-score analysis. When the diff between frames drops below 0.1% or the z-score is negative (current diff is below average), the screen has settled.
19
+ 1. **Change Detection**. TestDriver compares the present frame to the first screenshot from after the action. If the pixel diff is more than 0.1%, the screen changed.
20
+ 2. **Stability Detection** — TestDriver compares frames that come after each other with z-score analysis. When the diff between frames is less than 0.1%, or the z-score is negative (the present diff is less than the average), the screen is complete.
21
21
 
22
- The screen is considered **settled** when both phases complete: the screen changed from the initial state AND consecutive frames are now stable.
22
+ The screen is **complete** when both phases finish: the screen changed from the first state AND the frames that come after each other are now stable.
23
23
 
24
24
  ```mermaid
25
25
  flowchart TD
@@ -4,11 +4,11 @@ description: Build maintainable test suites with reusable code patterns
4
4
  ---
5
5
  <!-- Generated from reusable-code.mdx. DO NOT EDIT. -->
6
6
 
7
- As your test suite grows, you'll want to extract common patterns into reusable code. This keeps tests DRY, readable, and easy to maintain.
7
+ When your test suite becomes larger, put the common patterns into reusable code. This keeps the tests short, easy to read, and easy to keep.
8
8
 
9
9
  ## Helper Functions
10
10
 
11
- The simplest approach is extracting common actions into helper functions. Create a `helpers/` directory for shared utilities:
11
+ The most simple method is to put the common actions into helper functions. Make a `helpers/` directory for the shared utilities:
12
12
 
13
13
  ```javascript test/helpers/auth.js
14
14
  export async function login(testdriver, { email, password }) {
@@ -37,7 +37,7 @@ export async function logout(testdriver) {
37
37
  ```
38
38
 
39
39
  <Warning>
40
- **Avoid hardcoding dynamic values in element descriptions.** Element selectors should describe the *type* of element, not specific content that might change.
40
+ **Do not put dynamic values in element descriptions.** An element selector must describe the *type* of the element. It must not describe specific content that can change.
41
41
 
42
42
  **❌ Bad:** `await testdriver.find('profile name TestDriver in the top right')`
43
43
  **✅ Good:** `await testdriver.find('user profile name in the top right')`