@testdriverai/mcp 7.11.184-test → 7.11.186-test
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/ai/skills/testdriver-mcp-setup/SKILL.md +191 -0
- package/ai/skills/testdriver-quickstart/SKILL.md +2 -2
- package/ai/skills/testdriver-quickstart-manual/SKILL.md +2 -2
- package/ai/skills/testdriver-self-hosted/SKILL.md +4 -0
- package/docs/_data/examples-manifest.json +40 -40
- package/docs/docs.json +6 -2
- package/docs/examples/assert.mdx +1 -1
- package/docs/examples/element-not-found.mdx +1 -1
- package/docs/examples/findall-coffee-icons.mdx +1 -1
- package/docs/examples/hover-image.mdx +1 -1
- package/docs/examples/hover-text-with-description.mdx +1 -1
- package/docs/examples/hover-text.mdx +1 -1
- package/docs/examples/installer.mdx +1 -1
- package/docs/examples/launch-vscode-linux.mdx +1 -1
- package/docs/examples/parse.mdx +1 -1
- package/docs/examples/press-keys.mdx +1 -1
- package/docs/examples/scroll-keyboard.mdx +1 -1
- package/docs/examples/scroll.mdx +1 -1
- package/docs/examples/type.mdx +1 -1
- package/docs/mcp-setup.mdx +192 -0
- package/docs/quickstart-manual.mdx +2 -2
- package/docs/quickstart.mdx +2 -2
- package/package.json +1 -1
- package/ai/skills/testdriver-quickstart-cli/SKILL.md +0 -436
- package/docs/quickstart-cli.mdx +0 -437
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "MCP Setup"
|
|
3
|
+
sidebarTitle: "MCP Setup"
|
|
4
|
+
description: "Connect any AI client to TestDriver by adding one URL."
|
|
5
|
+
icon: "plug"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
TestDriver runs a hosted [Model Context Protocol](https://modelcontextprotocol.io) server. There is nothing to install and no API key to paste. Add one URL to your AI client, sign in through the browser, and the computer-use tools appear in chat.
|
|
9
|
+
|
|
10
|
+
```text
|
|
11
|
+
https://mcp.testdriver.ai/mcp
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
<Info>
|
|
15
|
+
**Prerequisites**
|
|
16
|
+
|
|
17
|
+
- An MCP-compatible AI client (Claude, Claude Code, VS Code, Cursor, ChatGPT, and others)
|
|
18
|
+
- A TestDriver account. [Create one for free](https://console.testdriver.ai/settings). You get 60 device minutes, no credit card required.
|
|
19
|
+
</Info>
|
|
20
|
+
|
|
21
|
+
## Add the server
|
|
22
|
+
|
|
23
|
+
Most clients accept the URL directly. Pick yours below.
|
|
24
|
+
|
|
25
|
+
<Tabs>
|
|
26
|
+
<Tab title="Claude">
|
|
27
|
+
1. Open **Settings → Connectors → Add custom connector**.
|
|
28
|
+
2. Paste `https://mcp.testdriver.ai/mcp`.
|
|
29
|
+
3. Click **Connect** and sign in with TestDriver when the browser opens.
|
|
30
|
+
</Tab>
|
|
31
|
+
|
|
32
|
+
<Tab title="Claude Code">
|
|
33
|
+
```bash
|
|
34
|
+
claude mcp add --transport http testdriver https://mcp.testdriver.ai/mcp
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Run `/mcp` in a session to start the browser login and confirm the tools are connected.
|
|
38
|
+
</Tab>
|
|
39
|
+
|
|
40
|
+
<Tab title="VS Code">
|
|
41
|
+
Add this to `.vscode/mcp.json` in your project. VS Code uses the `servers` key:
|
|
42
|
+
|
|
43
|
+
```json .vscode/mcp.json
|
|
44
|
+
{
|
|
45
|
+
"servers": {
|
|
46
|
+
"testdriver": {
|
|
47
|
+
"type": "http",
|
|
48
|
+
"url": "https://mcp.testdriver.ai/mcp"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
VS Code prompts you to authorize the server the first time you use it.
|
|
55
|
+
</Tab>
|
|
56
|
+
|
|
57
|
+
<Tab title="Cursor">
|
|
58
|
+
Add this to `.cursor/mcp.json` (project) or `~/.cursor/mcp.json` (global):
|
|
59
|
+
|
|
60
|
+
```json .cursor/mcp.json
|
|
61
|
+
{
|
|
62
|
+
"mcpServers": {
|
|
63
|
+
"testdriver": {
|
|
64
|
+
"url": "https://mcp.testdriver.ai/mcp"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
</Tab>
|
|
70
|
+
|
|
71
|
+
<Tab title="ChatGPT">
|
|
72
|
+
1. Open **Settings → Connectors → Create**.
|
|
73
|
+
2. Paste `https://mcp.testdriver.ai/mcp` as the MCP server URL.
|
|
74
|
+
3. Choose OAuth for authentication and sign in with TestDriver.
|
|
75
|
+
</Tab>
|
|
76
|
+
|
|
77
|
+
<Tab title="Other clients">
|
|
78
|
+
Any spec-compliant client works. Point it at the URL using the streamable HTTP transport:
|
|
79
|
+
|
|
80
|
+
```json
|
|
81
|
+
{
|
|
82
|
+
"mcpServers": {
|
|
83
|
+
"testdriver": {
|
|
84
|
+
"url": "https://mcp.testdriver.ai/mcp"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
</Tab>
|
|
90
|
+
</Tabs>
|
|
91
|
+
|
|
92
|
+
<Note>
|
|
93
|
+
Clients disagree on the top-level key. VS Code uses `servers`, most others use `mcpServers`, Zed uses `context_servers`, and Codex uses TOML `[mcp_servers]`. If the tools do not show up, check the key before anything else.
|
|
94
|
+
</Note>
|
|
95
|
+
|
|
96
|
+
## Sign in
|
|
97
|
+
|
|
98
|
+
The server speaks OAuth 2.1 and advertises its authorization server via [RFC 9728](https://www.rfc-editor.org/rfc/rfc9728) protected-resource metadata:
|
|
99
|
+
|
|
100
|
+
```text
|
|
101
|
+
https://mcp.testdriver.ai/.well-known/oauth-protected-resource
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Spec-compliant clients read that metadata, open a browser, and complete the handshake for you. Every tool is scoped to the team you sign in with.
|
|
105
|
+
|
|
106
|
+
## Verify it works
|
|
107
|
+
|
|
108
|
+
Ask your client to drive a browser:
|
|
109
|
+
|
|
110
|
+
```text
|
|
111
|
+
Use TestDriver to open example.com and assert the page title is visible.
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
The agent starts a sandbox and returns a screenshot with every action. Each connection gets its own isolated sandbox, so multiple people and multiple chats can run tests at the same time without interfering.
|
|
115
|
+
|
|
116
|
+
## What you get
|
|
117
|
+
|
|
118
|
+
The hosted server exposes the full live tool set:
|
|
119
|
+
|
|
120
|
+
| Tool | Purpose |
|
|
121
|
+
| --- | --- |
|
|
122
|
+
| `session_start`, `session_status`, `session_extend` | Start a sandbox, check its health, add more time |
|
|
123
|
+
| `find`, `findall`, `find_and_click` | Locate elements by plain-English description |
|
|
124
|
+
| `click`, `hover`, `type`, `press_keys`, `scroll` | Perform actions |
|
|
125
|
+
| `assert`, `check` | Ask yes/no questions about the screen |
|
|
126
|
+
| `screenshot`, `exec`, `wait`, `focus_application` | Capture state, run commands, pause |
|
|
127
|
+
|
|
128
|
+
Every action also returns the SDK code for that step, so the agent can write a runnable [Vitest](https://vitest.dev) test as it goes.
|
|
129
|
+
|
|
130
|
+
## Local server for CI and automation
|
|
131
|
+
|
|
132
|
+
For headless automation, or when you would rather use an API key than a browser login, run the server as a local stdio process:
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
npx -p testdriverai testdriverai-mcp
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
It reads `TD_API_KEY` from the environment. Generate a key at [console.testdriver.ai/settings](https://console.testdriver.ai/settings).
|
|
139
|
+
|
|
140
|
+
```json
|
|
141
|
+
{
|
|
142
|
+
"mcpServers": {
|
|
143
|
+
"testdriver": {
|
|
144
|
+
"type": "stdio",
|
|
145
|
+
"command": "npx",
|
|
146
|
+
"args": ["-p", "testdriverai", "testdriverai-mcp"],
|
|
147
|
+
"env": { "TD_API_KEY": "${TD_API_KEY}" }
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
<Tip>
|
|
154
|
+
`npx testdriverai init` writes this config for you, plus the TestDriver agent, skills, an example test, and a GitHub Actions workflow. See [Setting up your workspace](/quickstart-manual).
|
|
155
|
+
</Tip>
|
|
156
|
+
|
|
157
|
+
## Troubleshooting
|
|
158
|
+
|
|
159
|
+
<AccordionGroup>
|
|
160
|
+
<Accordion title="The tools do not appear in my client">
|
|
161
|
+
Confirm the URL is exactly `https://mcp.testdriver.ai/mcp`, check that you used the correct top-level config key for your client, and restart the client. Most clients read their MCP config only at startup.
|
|
162
|
+
</Accordion>
|
|
163
|
+
|
|
164
|
+
<Accordion title="The browser login never completes">
|
|
165
|
+
Your client must support OAuth 2.1 with Dynamic Client Registration. Older clients, and clients that only support stdio servers, cannot connect to the hosted URL. Use the local server with `TD_API_KEY` instead.
|
|
166
|
+
</Accordion>
|
|
167
|
+
|
|
168
|
+
<Accordion title="I ran out of device minutes">
|
|
169
|
+
Sandbox time is billed per minute. Check your usage and plan at [console.testdriver.ai](https://console.testdriver.ai).
|
|
170
|
+
</Accordion>
|
|
171
|
+
|
|
172
|
+
<Accordion title="The sandbox expired mid-session">
|
|
173
|
+
Sessions time out after a period of inactivity. Ask the agent to call `session_extend` before it expires, or `session_start` to get a fresh sandbox.
|
|
174
|
+
</Accordion>
|
|
175
|
+
</AccordionGroup>
|
|
176
|
+
|
|
177
|
+
## Next steps
|
|
178
|
+
|
|
179
|
+
<CardGroup cols={2}>
|
|
180
|
+
<Card title="Generating tests" icon="wand-magic-sparkles" href="/generating-tests" arrow horizontal>
|
|
181
|
+
Prompting patterns that get the best tests out of the agent.
|
|
182
|
+
</Card>
|
|
183
|
+
<Card title="Setting up your workspace" icon="wrench" href="/quickstart-manual" arrow horizontal>
|
|
184
|
+
Add the SDK to a project so generated tests run locally and in CI.
|
|
185
|
+
</Card>
|
|
186
|
+
<Card title="Walkthrough" icon="map" href="/provision" arrow horizontal>
|
|
187
|
+
Provision apps, locate elements, perform actions, and make assertions.
|
|
188
|
+
</Card>
|
|
189
|
+
<Card title="CI/CD" icon="circle-play" href="/ci-cd" arrow horizontal>
|
|
190
|
+
Run your tests on every pull request.
|
|
191
|
+
</Card>
|
|
192
|
+
</CardGroup>
|
|
@@ -8,7 +8,7 @@ icon: "wrench"
|
|
|
8
8
|
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.
|
|
9
9
|
|
|
10
10
|
<Tip>
|
|
11
|
-
If you
|
|
11
|
+
If you only want to drive TestDriver from chat, [MCP Setup](/mcp-setup) is a single URL with nothing to install.
|
|
12
12
|
</Tip>
|
|
13
13
|
|
|
14
14
|
<Steps>
|
|
@@ -121,7 +121,7 @@ If you want to write tests with an AI assistant, connect the TestDriver agent an
|
|
|
121
121
|
npx testdriverai init --client cursor,claude-code,vscode --no-sample-test
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
-
See [
|
|
124
|
+
See [MCP Setup](/mcp-setup) for the configuration of each client.
|
|
125
125
|
|
|
126
126
|
## Next steps
|
|
127
127
|
|
package/docs/quickstart.mdx
CHANGED
|
@@ -11,8 +11,8 @@ TestDriver writes and runs computer-use tests for web apps, desktop apps, and br
|
|
|
11
11
|
<Card title="Add to GitHub" icon="github" href="/quickstart-github" arrow horizontal>
|
|
12
12
|
No install. Mention `@testdriverai` in a PR or issue and it writes, runs, and commits tests for you.
|
|
13
13
|
</Card>
|
|
14
|
-
<Card title="
|
|
15
|
-
|
|
14
|
+
<Card title="MCP Setup" icon="plug" href="/mcp-setup" arrow horizontal>
|
|
15
|
+
Add one URL to Claude, Cursor, VS Code, ChatGPT, or any MCP client. No install, no API key.
|
|
16
16
|
</Card>
|
|
17
17
|
<Card title="Manual" icon="wrench" href="/quickstart-manual" arrow horizontal>
|
|
18
18
|
Add TestDriver to an existing Vitest project file by file.
|
package/package.json
CHANGED
|
@@ -1,436 +0,0 @@
|
|
|
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>
|