I'm trying to automate interaction with a GoFundMe page's privacy consent dialog managed by Transcend. URL: https://www.gofundme.com/f/10yr-old-pitt-baby-who-needs-emergency-surgery
Specifically, I need to:
The elements are within a shadow DOM attached to a div with id="transcend-consent-manager".
Here's my current code:
try:
# Wait for the consent manager to be present
manager = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "transcend-consent-manager"))
)
print("Found consent manager")
# Wait and try to interact using JavaScript
js_code = """
function waitForShadowRoot(callback, maxAttempts = 10) {
let attempts = 0;
const check = () => {
attempts++;
const manager = document.getElementById('transcend-consent-manager');
const root = manager ? manager.shadowRoot : null;
if (root) {
callback(root);
return;
}
if (attempts < maxAttempts) {
setTimeout(check, 1000);
}
};
check();
}
return new Promise((resolve) => {
waitForShadowRoot((root) => {
console.log('Found shadow root');
const checkbox = root.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.click();
console.log('Clicked checkbox');
setTimeout(() => {
const button = root.querySelector('button');
if (button) {
button.click();
console.log('Clicked button');
resolve(true);
} else {
resolve(false);
}
}, 1000);
} else {
resolve(false);
}
});
});
"""
print("Executing JavaScript to interact with shadow DOM...")
result = driver.execute_async_script(js_code)
if result:
print("Successfully clicked elements")
return True
else:
print("Failed to find or click elements")
# Print debug info
debug_js = """
const manager = document.getElementById('transcend-consent-manager');
return {
manager: !!manager,
shadowRoot: manager ? !!manager.shadowRoot : false,
innerHTML: manager && manager.shadowRoot ? manager.shadowRoot.innerHTML : 'No content'
}
"""
debug_info = driver.execute_script(debug_js)
print("Debug info:", debug_info)
return False
except Exception as e:
print(f"Error: {str(e)}")
return False
Url: https://www.gofundme.com/f/10yr-old-pitt-baby-who-needs-emergency-surgery
Set data-ui-shadow-root="open"
on your airgap.js or UI script tag.
Source: https://docs.transcend.io/docs/articles/consent-management/reference/load-options#ui-shadow-root