# Test Scripts
This directory contains test scripts for validating and demonstrating the Figma MCP server functionality.
## Available Tests
### 1. test-tool.ts - HTML/CSS Generation
Tests the `generateFullDesign` tool by converting a Figma design to HTML/CSS.
**Usage:**
```bash
npx tsx tests/test-tool.ts
```
**What it does:**
- Fetches a Figma node
- Generates complete HTML with inline CSS
- Saves to `output.html` in root directory
- Includes normalized class names and responsive styles
**Configuration:**
Edit the file to change:
- `fileKey` - Your Figma file ID
- `nodeId` - The node/component to export
- Output filename
### 2. test-image.ts - Screenshot Capture
Tests the `getImage` tool by capturing and downloading a screenshot.
**Usage:**
```bash
npx tsx tests/test-image.ts
```
**What it does:**
- Requests an image render from Figma API
- Downloads the image file
- Saves as `figma-screenshot-{nodeId}.{format}`
- Supports PNG, JPG, SVG, PDF formats
**Configuration:**
Edit the file to change:
- `fileKey` - Your Figma file ID
- `nodeId` - The node to capture
- `format` - png, jpg, svg, or pdf
- `scale` - 0.01 to 4 (default: 2)
### 3. test-token.ts - Token Validation
Tests your Figma API token and validates access permissions.
**Usage:**
```bash
npx tsx tests/test-token.ts
```
**What it does:**
- Validates token against `/v1/me` endpoint
- Tests file access permissions
- Tests node access permissions
- Provides diagnostic information
**Use when:**
- Setting up for the first time
- Getting "Invalid token" errors
- Troubleshooting API access issues
## Running Tests
### Prerequisites
```bash
# Ensure dependencies are installed
npm install
# Ensure .env file exists with FIGMA_TOKEN
cat .env
```
### Run Individual Tests
```bash
npx tsx tests/test-tool.ts
npx tsx tests/test-image.ts
npx tsx tests/test-token.ts
```
### Run All Tests
```bash
npx tsx tests/test-token.ts && npx tsx tests/test-tool.ts && npx tsx tests/test-image.ts
```
## Test Configuration
All tests read from the `.env` file in the root directory:
```bash
FIGMA_TOKEN=your_personal_access_token_here
```
Edit test files to change:
- File keys
- Node IDs
- Output formats
- Scale factors
## Expected Output
### test-tool.ts
```
✅ Saved to output.html
```
Creates `output.html` with complete HTML/CSS
### test-image.ts
```
✅ Image URL: https://...
✅ Saved to figma-screenshot-2168-13148.png
File size: 1.22 MB
```
Creates image file in root directory
### test-token.ts
```
✅ Token is valid!
✅ File access successful
✅ Node access successful
```
Validates all API access
## Troubleshooting
### "FIGMA_TOKEN is not set"
- Create `.env` file in root directory
- Add `FIGMA_TOKEN=your_token`
### "Invalid token" Error
- Use Personal Access Token (not file token)
- Get from: https://www.figma.com/settings
- See docs/TROUBLESHOOTING.md
### "Node not found"
- Check node ID format (both `8384-4` and `8384:4` work)
- Verify node exists in Figma file
- Check file access permissions
### TypeScript Errors
- Rebuild project: `npm run build`
- Check Node.js version: `node --version` (need v17+)
## Adding New Tests
Create a new test file following this pattern:
```typescript
import axios from "axios";
import dotenv from "dotenv";
dotenv.config();
const FIGMA_TOKEN = process.env.FIGMA_TOKEN;
const figmaApi = axios.create({
baseURL: "https://api.figma.com/v1/",
headers: { "X-Figma-Token": FIGMA_TOKEN },
});
async function testFeature() {
try {
// Your test logic here
console.log("✅ Test passed");
} catch (error: any) {
console.error("❌ Test failed:", error.message);
}
}
testFeature();
```
## Notes
- Test scripts use `tsx` to run TypeScript directly
- No compilation needed for quick testing
- Edit files directly to change test parameters
- Results are saved to root directory
