mirror of
https://github.com/browser-use/browser-use
synced 2026-04-22 17:45:09 +02:00
c3db6cff02
- Updated the DOMTreeSerializer to remove debug code related to cross-origin iframe detection, enhancing clarity and maintainability. - Adjusted test cases to replace the cross-origin iframe source with a placeholder (about:blank) for improved test isolation and reliability. - Updated comments and descriptions in tests to reflect the changes in iframe handling, ensuring accurate documentation of test behavior. This change aims to streamline the handling of cross-origin iframes in both the serializer and tests, improving overall robustness and maintainability.
119 lines
3.4 KiB
HTML
119 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>DOM Serializer Test - Main Page</title>
|
|
<style>
|
|
body { font-family: Arial; padding: 20px; }
|
|
.section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
|
|
#click-counter {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 30px 50px;
|
|
border-radius: 15px;
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
transition: all 0.2s ease;
|
|
z-index: 9999;
|
|
}
|
|
#counter-value {
|
|
font-size: 64px;
|
|
display: inline-block;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
}
|
|
@keyframes flash {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.3); background: #FFC107; }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.flash {
|
|
animation: flash 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="click-counter">Clicks: <span id="counter-value">0</span></div>
|
|
<h1>DOM Serializer Test Page</h1>
|
|
|
|
<!-- Regular DOM elements (3 interactive elements) -->
|
|
<div class="section">
|
|
<h2>Regular DOM Elements</h2>
|
|
<button id="regular-btn-1">Regular Button 1</button>
|
|
<input type="text" id="regular-input" placeholder="Regular input" />
|
|
<a href="#test" id="regular-link">Regular Link</a>
|
|
</div>
|
|
|
|
<!-- Shadow DOM elements (3 interactive elements inside shadow) -->
|
|
<div class="section">
|
|
<h2>Shadow DOM Elements</h2>
|
|
<div id="shadow-host"></div>
|
|
</div>
|
|
|
|
<!-- Same-origin iframe (2 interactive elements inside) -->
|
|
<div class="section">
|
|
<h2>Same-Origin Iframe</h2>
|
|
<iframe id="same-origin-iframe" src="/iframe-same-origin" style="width:100%; height:200px; border:1px solid #999;"></iframe>
|
|
</div>
|
|
|
|
<!-- Cross-origin iframe placeholder (external domain removed for test isolation) -->
|
|
<div class="section">
|
|
<h2>Cross-Origin Iframe (Placeholder)</h2>
|
|
<iframe id="cross-origin-iframe" src="about:blank" style="width:100%; height:200px; border:1px solid #999;"></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
// Global click counter
|
|
let clickCount = 0;
|
|
|
|
function incrementCounter(source) {
|
|
clickCount++;
|
|
const counter = document.getElementById('click-counter');
|
|
const counterValue = document.getElementById('counter-value');
|
|
|
|
counterValue.textContent = clickCount;
|
|
console.log(`Click #${clickCount} from: ${source}`);
|
|
|
|
// Add flash animation
|
|
counter.classList.remove('flash');
|
|
void counter.offsetWidth; // Trigger reflow
|
|
counter.classList.add('flash');
|
|
}
|
|
|
|
// Expose counter for testing
|
|
window.getClickCount = function() {
|
|
return clickCount;
|
|
};
|
|
|
|
// Add click handler to regular button using addEventListener
|
|
document.getElementById('regular-btn-1').addEventListener('click', function() {
|
|
incrementCounter('Regular DOM');
|
|
});
|
|
|
|
// Create shadow DOM with interactive elements
|
|
const shadowHost = document.getElementById('shadow-host');
|
|
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
|
|
shadowRoot.innerHTML = `
|
|
<style>
|
|
.shadow-content { padding: 10px; background: #f0f0f0; }
|
|
</style>
|
|
<div class="shadow-content">
|
|
<p>Content inside Shadow DOM:</p>
|
|
<button id="shadow-btn-1">Shadow Button 1</button>
|
|
<input type="text" id="shadow-input" placeholder="Shadow input" />
|
|
<button id="shadow-btn-2">Shadow Button 2</button>
|
|
</div>
|
|
`;
|
|
|
|
// Add click handler to shadow DOM button using addEventListener
|
|
shadowRoot.getElementById('shadow-btn-1').addEventListener('click', function() {
|
|
incrementCounter('Shadow DOM');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|