feat: add LoRa Manager E2E testing skill documentation

Introduce comprehensive documentation for the new `lora-manager-e2e` skill, which provides end-to-end testing workflows for LoRa Manager. The skill enables automated validation of standalone mode, including server management, UI interaction via Chrome DevTools MCP, and frontend-to-backend integration testing. Key additions: - Detailed skill description and prerequisites - Quick start workflow for server setup and browser debugging - Common E2E test patterns for page load verification, server restart, and API testing - Example test flows demonstrating step-by-step validation procedures - Scripts and MCP command examples for practical implementation This documentation supports automated testing of LoRa Manager's web interface and backend functionality, ensuring reliable end-to-end validation of features.
2026-03-21 21:22:11 -03:00 · 2026-02-02 12:15:58 +08:00
parent e252e44403
commit 1daaff6bd4
6 changed files with 1220 additions and 0 deletions
--- a/.agents/skills/lora-manager-e2e/references/mcp-cheatsheet.md
+++ b/.agents/skills/lora-manager-e2e/references/mcp-cheatsheet.md
@@ -0,0 +1,324 @@
+# Chrome DevTools MCP Cheatsheet for LoRa Manager
+
+Quick reference for common MCP commands used in LoRa Manager E2E testing.
+
+## Navigation
+
+```python
+# Navigate to LoRA list page
+navigate_page(type="url", url="http://127.0.0.1:8188/loras")
+
+# Reload page with cache clear
+navigate_page(type="reload", ignoreCache=True)
+
+# Go back/forward
+navigate_page(type="back")
+navigate_page(type="forward")
+```
+
+## Waiting
+
+```python
+# Wait for text to appear
+wait_for(text="LoRAs", timeout=10000)
+
+# Wait for specific element (via evaluate_script)
+evaluate_script(function="""
+() => {
+    return new Promise((resolve) => {
+        const check = () => {
+            if (document.querySelector('.lora-card')) {
+                resolve(true);
+            } else {
+                setTimeout(check, 100);
+            }
+        };
+        check();
+    });
+}
+""")
+```
+
+## Taking Snapshots
+
+```python
+# Full page snapshot
+snapshot = take_snapshot()
+
+# Verbose snapshot (more details)
+snapshot = take_snapshot(verbose=True)
+
+# Save to file
+take_snapshot(filePath="test-snapshots/page-load.json")
+```
+
+## Element Interaction
+
+```python
+# Click element
+click(uid="element-uid-from-snapshot")
+
+# Double click
+click(uid="element-uid", dblClick=True)
+
+# Fill input
+fill(uid="search-input", value="test query")
+
+# Fill multiple inputs
+fill_form(elements=[
+    {"uid": "input-1", "value": "value 1"},
+    {"uid": "input-2", "value": "value 2"},
+])
+
+# Hover
+hover(uid="lora-card-1")
+
+# Upload file
+upload_file(uid="file-input", filePath="/path/to/file.safetensors")
+```
+
+## Keyboard Input
+
+```python
+# Press key
+press_key(key="Enter")
+press_key(key="Escape")
+press_key(key="Tab")
+
+# Keyboard shortcuts
+press_key(key="Control+A")  # Select all
+press_key(key="Control+F")  # Find
+```
+
+## JavaScript Evaluation
+
+```python
+# Simple evaluation
+result = evaluate_script(function="() => document.title")
+
+# Async evaluation
+result = evaluate_script(function="""
+async () => {
+    const response = await fetch('/loras/api/list');
+    return await response.json();
+}
+""")
+
+# Check element existence
+exists = evaluate_script(function="""
+() => document.querySelector('.lora-card') !== null
+""")
+
+# Get element count
+count = evaluate_script(function="""
+() => document.querySelectorAll('.lora-card').length
+""")
+```
+
+## Network Monitoring
+
+```python
+# List all network requests
+requests = list_network_requests()
+
+# Filter by resource type
+xhr_requests = list_network_requests(resourceTypes=["xhr", "fetch"])
+
+# Get specific request details
+details = get_network_request(reqid=123)
+
+# Include preserved requests from previous navigations
+all_requests = list_network_requests(includePreservedRequests=True)
+```
+
+## Console Monitoring
+
+```python
+# List all console messages
+messages = list_console_messages()
+
+# Filter by type
+errors = list_console_messages(types=["error", "warn"])
+
+# Include preserved messages
+all_messages = list_console_messages(includePreservedMessages=True)
+
+# Get specific message
+details = get_console_message(msgid=1)
+```
+
+## Performance Testing
+
+```python
+# Start trace with page reload
+performance_start_trace(reload=True, autoStop=False)
+
+# Start trace without reload
+performance_start_trace(reload=False, autoStop=True, filePath="trace.json.gz")
+
+# Stop trace
+results = performance_stop_trace()
+
+# Stop and save
+performance_stop_trace(filePath="trace-results.json.gz")
+
+# Analyze specific insight
+insight = performance_analyze_insight(
+    insightSetId="results.insightSets[0].id",
+    insightName="LCPBreakdown"
+)
+```
+
+## Page Management
+
+```python
+# List open pages
+pages = list_pages()
+
+# Select a page
+select_page(pageId=0, bringToFront=True)
+
+# Create new page
+new_page(url="http://127.0.0.1:8188/loras")
+
+# Close page (keep at least one open!)
+close_page(pageId=1)
+
+# Resize page
+resize_page(width=1920, height=1080)
+```
+
+## Screenshots
+
+```python
+# Full page screenshot
+take_screenshot(fullPage=True)
+
+# Viewport screenshot
+take_screenshot()
+
+# Element screenshot
+take_screenshot(uid="lora-card-1")
+
+# Save to file
+take_screenshot(filePath="screenshots/page.png", format="png")
+
+# JPEG with quality
+take_screenshot(filePath="screenshots/page.jpg", format="jpeg", quality=90)
+```
+
+## Dialog Handling
+
+```python
+# Accept dialog
+handle_dialog(action="accept")
+
+# Accept with text input
+handle_dialog(action="accept", promptText="user input")
+
+# Dismiss dialog
+handle_dialog(action="dismiss")
+```
+
+## Device Emulation
+
+```python
+# Mobile viewport
+emulate(viewport={"width": 375, "height": 667, "isMobile": True, "hasTouch": True})
+
+# Tablet viewport
+emulate(viewport={"width": 768, "height": 1024, "isMobile": True, "hasTouch": True})
+
+# Desktop viewport
+emulate(viewport={"width": 1920, "height": 1080})
+
+# Network throttling
+emulate(networkConditions="Slow 3G")
+emulate(networkConditions="Fast 4G")
+
+# CPU throttling
+emulate(cpuThrottlingRate=4)  # 4x slowdown
+
+# Geolocation
+emulate(geolocation={"latitude": 37.7749, "longitude": -122.4194})
+
+# User agent
+emulate(userAgent="Mozilla/5.0 (Custom)")
+
+# Reset emulation
+emulate(viewport=None, networkConditions="No emulation", userAgent=None)
+```
+
+## Drag and Drop
+
+```python
+# Drag element to another
+drag(from_uid="draggable-item", to_uid="drop-zone")
+```
+
+## Common LoRa Manager Test Patterns
+
+### Verify LoRA Cards Loaded
+
+```python
+navigate_page(type="url", url="http://127.0.0.1:8188/loras")
+wait_for(text="LoRAs", timeout=10000)
+
+# Check if cards loaded
+result = evaluate_script(function="""
+() => {
+    const cards = document.querySelectorAll('.lora-card');
+    return {
+        count: cards.length,
+        hasData: cards.length > 0
+    };
+}
+""")
+```
+
+### Search and Verify Results
+
+```python
+fill(uid="search-input", value="character")
+press_key(key="Enter")
+wait_for(timeout=2000)  # Wait for debounce
+
+# Check results
+result = evaluate_script(function="""
+() => {
+    const cards = document.querySelectorAll('.lora-card');
+    const names = Array.from(cards).map(c => c.dataset.name || c.textContent);
+    return { count: cards.length, names };
+}
+""")
+```
+
+### Check API Response
+
+```python
+# Trigger API call
+evaluate_script(function="""
+() => window.loraApiCallPromise = fetch('/loras/api/list').then(r => r.json())
+""")
+
+# Wait and get result
+import time
+time.sleep(1)
+
+result = evaluate_script(function="""
+async () => await window.loraApiCallPromise
+""")
+```
+
+### Monitor Console for Errors
+
+```python
+# Before test: clear console (navigate reloads)
+navigate_page(type="reload")
+
+# ... perform actions ...
+
+# Check for errors
+errors = list_console_messages(types=["error"])
+assert len(errors) == 0, f"Console errors: {errors}"
+```
--- a/.agents/skills/lora-manager-e2e/references/test-scenarios.md
+++ b/.agents/skills/lora-manager-e2e/references/test-scenarios.md
@@ -0,0 +1,272 @@
+# LoRa Manager E2E Test Scenarios
+
+This document provides detailed test scenarios for end-to-end validation of LoRa Manager features.
+
+## Table of Contents
+
+1. [LoRA List Page](#lora-list-page)
+2. [Model Details](#model-details)
+3. [Recipes](#recipes)
+4. [Settings](#settings)
+5. [Import/Export](#importexport)
+
+---
+
+## LoRA List Page
+
+### Scenario: Page Load and Display
+
+**Objective**: Verify the LoRA list page loads correctly and displays models.
+
+**Steps**:
+1. Navigate to `http://127.0.0.1:8188/loras`
+2. Wait for page title "LoRAs" to appear
+3. Take snapshot to verify:
+   - Header with "LoRAs" title is visible
+   - Search/filter controls are present
+   - Grid/list view toggle exists
+   - LoRA cards are displayed (if models exist)
+   - Pagination controls (if applicable)
+
+**Expected Result**: Page loads without errors, UI elements are present.
+
+### Scenario: Search Functionality
+
+**Objective**: Verify search filters LoRA models correctly.
+
+**Steps**:
+1. Ensure at least one LoRA exists with known name (e.g., "test-character")
+2. Navigate to LoRA list page
+3. Enter search term in search box: "test"
+4. Press Enter or click search button
+5. Wait for results to update
+
+**Expected Result**: Only LoRAs matching search term are displayed.
+
+**Verification Script**:
+```python
+# After search, verify filtered results
+evaluate_script(function="""
+() => {
+  const cards = document.querySelectorAll('.lora-card');
+  const names = Array.from(cards).map(c => c.dataset.name);
+  return { count: cards.length, names };
+}
+""")
+```
+
+### Scenario: Filter by Tags
+
+**Objective**: Verify tag filtering works correctly.
+
+**Steps**:
+1. Navigate to LoRA list page
+2. Click on a tag (e.g., "character", "style")
+3. Wait for filtered results
+
+**Expected Result**: Only LoRAs with selected tag are displayed.
+
+### Scenario: View Mode Toggle
+
+**Objective**: Verify grid/list view toggle works.
+
+**Steps**:
+1. Navigate to LoRA list page
+2. Click list view button
+3. Verify list layout
+4. Click grid view button
+5. Verify grid layout
+
+**Expected Result**: View mode changes correctly, layout updates.
+
+---
+
+## Model Details
+
+### Scenario: Open Model Details
+
+**Objective**: Verify clicking a LoRA opens its details.
+
+**Steps**:
+1. Navigate to LoRA list page
+2. Click on a LoRA card
+3. Wait for details panel/modal to open
+
+**Expected Result**: Details panel shows:
+- Model name
+- Preview image
+- Metadata (trigger words, tags, etc.)
+- Action buttons (edit, delete, etc.)
+
+### Scenario: Edit Model Metadata
+
+**Objective**: Verify metadata editing works end-to-end.
+
+**Steps**:
+1. Open a LoRA's details
+2. Click "Edit" button
+3. Modify trigger words field
+4. Add/remove tags
+5. Save changes
+6. Refresh page
+7. Reopen the same LoRA
+
+**Expected Result**: Changes persist after refresh.
+
+### Scenario: Delete Model
+
+**Objective**: Verify model deletion works.
+
+**Steps**:
+1. Open a LoRA's details
+2. Click "Delete" button
+3. Confirm deletion in dialog
+4. Wait for removal
+
+**Expected Result**: Model removed from list, success message shown.
+
+---
+
+## Recipes
+
+### Scenario: Recipe List Display
+
+**Objective**: Verify recipes page loads and displays recipes.
+
+**Steps**:
+1. Navigate to `http://127.0.0.1:8188/recipes`
+2. Wait for "Recipes" title
+3. Take snapshot
+
+**Expected Result**: Recipe list displayed with cards/items.
+
+### Scenario: Create New Recipe
+
+**Objective**: Verify recipe creation workflow.
+
+**Steps**:
+1. Navigate to recipes page
+2. Click "New Recipe" button
+3. Fill recipe form:
+   - Name: "Test Recipe"
+   - Description: "E2E test recipe"
+   - Add LoRA models
+4. Save recipe
+5. Verify recipe appears in list
+
+**Expected Result**: New recipe created and displayed.
+
+### Scenario: Apply Recipe
+
+**Objective**: Verify applying a recipe to ComfyUI.
+
+**Steps**:
+1. Open a recipe
+2. Click "Apply" or "Load in ComfyUI"
+3. Verify action completes
+
+**Expected Result**: Recipe applied successfully.
+
+---
+
+## Settings
+
+### Scenario: Settings Page Load
+
+**Objective**: Verify settings page displays correctly.
+
+**Steps**:
+1. Navigate to `http://127.0.0.1:8188/settings`
+2. Wait for "Settings" title
+3. Take snapshot
+
+**Expected Result**: Settings form with various options displayed.
+
+### Scenario: Change Setting and Restart
+
+**Objective**: Verify settings persist after restart.
+
+**Steps**:
+1. Navigate to settings page
+2. Change a setting (e.g., default view mode)
+3. Save settings
+4. Restart server: `python scripts/start_server.py --restart --wait`
+5. Refresh browser page
+6. Navigate to settings
+
+**Expected Result**: Changed setting value persists.
+
+---
+
+## Import/Export
+
+### Scenario: Export Models List
+
+**Objective**: Verify export functionality.
+
+**Steps**:
+1. Navigate to LoRA list
+2. Click "Export" button
+3. Select format (JSON/CSV)
+4. Download file
+
+**Expected Result**: File downloaded with correct data.
+
+### Scenario: Import Models
+
+**Objective**: Verify import functionality.
+
+**Steps**:
+1. Prepare import file
+2. Navigate to import page
+3. Upload file
+4. Verify import results
+
+**Expected Result**: Models imported successfully, confirmation shown.
+
+---
+
+## API Integration Tests
+
+### Scenario: Verify API Endpoints
+
+**Objective**: Verify backend API responds correctly.
+
+**Test via browser console**:
+```javascript
+// List LoRAs
+fetch('/loras/api/list').then(r => r.json()).then(console.log)
+
+// Get LoRA details
+fetch('/loras/api/detail/<id>').then(r => r.json()).then(console.log)
+
+// Search LoRAs
+fetch('/loras/api/search?q=test').then(r => r.json()).then(console.log)
+```
+
+**Expected Result**: APIs return valid JSON with expected structure.
+
+---
+
+## Console Error Monitoring
+
+During all tests, monitor browser console for errors:
+
+```python
+# Check for JavaScript errors
+messages = list_console_messages(types=["error"])
+assert len(messages) == 0, f"Console errors found: {messages}"
+```
+
+## Network Request Verification
+
+Verify key API calls are made:
+
+```python
+# List XHR requests
+requests = list_network_requests(resourceTypes=["xhr", "fetch"])
+
+# Look for specific endpoints
+lora_list_requests = [r for r in requests if "/api/list" in r.get("url", "")]
+assert len(lora_list_requests) > 0, "LoRA list API not called"
+```