This commit is contained in:
Josh at WLTechBlog 2025-08-18 11:00:16 -05:00
parent e5f998e005
commit 4ea5615ef8
7 changed files with 422 additions and 27 deletions

View File

@ -130,9 +130,13 @@ cremote submit-form --selector="form#login-form"
### File Upload Testing ### File Upload Testing
```bash ```bash
# Upload files to file inputs # Upload files to file inputs (automatically transfers to daemon container first)
cremote upload-file --selector="input[type=file]" --file="/path/to/test-file.pdf" cremote upload-file --selector="input[type=file]" --file="/path/to/test-file.pdf"
cremote upload-file --selector="#profile-photo" --file="/tmp/test-image.jpg" cremote upload-file --selector="#profile-photo" --file="/home/user/test-image.jpg"
# The command automatically:
# 1. Transfers the file from local machine to daemon container
# 2. Uploads the file to the web form input element
``` ```
### Element Interaction ### Element Interaction

View File

@ -168,9 +168,15 @@ Any other value will uncheck the checkbox or deselect the radio button.
cremote upload-file --tab="<tab-id>" --selector="input[type=file]" --file="/path/to/file.jpg" [--selection-timeout=5] [--action-timeout=5] cremote upload-file --tab="<tab-id>" --selector="input[type=file]" --file="/path/to/file.jpg" [--selection-timeout=5] [--action-timeout=5]
``` ```
This command automatically:
1. **Transfers the file** from your local machine to the daemon container (if running in a container)
2. **Uploads the file** to the specified file input element on the web page
The `--selection-timeout` parameter specifies how many seconds to wait for the element to appear in the DOM (default: 5 seconds). The `--selection-timeout` parameter specifies how many seconds to wait for the element to appear in the DOM (default: 5 seconds).
The `--action-timeout` parameter specifies how many seconds to wait for the upload action to complete (default: 5 seconds). The `--action-timeout` parameter specifies how many seconds to wait for the upload action to complete (default: 5 seconds).
**Note**: The file path should be the local path on your machine. The command will handle transferring it to the daemon container automatically.
#### Submit a form #### Submit a form
```bash ```bash

View File

@ -3564,30 +3564,84 @@ func (d *Daemon) fillFormBulk(tabID, formSelector, fieldsJSON string, timeout in
if timeout > 0 { if timeout > 0 {
ctx, cancel := context.WithTimeout(context.Background(), time.Duration(timeout)*time.Second) ctx, cancel := context.WithTimeout(context.Background(), time.Duration(timeout)*time.Second)
element, err = form.Context(ctx).Element(selector) element, err = form.Context(ctx).Element(selector)
cancel() // Don't cancel yet if element found - we need context for filling
if err == nil {
fieldResult.Selector = selector
// Fill the field while context is still valid
err = element.SelectAllText()
if err == nil {
err = element.Input("")
}
if err == nil {
err = element.Input(fieldValue)
}
cancel() // Now we can cancel
break
}
cancel() // Cancel if element not found
} else { } else {
element, err = form.Element(selector) element, err = form.Element(selector)
} if err == nil {
if err == nil { fieldResult.Selector = selector
fieldResult.Selector = selector // Fill the field
break err = element.SelectAllText()
if err == nil {
err = element.Input("")
}
if err == nil {
err = element.Input(fieldValue)
}
break
}
} }
} }
} }
// If not found in form or no form, search in entire page // If not found in form or no form, search in entire page
if element == nil { if element == nil {
// Generate selectors if not already done
if selectors == nil {
selectors = []string{
fmt.Sprintf("[name='%s']", fieldName),
fmt.Sprintf("#%s", fieldName),
fmt.Sprintf("[id='%s']", fieldName),
fieldName, // In case it's already a full selector
}
}
for _, selector := range selectors { for _, selector := range selectors {
if timeout > 0 { if timeout > 0 {
ctx, cancel := context.WithTimeout(context.Background(), time.Duration(timeout)*time.Second) ctx, cancel := context.WithTimeout(context.Background(), time.Duration(timeout)*time.Second)
element, err = page.Context(ctx).Element(selector) element, err = page.Context(ctx).Element(selector)
cancel() // Don't cancel yet - we need the context for filling
if err == nil {
fieldResult.Selector = selector
// Fill the field while context is still valid
err = element.SelectAllText()
if err == nil {
err = element.Input("")
}
if err == nil {
err = element.Input(fieldValue)
}
cancel() // Now we can cancel
break
}
cancel() // Cancel if element not found
} else { } else {
element, err = page.Element(selector) element, err = page.Element(selector)
} if err == nil {
if err == nil { fieldResult.Selector = selector
fieldResult.Selector = selector // Fill the field
break err = element.SelectAllText()
if err == nil {
err = element.Input("")
}
if err == nil {
err = element.Input(fieldValue)
}
break
}
} }
} }
} }
@ -3599,15 +3653,6 @@ func (d *Daemon) fillFormBulk(tabID, formSelector, fieldsJSON string, timeout in
continue continue
} }
// Fill the field
err = element.SelectAllText()
if err == nil {
err = element.Input("")
}
if err == nil {
err = element.Input(fieldValue)
}
if err != nil { if err != nil {
fieldResult.Error = fmt.Sprintf("failed to fill field: %v", err) fieldResult.Error = fmt.Sprintf("failed to fill field: %v", err)
result.ErrorCount++ result.ErrorCount++

323
formtest.php Normal file
View File

@ -0,0 +1,323 @@
<?php
// formtest.php - Comprehensive form testing for cremote MCP tools
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cremote Form Testing - Multiple Field Types</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 8px;
}
.checkbox-group,
.radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.inline-group {
display: flex;
gap: 15px;
align-items: center;
}
button {
background-color: #007cba;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #005a87;
}
.reset-btn {
background-color: #666;
}
.reset-btn:hover {
background-color: #444;
}
.results {
background-color: #e8f5e8;
border: 2px solid #4caf50;
padding: 20px;
border-radius: 4px;
margin-top: 20px;
}
.results h2 {
color: #2e7d32;
margin-top: 0;
}
.field-result {
margin-bottom: 10px;
padding: 8px;
background-color: white;
border-radius: 4px;
}
.field-name {
font-weight: bold;
color: #1976d2;
}
.field-value {
color: #333;
margin-left: 10px;
}
.empty-value {
color: #999;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>🧪 Cremote Form Testing Suite</h1>
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST'): ?>
<div class="results">
<h2>📋 Form Submission Results</h2>
<p><strong>Submission Time:</strong> <?php echo date('Y-m-d H:i:s'); ?></p>
<p><strong>Total Fields Submitted:</strong> <?php echo count($_POST); ?></p>
<?php foreach ($_POST as $field => $value): ?>
<div class="field-result">
<span class="field-name"><?php echo htmlspecialchars($field); ?>:</span>
<span class="field-value <?php echo empty($value) ? 'empty-value' : ''; ?>">
<?php
if (is_array($value)) {
echo htmlspecialchars(implode(', ', $value));
} else {
echo empty($value) ? '(empty)' : htmlspecialchars($value);
}
?>
</span>
</div>
<?php endforeach; ?>
<hr style="margin: 20px 0;">
<h3>🔍 Raw POST Data (for debugging):</h3>
<pre style="background: #f0f0f0; padding: 10px; border-radius: 4px; overflow-x: auto;"><?php print_r($_POST); ?></pre>
</div>
<hr style="margin: 30px 0;">
<?php endif; ?>
<form id="test-form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h2>📝 Personal Information</h2>
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter your first name">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" placeholder="Enter your last name">
</div>
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="your.email@example.com">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="+1-555-123-4567">
</div>
<div class="form-group">
<label for="birthDate">Birth Date:</label>
<input type="date" id="birthDate" name="birthDate">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120" placeholder="25">
</div>
<h2>🏠 Address Information</h2>
<div class="form-group">
<label for="address">Street Address:</label>
<input type="text" id="address" name="address" placeholder="123 Main Street">
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" name="city" placeholder="New York">
</div>
<div class="form-group">
<label for="state">State/Province:</label>
<select id="state" name="state">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="CA">California</option>
<option value="FL">Florida</option>
<option value="NY">New York</option>
<option value="TX">Texas</option>
<option value="WA">Washington</option>
<option value="OTHER">Other</option>
</select>
</div>
<div class="form-group">
<label for="zipCode">ZIP/Postal Code:</label>
<input type="text" id="zipCode" name="zipCode" placeholder="12345">
</div>
<h2>🎯 Preferences</h2>
<div class="form-group">
<label>Preferred Contact Method:</label>
<div class="radio-group">
<div class="inline-group">
<input type="radio" id="contactEmail" name="contactMethod" value="email">
<label for="contactEmail">Email</label>
</div>
<div class="inline-group">
<input type="radio" id="contactPhone" name="contactMethod" value="phone">
<label for="contactPhone">Phone</label>
</div>
<div class="inline-group">
<input type="radio" id="contactMail" name="contactMethod" value="mail">
<label for="contactMail">Mail</label>
</div>
</div>
</div>
<div class="form-group">
<label>Interests (check all that apply):</label>
<div class="checkbox-group">
<div class="inline-group">
<input type="checkbox" id="interestTech" name="interests[]" value="technology">
<label for="interestTech">Technology</label>
</div>
<div class="inline-group">
<input type="checkbox" id="interestSports" name="interests[]" value="sports">
<label for="interestSports">Sports</label>
</div>
<div class="inline-group">
<input type="checkbox" id="interestMusic" name="interests[]" value="music">
<label for="interestMusic">Music</label>
</div>
<div class="inline-group">
<input type="checkbox" id="interestTravel" name="interests[]" value="travel">
<label for="interestTravel">Travel</label>
</div>
</div>
</div>
<div class="form-group">
<label for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
Subscribe to newsletter
</label>
</div>
<h2>💬 Additional Information</h2>
<div class="form-group">
<label for="comments">Comments or Questions:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Enter any additional comments or questions..."></textarea>
</div>
<div class="form-group">
<label for="password">Password (for testing):</label>
<input type="password" id="password" name="password" placeholder="Enter a test password">
</div>
<div class="form-group" style="margin-top: 30px;">
<button type="submit" id="submitBtn">🚀 Submit Form</button>
<button type="reset" class="reset-btn">🔄 Reset Form</button>
</div>
</form>
<div style="margin-top: 40px; padding: 20px; background-color: #f0f8ff; border-radius: 4px;">
<h3>🧪 Testing Instructions for Cremote MCP Tools</h3>
<p><strong>Form ID:</strong> <code>#test-form</code></p>
<p><strong>Submit Button:</strong> <code>#submitBtn</code></p>
<h4>Example MCP Tool Usage:</h4>
<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; font-size: 14px;">
// Test bulk form filling
web_form_fill_bulk_cremotemcp:
form_selector: "#test-form"
fields:
firstName: "John"
lastName: "Doe"
email: "john.doe@example.com"
phone: "+1-555-123-4567"
address: "123 Test Street"
city: "Test City"
state: "CA"
zipCode: "12345"
contactMethod: "email"
interests: ["technology", "travel"]
newsletter: "yes"
comments: "This is a test submission"
</pre>
</div>
</div>
<script>
// Add some JavaScript for enhanced testing
document.getElementById('test-form').addEventListener('submit', function(e) {
console.log('Form submission detected');
console.log('Form data:', new FormData(this));
});
// Log when fields are filled (useful for debugging MCP tools)
document.querySelectorAll('input, select, textarea').forEach(function(element) {
element.addEventListener('change', function() {
console.log('Field changed:', this.name, '=', this.value);
});
});
</script>
</body>
</html>

27
main.go
View File

@ -216,14 +216,29 @@ func main() {
// Create a client // Create a client
c := client.NewClient(*uploadFileHost, *uploadFilePort) c := client.NewClient(*uploadFileHost, *uploadFilePort)
// Upload the file // Check if the local file exists
err := c.UploadFile(*uploadFileTabID, *uploadFileSelector, *uploadFilePath, *uploadFileSelectionTimeout, *uploadFileActionTimeout) if _, err := os.Stat(*uploadFilePath); os.IsNotExist(err) {
if err != nil { fmt.Fprintf(os.Stderr, "Error: Local file does not exist: %s\n", *uploadFilePath)
fmt.Fprintf(os.Stderr, "Error: %v\n", err)
os.Exit(1) os.Exit(1)
} }
fmt.Println("File uploaded successfully") // First, transfer the file to the daemon container
fmt.Printf("Transferring file to daemon container: %s\n", *uploadFilePath)
containerPath, err := c.UploadFileToContainer(*uploadFilePath, "")
if err != nil {
fmt.Fprintf(os.Stderr, "Error transferring file to container: %v\n", err)
os.Exit(1)
}
fmt.Printf("File transferred to container: %s\n", containerPath)
// Then upload the file to the web form using the container path
err = c.UploadFile(*uploadFileTabID, *uploadFileSelector, containerPath, *uploadFileSelectionTimeout, *uploadFileActionTimeout)
if err != nil {
fmt.Fprintf(os.Stderr, "Error uploading file to web form: %v\n", err)
os.Exit(1)
}
fmt.Println("File uploaded to web form successfully")
case "submit-form": case "submit-form":
submitFormCmd.Parse(os.Args[2:]) submitFormCmd.Parse(os.Args[2:])
@ -475,7 +490,7 @@ func printUsage() {
fmt.Println(" open-tab Open a new tab and return its ID") fmt.Println(" open-tab Open a new tab and return its ID")
fmt.Println(" load-url Load a URL in a tab") fmt.Println(" load-url Load a URL in a tab")
fmt.Println(" fill-form Fill a form field with a value") fmt.Println(" fill-form Fill a form field with a value")
fmt.Println(" upload-file Upload a file to a file input") fmt.Println(" upload-file Transfer a file to daemon container and upload to a file input")
fmt.Println(" submit-form Submit a form") fmt.Println(" submit-form Submit a form")
fmt.Println(" get-source Get the source code of a page") fmt.Println(" get-source Get the source code of a page")
fmt.Println(" get-element Get the HTML of an element") fmt.Println(" get-element Get the HTML of an element")

View File

@ -130,6 +130,8 @@ Upload files from client to container for use in form uploads.
} }
``` ```
**Note**: The CLI `cremote upload-file` command now automatically transfers files to the daemon container first, making file uploads seamless even when the daemon runs in a container.
#### 8. `file_download_cremotemcp` #### 8. `file_download_cremotemcp`
Download files from container to client (e.g., downloaded files from browser). Download files from container to client (e.g., downloaded files from browser).

Binary file not shown.