From ec79d7d94159bd569513a120ff24178e83d694d5 Mon Sep 17 00:00:00 2001 From: nusquama Date: Thu, 13 Nov 2025 14:22:32 +0100 Subject: [PATCH] creation --- .../readme-10326.md | 342 ++++++++++++++++++ 1 file changed, 342 insertions(+) create mode 100644 workflows/Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini-10326/readme-10326.md diff --git a/workflows/Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini-10326/readme-10326.md b/workflows/Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini-10326/readme-10326.md new file mode 100644 index 000000000..601bb8dfc --- /dev/null +++ b/workflows/Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4o-mini-10326/readme-10326.md @@ -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. \ No newline at end of file