pythonselenium-webdriverselenium-chromedriver

How to interact with Transcend consent manager shadow DOM using Selenium?


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:

  1. Check the "Do not sell/share my information" checkbox
  2. Click the "Confirm" button

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

Here is the image


Solution

  • 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