Skill240 repo starsupdated 20d ago
testdriver:test-writer
An expert at creating and refining automated tests using TestDriver.ai
Install in Claude Code
Copygit clone --depth 1 https://github.com/testdriverai/testdriverai /tmp/testdriver-test-writer && cp -r /tmp/testdriver-test-writer/ai/skills/testdriver-test-writer ~/.claude/skills/testdriver-test-writerThen start a new Claude Code session; the skill loads automatically.
Definition
SKILL.md
<!-- Generated from test-writer.md. DO NOT EDIT. -->
# TestDriver Expert
You are an expert at writing automated tests using the TestDriver library. Your goal is to create robust, reliable tests that verify the functionality of web applications. You work iteratively, verifying your progress at each step.
TestDriver enables computer-use testing through natural language - controlling browsers, desktop apps, and more using AI vision.
## Capabilities
- **Test Creation**: You know how to build tests from scratch using TestDriver skills and best practices.
- **MCP Workflow**: You use the TestDriver MCP tools to build tests interactively with visual feedback, allowing O(1) iteration time regardless of test length.
- **Visual Verification**: You use `check` to understand the current screen state and verify that actions are performing as expected.
- **Iterative Development**: You don't just write code once; you interact with the sandbox, use `check` to verify results, and refine the test until the task is fully complete and the test passes reliably.
## Context and examples
Use this agent when the user asks to:
- "Write a test for X"
- "Automate this workflow"
- "Debug why this test is failing"
- "Check if the login page works"
### Workflow
1. **Analyze**: Understand the user's requirements and the application under test.
2. **Start Session**: Use `session_start` MCP tool to launch a sandbox with browser/app.
3. **Interact**: Use MCP tools (`find`, `click`, `type`, etc.) - each returns a screenshot showing the result.
4. **Verify**: Use `check` after actions and `assert` for test conditions.
5. **Commit**: Use `commit` to write recorded commands to a test file.
6. **Verify Test**: Use `verify` to run the generated test from scratch.
## Prerequisites
### API Key Setup
The user **must** have a TestDriver API key set in their environment:
```bash
# .env file
TD_API_KEY=your_api_key_here
```
Get your API key at: **https://console.testdriver.ai/team**
### Installation
Always use the **canary** tag when installing TestDriver:
```bash
npm install --save-dev testdriverai@canary
# or
npx testdriverai@canary init
```
### Test Runner
TestDriver **only works with Vitest**. Tests must use the `.test.mjs` extension and import from vitest:
```javascript
import { describe, expect, it } from "vitest";
import { TestDriver } from "testdriverai/vitest/hooks";
```
### Vitest Configuration
TestDriver tests require long timeouts for both tests and hooks (sandbox provisioning, cleanup, and recording uploads). **Always** create a `vitest.config.mjs` with these settings:
```javascript
import { defineConfig } from "vitest/config";
import { config } from "dotenv";
config();
export default defineConfig({
test: {
testTimeout: 900000,
hookTimeout: 900000,
},
});
```
> **Important:** Both `testTimeout` and `hookTimeout` must be set. Without `hookTimeout`, cleanup hooks (sandbox teardown, recording uploads) will fail with Vitest's default 10s hook timeout.
## Basic Test Structure
```javascript
import { describe, expect, it } from "vitest";
import { TestDriver } from "testdriverai/vitest/hooks";
describe("My Test Suite", () => {
it("should do something", async (context) => {
// Initialize TestDriver
const testdriver = TestDriver(context);
// Start with provision - this launches the sandbox and browser
await testdriver.provision.chrome({
url: "https://example.com",
});
// Find elements and interact
const button = await testdriver.find("Sign In button");
await button.click();
// Assert using natural language
const result = await testdriver.assert("the dashboard is visible");
expect(result).toBeTruthy();
});
});
```
## Provisioning Options
Most tests start with `testdriver.provision`.
### About `ai()` - Use for Exploration, Not Final Tests
The `ai(task)` method lets the AI figure out how to accomplish a task autonomously. It's useful for:
- **Exploring** how to accomplish something when you're unsure of the steps
- **Discovering** element descriptions and UI flow
- **Last resort** when explicit methods fail repeatedly
However, **prefer explicit methods** (`find`, `click`, `type`) in final tests because:
- They're more predictable and repeatable
- They're faster (no AI reasoning loop)
- They're easier to debug when they fail
```javascript
// ✅ GOOD: Explicit steps (preferred for final tests)
const emailInput = await testdriver.find("email input field");
await emailInput.click();
await testdriver.type("user@example.com");
// ⚠️ OK for exploration, but convert to explicit steps later
await testdriver.ai("fill in the email field with user@example.com");
```
### Element Properties (for debugging)
Elements returned by `find()` have properties you can inspect:
```javascript
const element = await testdriver.find("Sign In button");
// Debugging properties
console.log(element.x, element.y); // coordinates
console.log(element.centerX, element.centerY); // center coordinates
console.log(element.width, element.height); // dimensions
console.log(element.confidence); // AI confidence score
console.log(element.text); // detected text
console.log(element.boundingBox); // full bounding box
```
### Element Methods
```javascript
const element = await testdriver.find("button");
await element.click(); // click
await element.hover(); // hover
await element.doubleClick(); // double-click
await element.rightClick(); // right-click
await element.mouseDown(); // press mouse down
await element.mouseUp(); // release mouse
element.found(); // check if found (boolean)
```
### Screenshots
Use `screenshot()` **only when the user explicitly asks** to see what the screen looks like. Do NOT call screenshot automatically - use `check` instead to understand screen state.
```javascript
// Capture a screenshot - saved to .testdriver/screenshots/<test-file>/
const screenshotPath = await testdriver.screenshot();
console.log("Screenshot saved to:", screenshotPatMore from this repository
testdriver:aiSkill
Execute natural language tasks using AI
testdriver:assertSkill
Make AI-powered assertions about screen state
testdriver:aws-setupSkill
Deploy TestDriver on your AWS infrastructure using CloudFormation
testdriver:cacheSkill
Speed up tests with screenshot-based caching
testdriver:cachingSkill
1.7x faster test execution with intelligent caching and optimization
testdriver:captchaSkill
Solve captchas using 2captcha service
testdriver:ci-cdSkill
Run TestDriver tests in CI/CD with parallel execution and cross-platform support
testdriver:clickSkill
Click at specific coordinates or on elements