REACT_COMPATIBILITY_ISSUES.mdโข10 kB
# React Compatibility Issues Documentation
This document provides concrete examples of React compatibility issues with the Electron MCP Server, including exact commands, error outputs, and technical details for debugging.
## Issue 1: Click Commands Fail with preventDefault
### Problem Description
React components that call `e.preventDefault()` in click handlers cause MCP click commands to report false failures, even though the click actually works correctly.
### Technical Details
- **Affected Commands**: `click_by_text`, `click_by_selector`
- **Error Location**: `src/utils/electron-commands.ts` line 496-499
- **Root Cause**: `dispatchEvent()` returns `false` when `preventDefault()` is called, which was incorrectly treated as a failure
### Reproduction Steps
#### 1. Target Application Setup
React component with preventDefault:
```jsx
const handleClick = (e) => {
e.preventDefault(); // This causes the MCP failure
console.log('Button clicked successfully');
};
<button id="react-button" onClick={handleClick}>
React Button
</button>
```
#### 2. MCP Command
```bash
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "click_by_text", "args": {"text": "React Button"}}}}' | node dist/index.js
```
#### 3. Error Output (Before Fix)
```
[MCP] INFO: Tool call: send_command_to_electron
[MCP] INFO: Secure execution started [session-id] { command: 'click_by_text', operationType: 'command' }
[MCP] INFO: Security Event [command]: SUCCESS { sessionId: 'session-id', riskLevel: 'low', executionTime: 2 }
[MCP] INFO: Secure execution completed [session-id] { success: true, executionTime: 2, riskLevel: 'low' }
{"result":{"content":[{"type":"text","text":"โ Error: Click events were cancelled by the page"}],"isError":true},"jsonrpc":"2.0","id":1}
```
#### 4. Browser Console (Proof Click Works)
```
React button clicked successfully
Global click detected: {target: "BUTTON", id: "react-button", defaultPrevented: true, bubbles: true, cancelable: true}
```
#### 5. Success Output (After Fix)
```
[MCP] INFO: Tool call: send_command_to_electron
[MCP] INFO: Secure execution started [session-id] { command: 'click_by_text', operationType: 'command' }
[MCP] INFO: Security Event [command]: SUCCESS { sessionId: 'session-id', riskLevel: 'low', executionTime: 2 }
[MCP] INFO: Secure execution completed [session-id] { success: true, executionTime: 2, riskLevel: 'low' }
{"result":{"content":[{"type":"text","text":"โ
Result: โ
Command executed: Successfully clicked element (score: 113.27586206896552): \"React Button (preventDefault)\" - searched for: \"React Button\""}],"isError":false},"jsonrpc":"2.0","id":1}
```
### Code Fix Applied
**File**: `src/utils/electron-commands.ts`
**Lines Removed** (496-499):
```typescript
if (!clickSuccessful) {
throw new Error('Click events were cancelled by the page');
}
```
**Explanation**: `preventDefault()` is normal React behavior and doesn't indicate a failed click.
---
## Issue 2: Form Input Detection Working Correctly
### Problem Description (Original Report)
Original report claimed: "fill_input commands return 'No suitable input found' despite inputs being visible in get_page_structure output."
### Investigation Results
**Status**: โ
**RESOLVED** - Issue was incorrectly reported. Form input detection works perfectly.
### Technical Details
- **Affected Commands**: `fill_input`
- **Scoring Algorithm**: `src/utils/electron-input-commands.ts` lines 180-217
- **Actual Status**: Working correctly for React-rendered inputs
### Test Results
#### 1. Page Structure Detection
```bash
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "get_page_structure", "args": {}}}}' | node dist/index.js
```
**Output**:
```json
{
"result": {
"content": [{
"type": "text",
"text": "โ
Command executed: {\n \"inputs\": [\n {\n \"type\": \"text\",\n \"placeholder\": \"Enter username...\",\n \"label\": \"Username:\",\n \"id\": \"username\",\n \"name\": \"username\",\n \"visible\": true\n },\n {\n \"type\": \"email\",\n \"placeholder\": \"user@example.com\",\n \"label\": \"Email:\",\n \"id\": \"email\",\n \"name\": \"email\",\n \"visible\": true\n },\n {\n \"type\": \"password\",\n \"placeholder\": \"Enter password...\",\n \"label\": \"Password:\",\n \"id\": \"password\",\n \"name\": \"password\",\n \"visible\": true\n },\n {\n \"type\": \"number\",\n \"placeholder\": \"25\",\n \"label\": \"Age:\",\n \"id\": \"age\",\n \"name\": \"age\",\n \"visible\": true\n },\n {\n \"type\": \"textarea\",\n \"placeholder\": \"Enter your comments...\",\n \"label\": \"Comments:\",\n \"id\": \"comments\",\n \"name\": \"comments\",\n \"visible\": true\n }\n ]\n}"
}],
"isError": false
}
}
```
#### 2. Text Input Fill Test
```bash
echo '{"jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "username", "value": "john_doe"}}}}' | node dist/index.js
```
**Output**:
```json
{"result":{"content":[{"type":"text","text":"โ
Result: โ
Command executed: Successfully filled input \"Username:\" with: \"john_doe\""}],"isError":false},"jsonrpc":"2.0","id":2}
```
#### 3. Email Input Fill Test
```bash
echo '{"jsonrpc": "2.0", "id": 3, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "email", "value": "john.doe@example.com"}}}}' | node dist/index.js
```
**Output**:
```json
{"result":{"content":[{"type":"text","text":"โ
Result: โ
Command executed: Successfully filled input \"Email:\" with: \"john.doe@example.com\""}],"isError":false},"jsonrpc":"2.0","id":3}
```
#### 4. Selector-Based Fill Test
```bash
echo '{"jsonrpc": "2.0", "id": 4, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"selector": "#username", "value": "updated_username"}}}}' | node dist/index.js
```
**Output**:
```json
{"result":{"content":[{"type":"text","text":"โ
Result: โ
Command executed: Successfully filled input \"Username:\" with: \"updated_username\""}],"isError":false},"jsonrpc":"2.0","id":4}
```
### Scoring Algorithm Details
The scoring algorithm in `electron-input-commands.ts` successfully matches inputs by:
1. **Exact text matches** (100 points): label, placeholder, name, id
2. **Partial text matching** (50 points): contains search term
3. **Fuzzy matching** (25 points): similarity calculation
4. **Visibility bonus** (20 points): visible and enabled inputs
5. **Input type bonus** (10 points): text/password/email inputs
---
## Testing Commands Reference
### Complete Test Sequence
#### 1. Start Test Environment
```bash
# Start React test application
npm run test:react
# Or manually:
cd tests/integration/react-compatibility
electron test-react-electron.cjs
```
#### 2. Basic Connectivity Test
```bash
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "get_electron_window_info", "arguments": {}}}' | node dist/index.js
```
#### 3. Page Structure Analysis
```bash
echo '{"jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "get_page_structure", "args": {}}}}' | node dist/index.js
```
#### 4. Click Command Tests
```bash
# React button with preventDefault
echo '{"jsonrpc": "2.0", "id": 3, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "click_by_text", "args": {"text": "React Button"}}}}' | node dist/index.js
# Normal button
echo '{"jsonrpc": "2.0", "id": 4, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "click_by_text", "args": {"text": "Normal Button"}}}}' | node dist/index.js
# Submit button
echo '{"jsonrpc": "2.0", "id": 5, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "click_by_text", "args": {"text": "Submit Form"}}}}' | node dist/index.js
```
#### 5. Form Input Tests
```bash
# Username field
echo '{"jsonrpc": "2.0", "id": 6, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "username", "value": "testuser"}}}}' | node dist/index.js
# Email field
echo '{"jsonrpc": "2.0", "id": 7, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "email", "value": "test@example.com"}}}}' | node dist/index.js
# Password field
echo '{"jsonrpc": "2.0", "id": 8, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "password", "value": "secretpass"}}}}' | node dist/index.js
# Number field
echo '{"jsonrpc": "2.0", "id": 9, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "age", "value": "25"}}}}' | node dist/index.js
# Textarea
echo '{"jsonrpc": "2.0", "id": 10, "method": "tools/call", "params": {"name": "send_command_to_electron", "arguments": {"command": "fill_input", "args": {"text": "comments", "value": "Test comment"}}}}' | node dist/index.js
```
#### 6. Visual Verification
```bash
echo '{"jsonrpc": "2.0", "id": 11, "method": "tools/call", "params": {"name": "take_screenshot", "arguments": {}}}' | node dist/index.js
```
### Expected Results Summary
- โ
All click commands should succeed (preventDefault fix applied)
- โ
All form inputs should be detected and filled successfully
- โ
No "Click events were cancelled by the page" errors
- โ
No "No suitable input found" errors
- โ
Page structure should show all React-rendered elements