klbr/n8nworkflows.xyz
1
0
Fork 0
mirror of https://github.com/khoaliber/n8nworkflows.xyz.git synced 2026-04-28 00:29:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

creation

Browse Source
This commit is contained in:
nusquama
2025-11-13 14:22:32 +01:00
parent 4bdfdf5d01
commit ec79d7d941
1 changed files with 342 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workflows/Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini-10326/readme-10326.md
+342
View File
@@ -0,0 +1,342 @@
Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini
https://n8nworkflows.xyz/workflows/generate-qa-test-cases-from-figma-designs-to-google-sheets-using-gpt-4o-mini-10326
# Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini
---
### 1. Workflow Overview
This workflow automates the generation of QA test cases from Figma design files using AI (OpenAI GPT-4o-mini) and exports the results to Google Sheets. It is designed for QA teams, product managers, and designers who want to accelerate test case creation based on UI designs.
**Logical Blocks:**
- **1.1 Input Reception & Data Fetching:**
Receives manual trigger input with a Figma file ID and fetches the design data from Figma API.
- **1.2 AI Processing:**
Uses OpenAI GPT-4o-mini model via LangChain nodes to analyze the Figma design JSON and generate structured test cases in JSON format.
- **1.3 Data Parsing & Formatting:**
Extracts and formats the AI-generated test cases into a structured array suitable for Google Sheets.
- **1.4 Export to Google Sheets:**
Appends the formatted test cases into a specified Google Sheets document.
- **1.5 Documentation & Configuration Notes:**
Sticky notes providing setup instructions, API configuration details, AI processing guidelines, and export configuration for easier maintenance and understanding.
---
### 2. Block-by-Block Analysis
#### 1.1 Input Reception & Data Fetching
- **Overview:**
This block initiates the workflow with a manual trigger, accepts a Figma file ID, and fetches the corresponding design data via the Figma API.
- **Nodes Involved:**
- Manual Start
- Fetch Figma Design Data
- **Node Details:**
- **Manual Start**
- Type: Manual Trigger
- Role: Entry point for manual execution.
- Configuration: No parameters; user triggers manually.
- Input: None
- Output: Triggers next node with empty data.
- Edge cases: Workflow won't start without manual trigger.
- **Fetch Figma Design Data**
- Type: HTTP Request
- Role: Retrieves Figma file JSON data for the provided file ID.
- Configuration:
- URL dynamically built using expression: `https://api.figma.com/v1/files/{{ $json.figmaFileId }}`
- Query parameters: `depth=1` (single level traversal), `geometry=paths` (include vector data)
- Timeout set to 30 seconds to handle large files
- Authentication via HTTP Header Auth with Figma Personal Access Token header `X-Figma-Token`
- Inputs: Figma file ID passed via JSON input
- Outputs: JSON containing Figma file structure (canvas, frames, components, layers)
- Edge cases:
- API rate limiting (max 500 requests/min)
- Timeout failure for very large files
- Invalid or expired token causing auth errors
- Missing or malformed file ID
- Version: n8n HTTP Request node v4.2
#### 1.2 AI Processing
- **Overview:**
Sends the fetched Figma JSON data to the OpenAI GPT-4o-mini model wrapped in a LangChain agent node to generate detailed QA test cases in a structured JSON format.
- **Nodes Involved:**
- AI Test Case Generator
- JSON Output Schema
- Conversation Memory
- OpenAI GPT-4o-mini
- **Node Details:**
- **OpenAI GPT-4o-mini**
- Type: LangChain Language Model node (lmChatOpenAi)
- Role: Provides the OpenAI GPT-4o-mini model as compute backend for the agent.
- Configuration:
- Model: `gpt-4o-mini` (cost-effective GPT-4 variant)
- Max tokens: 4000
- Temperature: 0.7 (for creative variety)
- Credentials: OpenAI API key
- Input: Prompt from AI Test Case Generator node via LangChain integration
- Output: Raw AI model response
- Edge cases:
- Rate limiting or quota exceeded errors
- Model response timeout or malformed output
- Credential invalidation
- Version: LangChain node v1.2
- **Conversation Memory**
- Type: LangChain Memory Buffer Window
- Role: Maintains session context for AI conversations keyed by Figma file ID to improve consistency.
- Configuration:
- Session key: `"figma_test_generation_" + FigmaFileId`
- Session ID type: custom key
- Input: Figma file ID from prior node
- Output: Passes memory context to AI Test Case Generator
- Edge cases: Memory overflow or stale context possibly affecting outputs
- Version: LangChain node v1.3
- **JSON Output Schema**
- Type: LangChain Output Parser Structured
- Role: Enforces JSON output format for AI responses, ensuring test cases follow a strict schema.
- Configuration:
- JSON schema example specifies array `test_cases` with `title` and `steps` fields per test case.
- Input: Raw AI output
- Output: Parsed structured JSON for downstream processing
- Edge cases: Parsing failure if AI does not comply with schema
- Version: LangChain node v1.3
- **AI Test Case Generator**
- Type: LangChain Agent Node
- Role: Orchestrates the prompt to AI, specifying detailed instructions to generate test cases from Figma design JSON.
- Configuration:
- Prompt includes detailed instructions covering UI elements, user flows, edge cases, accessibility, responsive design
- System message sets expert QA engineer context and output expectations
- Output required strictly in JSON format matching `test_cases` schema
- Input: Figma design JSON from HTTP Request node
- Output: AI-generated JSON test cases (raw)
- Edge cases:
- Improper prompt formatting
- AI hallucination or incomplete output
- Non-JSON or malformed JSON output
- Version: LangChain node v2.1
#### 1.3 Data Parsing & Formatting
- **Overview:**
Extracts the `test_cases` array from the AI output JSON and maps it into an array of objects formatted to fit the Google Sheets columns.
- **Nodes Involved:**
- Parse and Format Test Cases
- **Node Details:**
- **Parse and Format Test Cases**
- Type: Code node (JavaScript)
- Role: Parses AI output, extracts test cases, and transforms them to a structured array for Google Sheets.
- Configuration:
- Custom JavaScript code safely accesses `output.test_cases`
- Checks for valid array, logs if empty or missing
- Maps each test case to an object with `title` and `steps` fields, supplying defaults if missing
- Input: AI JSON output parsed by prior node
- Output: Array of objects `{ title, steps }` each representing one test case
- Edge cases:
- AI output missing `test_cases` key
- Empty or malformed arrays
- Steps or title missing or blank
- Code errors or exceptions in parsing
- Version: Code node v2
#### 1.4 Export to Google Sheets
- **Overview:**
Appends the formatted test cases as new rows into a Google Sheets document, mapping the `title` and `steps` fields to columns.
- **Nodes Involved:**
- Export to Google Sheets
- **Node Details:**
- **Export to Google Sheets**
- Type: Google Sheets node
- Role: Inserts test case rows into specified sheet.
- Configuration:
- Operation: Append (adds rows)
- Sheet name: "Test Cases" (dynamic from input or config)
- Document ID: dynamically set via expression referencing input JSON context variable
- Mapping mode: Auto map input data columns
- Columns configured: `title` (string), `steps` (string)
- Credentials: Google Sheets OAuth2 service account with proper sharing on target sheet
- Input: Array of formatted test cases from code node
- Output: Success confirmation JSON
- Edge cases:
- OAuth token expiration or invalid credentials
- Permissions errors if sheet not shared properly
- Document ID missing or incorrect
- Network issues or API quota limits
- Version: Google Sheets node v4.7
#### 1.5 Documentation & Configuration Notes (Sticky Notes)
- **Overview:**
Provides clear, embedded documentation and setup instructions for users and maintainers.
- **Nodes Involved:**
- Workflow Overview (sticky note)
- Setup Guide (sticky note)
- Figma API Notes (sticky note)
- AI Processing Details (sticky note)
- Code Logic Details (sticky note)
- Sheets Configuration (sticky note)
- **Node Details:**
- All sticky notes contain detailed explanations, best practices, API parameter info, usage tips, and example formats.
- Positioned near relevant nodes for clarity.
- No runtime effect but critical for correct setup and understanding.
- Edge cases: Risk of outdated information if not maintained alongside workflow changes.
---
### 3. Summary Table
| Node Name | Node Type | Functional Role | Input Node(s) | Output Node(s) | Sticky Note |
|-------------------------|--------------------------------------|-----------------------------------------------|-------------------------|-------------------------|----------------------------------------------------------------------------------------------|
| Manual Start | Manual Trigger | Workflow entry trigger | - | Fetch Figma Design Data | |
| Fetch Figma Design Data | HTTP Request | Fetches Figma design JSON data | Manual Start | AI Test Case Generator | See "Figma API Notes" sticky for API params & auth details |
| AI Test Case Generator | LangChain Agent | Sends design data to GPT-4o-mini to generate test cases | Fetch Figma Design Data | Parse and Format Test Cases | See "AI Processing Details" and "Code Logic Details" stickies for AI prompt & processing info |
| JSON Output Schema | LangChain Output Parser Structured | Parses AI response to enforce JSON schema | OpenAI GPT-4o-mini | AI Test Case Generator | |
| Conversation Memory | LangChain Memory Buffer Window | Maintains AI session context | Fetch Figma Design Data | AI Test Case Generator | |
| OpenAI GPT-4o-mini | LangChain Language Model | Provides GPT-4o-mini model for AI generation | AI Test Case Generator | AI Test Case Generator | See "AI Processing Details" sticky for model settings |
| Parse and Format Test Cases | Code | Extracts and formats AI output for Sheets | AI Test Case Generator | Export to Google Sheets | See "Code Logic Details" sticky for parsing logic and error handling |
| Export to Google Sheets | Google Sheets | Appends test cases to specified Google Sheet | Parse and Format Test Cases | - | See "Sheets Configuration" sticky for sheet setup and OAuth instructions |
| Workflow Overview | Sticky Note | Overview and purpose of the workflow | - | - | Contains high-level workflow description and use cases |
| Setup Guide | Sticky Note | Step-by-step setup instructions | - | - | Detailed setup for Figma token, OpenAI, Google Sheets, and inputs |
| Figma API Notes | Sticky Note | Figma API usage and parameters | - | - | Explains API query params, auth, rate limits, and timeout |
| AI Processing Details | Sticky Note | AI prompt design and output expectations | - | - | Contains AI model configuration and response format details |
| Code Logic Details | Sticky Note | Explains code node logic for parsing AI output | - | - | Describes how test cases are extracted and mapped |
| Sheets Configuration | Sticky Note | Google Sheets export setup and column mapping | - | - | Instructions on sheet format, permissions, and append operation |
---
### 4. Reproducing the Workflow from Scratch
1. **Create Manual Trigger Node:**
- Type: Manual Trigger
- No parameters. This node starts the workflow manually.
2. **Create HTTP Request Node "Fetch Figma Design Data":**
- Type: HTTP Request
- URL: `https://api.figma.com/v1/files/{{ $json.figmaFileId }}` (use expression to dynamically get Figma file ID)
- Query parameters:
- `depth` = `1`
- `geometry` = `paths`
- Authentication: HTTP Header Auth with header name `X-Figma-Token`
- Timeout: 30000 ms (30 seconds)
- Response format: JSON
- Credentials: Use Figma Personal Access Token stored in n8n credentials.
- Connect from Manual Trigger.
3. **Create LangChain Language Model Node "OpenAI GPT-4o-mini":**
- Type: LangChain lmChatOpenAi node
- Model: `gpt-4o-mini`
- Max tokens: 4000
- Temperature: 0.7
- Credentials: Add OpenAI API key credential.
4. **Create LangChain Memory Node "Conversation Memory":**
- Type: LangChain memoryBufferWindow node
- Session key expression: `"figma_test_generation_" + $json.figmaFileId`
- Session ID type: Custom Key
5. **Create LangChain Output Parser Node "JSON Output Schema":**
- Type: LangChain outputParserStructured
- JSON Schema Example:
```json
{
"test_cases": [
{
"title": "Test case title",
"steps": "Step 1: Action\nStep 2: Verification\nStep 3: Expected result"
}
]
}
```
6. **Create LangChain Agent Node "AI Test Case Generator":**
- Type: LangChain agent node
- Text prompt (use multi-line expression):
- Provide full Figma JSON data as input
- Instructions to generate 5-10 comprehensive test cases covering UI elements, user flows, edge cases, accessibility, and responsive design
- Require output in strict JSON matching `test_cases` array schema described above
- System message setting instructing AI as expert QA engineer with detailed requirements
- Enable output parser: true
- Connect inputs:
- Use "Fetch Figma Design Data" node output as input data
- Link LangChain Language Model node, Memory node, and Output Parser node as respective sub-nodes or linked nodes in LangChain agent config.
7. **Create Code Node "Parse and Format Test Cases":**
- Type: Code (JavaScript)
- Code:
```javascript
const aiOutput = $json.output; // AI structured JSON
const testCases = aiOutput?.test_cases || [];
if (!Array.isArray(testCases) || testCases.length === 0) {
console.log('No test cases generated');
return [];
}
return testCases.map(tc => ({
json: {
title: tc.title || 'Untitled Test Case',
steps: tc.steps || 'No steps provided',
}
}));
```
- Connect from AI Test Case Generator node output.
8. **Create Google Sheets Node "Export to Google Sheets":**
- Type: Google Sheets
- Operation: Append
- Sheet Name: "Test Cases" (set as string or dynamic expression)
- Document ID: Pass dynamically from input JSON or hardcode for your sheet
- Columns: `title` (string), `steps` (string)
- Mapping Mode: Auto Map Input Data
- Credentials: Google Sheets OAuth2 service account, ensure sheet is shared with this account.
- Connect from Code node output.
9. **Connect the nodes in order:**
Manual Start → Fetch Figma Design Data → AI Test Case Generator → Parse and Format Test Cases → Export to Google Sheets
10. **Add sticky notes for documentation:**
- Add notes near each major block to describe purpose, setup, and configuration for maintainers.
---
### 5. General Notes & Resources
| Note Content | Context or Link |
|----------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|
| Workflow automates QA test case generation from Figma designs using AI with OpenAI GPT-4o-mini. | Overview sticky note for general understanding. |
| Figma Personal Access Token required; generate from Figma Settings under Personal Access Tokens. | Setup Guide sticky note; also includes exact header name `X-Figma-Token`. |
| OpenAI API key configured with model `gpt-4o-mini` for cost-effective AI usage. | Setup Guide sticky note; estimated cost $0.02-0.05 per run. |
| Google Sheets OAuth2 credentials must be authorized; sheet should have columns `title` and `steps`. | Setup Guide and Sheets Configuration sticky notes. |
| Figma API rate limits: 500 requests per minute, timeout 30 seconds for large files. | Figma API Notes sticky note. |
| AI prompt includes detailed instructions for coverage: UI elements, user flows, edge cases, accessibility, responsive design. | AI Processing Details sticky note. |
| AI output must strictly follow JSON schema for parsing and formatting test cases. | JSON Output Schema node and Code node logic detailed in Code Logic Details sticky note. |
| Google Sheets append operation auto-maps columns; ensure sheet is shared with the OAuth2 service account. | Sheets Configuration sticky note. |
| Link to n8n community post about similar Figma to test case automation workflows (example): https://community.n8n.io | Relevant external resource for workflow inspiration and support. |
---
This completes the comprehensive documentation and analysis of the "Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini" workflow. It is designed for easy understanding, modification, and error anticipation for both human users and automation agents.