selfevolveagent / examples /tools /browser_test_page.html

Upload 2846 files

5374a2d verified 2 months ago

5.61 kB

	<!DOCTYPE html>
	<html>

	<head>
	<title>Browser Automation Test</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	}

	.form-group {
	margin: 15px 0;
	}

	label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	}

	input,
	textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	}

	button {
	padding: 10px 20px;
	margin: 5px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

	.btn-primary {
	background-color: #007bff;
	color: white;
	}

	.btn-secondary {
	background-color: #6c757d;
	color: white;
	}

	.btn-success {
	background-color: #28a745;
	color: white;
	}

	.result {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: none;
	}

	.success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	}

	.error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h1>Browser Automation Test Page</h1>
	<p>This page tests various browser automation features including input, clicking, and form submission.</p>

	<div class="form-group">
	<label for="name-input">Full Name:</label>
	<input type="text" id="name-input" name="name" placeholder="Enter your full name">
	</div>

	<div class="form-group">
	<label for="email-input">Email Address:</label>
	<input type="email" id="email-input" name="email" placeholder="Enter your email">
	</div>

	<div class="form-group">
	<label for="message-input">Message:</label>
	<textarea id="message-input" name="message" rows="4" placeholder="Enter your message"></textarea>
	</div>

	<div class="form-group">
	<button type="button" id="submit-btn" class="btn-primary">Submit Form</button>
	<button type="button" id="clear-btn" class="btn-secondary">Clear Form</button>
	<button type="button" id="test-btn" class="btn-success">Test Button</button>
	</div>

	<div id="result" class="result">
	<h3>Form Submission Result</h3>
	<p id="result-text"></p>
	</div>

	<div id="click-result" class="result">
	<h3>Click Test Result</h3>
	<p id="click-text"></p>
	</div>
	</div>

	<script>
	// Form submission handler
	document.getElementById('submit-btn').addEventListener('click', function (e) {
	e.preventDefault();
	const name = document.getElementById('name-input').value;
	const email = document.getElementById('email-input').value;
	const message = document.getElementById('message-input').value;

	if (name && email && message) {
	document.getElementById('result-text').textContent =
	'Name: ' + name + ', Email: ' + email + ', Message: ' + message;
	document.getElementById('result').className = 'result success';
	document.getElementById('result').style.display = 'block';
	} else {
	document.getElementById('result-text').textContent = 'Please fill in all fields';
	document.getElementById('result').className = 'result error';
	document.getElementById('result').style.display = 'block';
	}
	});

	// Clear form handler
	document.getElementById('clear-btn').addEventListener('click', function () {
	document.getElementById('name-input').value = '';
	document.getElementById('email-input').value = '';
	document.getElementById('message-input').value = '';
	document.getElementById('result').style.display = 'none';
	document.getElementById('click-result').style.display = 'none';
	});

	// Test button handler
	document.getElementById('test-btn').addEventListener('click', function () {
	const timestamp = new Date().toLocaleString();
	document.getElementById('click-text').textContent = 'Test button clicked at: ' + timestamp;
	document.getElementById('click-result').className = 'result success';
	document.getElementById('click-result').style.display = 'block';
	});

	// Enter key handler for form submission
	document.getElementById('name-input').addEventListener('keypress', function (e) {
	if (e.key === 'Enter') {
	document.getElementById('submit-btn').click();
	}
	});

	document.getElementById('email-input').addEventListener('keypress', function (e) {
	if (e.key === 'Enter') {
	document.getElementById('submit-btn').click();
	}
	});

	document.getElementById('message-input').addEventListener('keypress', function (e) {
	if (e.key === 'Enter' && e.ctrlKey) {
	document.getElementById('submit-btn').click();
	}
	});
	</script>
	</body>

	</html>