How do I handle pop-ups and alerts with Headless Chromium?

Headless Chromium requires programmatic handling of JavaScript alerts, prompts, and confirm dialogs since there's no user interface. This guide covers how to handle these dialog types using popular automation tools.

Types of JavaScript Dialogs

JavaScript creates three main types of dialogs: - Alert: Simple notification with OK button - Confirm: Yes/No dialog returning true/false
- Prompt: Input dialog for user text entry

Puppeteer (JavaScript/Node.js)

Puppeteer handles dialogs through the dialog event listener. Set up the handler before triggering the dialog:

Basic Alert Handling

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();

    // Set up dialog handler BEFORE navigating
    page.on('dialog', async dialog => {
        console.log(`Dialog type: ${dialog.type()}`);
        console.log(`Message: ${dialog.message()}`);

        await dialog.accept(); // Accept the dialog
    });

    await page.goto('https://example.com');

    // Trigger alert
    await page.click('#alert-button');

    await browser.close();
})();

Handling Different Dialog Types

page.on('dialog', async dialog => {
    const type = dialog.type();
    const message = dialog.message();

    switch (type) {
        case 'alert':
            console.log(`Alert: ${message}`);
            await dialog.accept();
            break;

        case 'confirm':
            console.log(`Confirm: ${message}`);
            // Accept or dismiss based on your logic
            if (message.includes('delete')) {
                await dialog.dismiss(); // Click Cancel
            } else {
                await dialog.accept(); // Click OK
            }
            break;

        case 'prompt':
            console.log(`Prompt: ${message}`);
            // Provide input text
            await dialog.accept('My input text');
            break;

        default:
            await dialog.accept();
    }
});

Auto-Dismiss All Dialogs

// Automatically dismiss all dialogs
page.on('dialog', async dialog => {
    await dialog.dismiss();
});

Selenium WebDriver (Python)

Selenium handles alerts through the Alert class. Use WebDriverWait for reliable alert detection:

Basic Alert Handling

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.alert import Alert
from selenium.common.exceptions import TimeoutException

# Configure headless Chrome
chrome_options = Options()
chrome_options.add_argument("--headless")
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("--disable-dev-shm-usage")

driver = webdriver.Chrome(options=chrome_options)

try:
    driver.get('https://example.com')

    # Trigger alert
    driver.find_element('id', 'alert-button').click()

    # Wait for alert to appear
    wait = WebDriverWait(driver, 10)
    wait.until(EC.alert_is_present())

    # Handle the alert
    alert = Alert(driver)
    print(f"Alert text: {alert.text}")
    alert.accept()  # Click OK

except TimeoutException:
    print("No alert appeared within timeout")
finally:
    driver.quit()

Comprehensive Alert Handling

def handle_alert(driver, timeout=10):
    """Handle any type of JavaScript dialog"""
    try:
        wait = WebDriverWait(driver, timeout)
        wait.until(EC.alert_is_present())

        alert = Alert(driver)
        alert_text = alert.text
        print(f"Alert detected: {alert_text}")

        # Decision logic based on alert text
        if 'confirm' in alert_text.lower():
            # For confirm dialogs
            if 'delete' in alert_text.lower():
                alert.dismiss()  # Click Cancel
                return False
            else:
                alert.accept()   # Click OK
                return True
        elif 'prompt' in alert_text.lower():
            # For prompt dialogs
            alert.send_keys('My response')
            alert.accept()
            return True
        else:
            # For simple alerts
            alert.accept()
            return True

    except TimeoutException:
        print("No alert present")
        return None
    except Exception as e:
        print(f"Error handling alert: {e}")
        return None

# Usage
driver.get('https://example.com')
driver.find_element('id', 'dialog-button').click()
result = handle_alert(driver)

Playwright (JavaScript/Python)

Playwright provides built-in dialog handling with the page.on('dialog') event:

JavaScript Example

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ headless: true });
    const page = await browser.newPage();

    // Handle dialogs
    page.on('dialog', async dialog => {
        console.log(`${dialog.type()}: ${dialog.message()}`);

        if (dialog.type() === 'prompt') {
            await dialog.accept('My input');
        } else {
            await dialog.accept();
        }
    });

    await page.goto('https://example.com');
    await page.click('#dialog-button');

    await browser.close();
})();

Python Example

from playwright.sync_api import sync_playwright

def handle_dialog(dialog):
    print(f"Dialog type: {dialog.type}")
    print(f"Message: {dialog.message}")

    if dialog.type == 'prompt':
        dialog.accept('My input text')
    else:
        dialog.accept()

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    page.on('dialog', handle_dialog)

    page.goto('https://example.com')
    page.click('#dialog-button')

    browser.close()

Best Practices

1. Set up handlers early: Always configure dialog handlers before navigating to pages or triggering actions
2. Use timeouts: Implement reasonable timeouts to avoid hanging on unexpected dialogs
3. Log dialog content: Always log dialog messages for debugging
4. Handle exceptions: Wrap alert handling in try-catch blocks
5. Test different scenarios: Test with various dialog types and messages
6. Consider auto-dismiss: For automated scraping, consider automatically dismissing all dialogs

Common Issues and Solutions

Dialog Not Detected

# Use explicit waits instead of implicit waits
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 10)
wait.until(EC.alert_is_present())

Multiple Dialogs

// Handle multiple consecutive dialogs
let dialogCount = 0;
page.on('dialog', async dialog => {
    console.log(`Dialog ${++dialogCount}: ${dialog.message()}`);
    await dialog.accept();
});

Conditional Dialog Handling

def smart_alert_handler(driver):
    """Handle alerts based on context"""
    try:
        alert = Alert(driver)
        message = alert.text.lower()

        # Context-aware handling
        if 'error' in message or 'warning' in message:
            alert.accept()  # Acknowledge errors
        elif 'confirm' in message:
            alert.dismiss()  # Be cautious with confirms
        else:
            alert.accept()  # Default action

    except Exception:
        pass  # No alert present

This comprehensive approach ensures reliable dialog handling across different automation tools and scenarios.