11.处理模态对话框弹窗

作者

11. 处理模态对话框弹窗

概述

在Web自动化测试中，经常会遇到各种类型的弹窗对话框。这些弹窗需要特殊的处理方式，因为它们通常会阻止用户与页面的其他部分进行交互。本章将详细介绍如何使用Java+Selenium处理不同类型的模态对话框。

弹窗类型

1. JavaScript原生弹窗

  • Alert弹窗：只有确定按钮的提示框
  • Confirm弹窗：有确定和取消按钮的确认框
  • Prompt弹窗：可以输入文本的输入框

2. HTML模态对话框

  • Bootstrap Modal：基于Bootstrap框架的模态框
  • 自定义Modal：开发者自定义的模态对话框
  • iframe弹窗：嵌入在iframe中的对话框

JavaScript原生弹窗处理

Alert弹窗处理

import org.openqa.selenium.Alert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class AlertHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            // 访问包含Alert的页面
            driver.get("https://example.com/alert-page");

            // 触发Alert弹窗的操作
            driver.findElement(By.id("alert-button")).click();

            // 等待Alert出现
            Alert alert = wait.until(ExpectedConditions.alertIsPresent());

            // 获取Alert文本
            String alertText = alert.getText();
            System.out.println("Alert文本: " + alertText);

            // 接受Alert（点击确定）
            alert.accept();

            System.out.println("Alert已处理");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

Confirm弹窗处理

import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class ConfirmHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/confirm-page");

            // 触发Confirm弹窗
            driver.findElement(By.id("confirm-button")).click();

            // 等待Confirm出现
            Alert confirm = wait.until(ExpectedConditions.alertIsPresent());

            // 获取Confirm文本
            String confirmText = confirm.getText();
            System.out.println("Confirm文本: " + confirmText);

            // 选择操作：
            // 1. 接受Confirm（点击确定）
            confirm.accept();

            // 或者
            // 2. 拒绝Confirm（点击取消）
            // confirm.dismiss();

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

Prompt弹窗处理

import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class PromptHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/prompt-page");

            // 触发Prompt弹窗
            driver.findElement(By.id("prompt-button")).click();

            // 等待Prompt出现
            Alert prompt = wait.until(ExpectedConditions.alertIsPresent());

            // 获取Prompt文本
            String promptText = prompt.getText();
            System.out.println("Prompt文本: " + promptText);

            // 在输入框中输入文本
            String inputText = "这是我的输入";
            prompt.sendKeys(inputText);

            // 接受Prompt（点击确定）
            prompt.accept();

            // 或者拒绝Prompt（点击取消）
            // prompt.dismiss();

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

HTML模态对话框处理

Bootstrap Modal处理

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class BootstrapModalHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/bootstrap-modal-page");

            // 触发Modal弹窗
            driver.findElement(By.id("modal-trigger")).click();

            // 等待Modal出现并可见
            WebElement modal = wait.until(
                ExpectedConditions.visibilityOfElementLocated(
                    By.id("myModal")
                )
            );

            // 验证Modal是否显示
            if (modal.isDisplayed()) {
                System.out.println("Modal已显示");

                // 在Modal中进行操作
                WebElement modalTitle = modal.findElement(By.className("modal-title"));
                System.out.println("Modal标题: " + modalTitle.getText());

                // 填写Modal中的表单
                WebElement nameInput = modal.findElement(By.id("name"));
                nameInput.sendKeys("张三");

                WebElement emailInput = modal.findElement(By.id("email"));
                emailInput.sendKeys("zhangsan@example.com");

                // 点击Modal中的确定按钮
                WebElement confirmButton = modal.findElement(By.className("btn-primary"));
                confirmButton.click();

                // 等待Modal消失
                wait.until(ExpectedConditions.invisibilityOf(modal));
                System.out.println("Modal已关闭");
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

自定义Modal处理

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class CustomModalHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/custom-modal-page");

            // 触发自定义Modal
            driver.findElement(By.id("open-modal")).click();

            // 等待Modal容器出现
            WebElement modalContainer = wait.until(
                ExpectedConditions.presenceOfElementLocated(
                    By.className("custom-modal")
                )
            );

            // 等待Modal完全加载（可能有动画效果）
            wait.until(ExpectedConditions.attributeContains(
                modalContainer, "class", "show"
            ));

            // 处理Modal内容
            WebElement modalContent = modalContainer.findElement(
                By.className("modal-content")
            );

            // 执行Modal内的操作
            WebElement messageElement = modalContent.findElement(By.id("message"));
            System.out.println("Modal消息: " + messageElement.getText());

            // 关闭Modal的几种方式：

            // 方式1: 点击关闭按钮
            WebElement closeButton = modalContent.findElement(By.className("close-btn"));
            closeButton.click();

            // 方式2: 点击Modal外部区域（如果支持）
            // driver.findElement(By.className("modal-overlay")).click();

            // 方式3: 按ESC键（如果支持）
            // modalContainer.sendKeys(Keys.ESCAPE);

            // 等待Modal消失
            wait.until(ExpectedConditions.invisibilityOf(modalContainer));

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

iframe弹窗处理

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class IframeModalHandling {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/iframe-modal-page");

            // 触发iframe弹窗
            driver.findElement(By.id("open-iframe-modal")).click();

            // 等待iframe出现
            WebElement iframe = wait.until(
                ExpectedConditions.presenceOfElementLocated(
                    By.id("modal-iframe")
                )
            );

            // 切换到iframe
            driver.switchTo().frame(iframe);

            // 在iframe中进行操作
            WebElement iframeTitle = wait.until(
                ExpectedConditions.presenceOfElementLocated(
                    By.tagName("h1")
                )
            );
            System.out.println("iframe标题: " + iframeTitle.getText());

            // 填写iframe中的表单
            WebElement usernameInput = driver.findElement(By.id("username"));
            usernameInput.sendKeys("testuser");

            WebElement passwordInput = driver.findElement(By.id("password"));
            passwordInput.sendKeys("password123");

            // 提交表单
            WebElement submitButton = driver.findElement(By.id("submit"));
            submitButton.click();

            // 切换回主页面
            driver.switchTo().defaultContent();

            // 等待iframe消失或处理结果
            wait.until(ExpectedConditions.invisibilityOf(iframe));

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

综合弹窗处理工具类

import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class ModalHandler {
    private WebDriver driver;
    private WebDriverWait wait;

    public ModalHandler(WebDriver driver) {
        this.driver = driver;
        this.wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    /**
     * 处理JavaScript Alert弹窗
     * @param accept true表示接受，false表示拒绝
     * @return Alert的文本内容
     */
    public String handleAlert(boolean accept) {
        try {
            Alert alert = wait.until(ExpectedConditions.alertIsPresent());
            String alertText = alert.getText();

            if (accept) {
                alert.accept();
            } else {
                alert.dismiss();
            }

            return alertText;
        } catch (Exception e) {
            System.err.println("处理Alert时出错: " + e.getMessage());
            return null;
        }
    }

    /**
     * 处理JavaScript Prompt弹窗
     * @param inputText 要输入的文本
     * @param accept true表示接受，false表示拒绝
     * @return Prompt的文本内容
     */
    public String handlePrompt(String inputText, boolean accept) {
        try {
            Alert prompt = wait.until(ExpectedConditions.alertIsPresent());
            String promptText = prompt.getText();

            if (inputText != null && !inputText.isEmpty()) {
                prompt.sendKeys(inputText);
            }

            if (accept) {
                prompt.accept();
            } else {
                prompt.dismiss();
            }

            return promptText;
        } catch (Exception e) {
            System.err.println("处理Prompt时出错: " + e.getMessage());
            return null;
        }
    }

    /**
     * 等待并处理HTML Modal
     * @param modalLocator Modal的定位器
     * @return Modal元素
     */
    public WebElement waitForModal(By modalLocator) {
        try {
            return wait.until(ExpectedConditions.visibilityOfElementLocated(modalLocator));
        } catch (Exception e) {
            System.err.println("等待Modal出现时出错: " + e.getMessage());
            return null;
        }
    }

    /**
     * 关闭HTML Modal
     * @param closeButtonLocator 关闭按钮的定位器
     */
    public void closeModal(By closeButtonLocator) {
        try {
            WebElement closeButton = driver.findElement(closeButtonLocator);
            closeButton.click();
        } catch (Exception e) {
            System.err.println("关闭Modal时出错: " + e.getMessage());
        }
    }

    /**
     * 等待Modal消失
     * @param modalLocator Modal的定位器
     */
    public void waitForModalToDisappear(By modalLocator) {
        try {
            wait.until(ExpectedConditions.invisibilityOfElementLocated(modalLocator));
        } catch (Exception e) {
            System.err.println("等待Modal消失时出错: " + e.getMessage());
        }
    }

    /**
     * 切换到iframe并处理
     * @param iframeLocator iframe的定位器
     */
    public void switchToIframe(By iframeLocator) {
        try {
            WebElement iframe = wait.until(
                ExpectedConditions.presenceOfElementLocated(iframeLocator)
            );
            driver.switchTo().frame(iframe);
        } catch (Exception e) {
            System.err.println("切换到iframe时出错: " + e.getMessage());
        }
    }

    /**
     * 切换回主页面
     */
    public void switchToMainContent() {
        try {
            driver.switchTo().defaultContent();
        } catch (Exception e) {
            System.err.println("切换回主页面时出错: " + e.getMessage());
        }
    }
}

使用工具类的示例

public class ModalHandlerExample {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        ModalHandler modalHandler = new ModalHandler(driver);

        try {
            driver.get("https://example.com/modal-test-page");

            // 处理Alert
            driver.findElement(By.id("alert-btn")).click();
            String alertText = modalHandler.handleAlert(true);
            System.out.println("Alert内容: " + alertText);

            // 处理Prompt
            driver.findElement(By.id("prompt-btn")).click();
            String promptText = modalHandler.handlePrompt("我的输入", true);
            System.out.println("Prompt内容: " + promptText);

            // 处理HTML Modal
            driver.findElement(By.id("modal-btn")).click();
            WebElement modal = modalHandler.waitForModal(By.id("myModal"));

            if (modal != null) {
                // 在Modal中进行操作
                modal.findElement(By.id("name")).sendKeys("测试用户");

                // 关闭Modal
                modalHandler.closeModal(By.className("btn-close"));
                modalHandler.waitForModalToDisappear(By.id("myModal"));
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

常见问题和解决方案

1. Alert未出现的问题

// 问题：Alert可能需要时间加载
// 解决方案：使用显式等待
try {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    Alert alert = wait.until(ExpectedConditions.alertIsPresent());
    alert.accept();
} catch (TimeoutException e) {
    System.out.println("Alert未在指定时间内出现");
}

2. Modal未完全加载的问题

// 问题：Modal可能有CSS动画，需要等待完全显示
// 解决方案：等待特定属性或状态
WebElement modal = wait.until(
    ExpectedConditions.visibilityOfElementLocated(By.id("modal"))
);

// 等待动画完成
wait.until(ExpectedConditions.attributeContains(
    modal, "class", "fade-in-complete"
));

3. iframe切换问题

// 问题：忘记切换回主页面
// 解决方案：使用try-finally确保切换回来
try {
    driver.switchTo().frame("iframe-id");
    // 在iframe中的操作
} finally {
    driver.switchTo().defaultContent();
}

4. 多层Modal处理

public void handleNestedModals() {
    // 第一层Modal
    driver.findElement(By.id("open-first-modal")).click();
    WebElement firstModal = wait.until(
        ExpectedConditions.visibilityOfElementLocated(By.id("first-modal"))
    );

    // 在第一层Modal中打开第二层Modal
    firstModal.findElement(By.id("open-second-modal")).click();
    WebElement secondModal = wait.until(
        ExpectedConditions.visibilityOfElementLocated(By.id("second-modal"))
    );

    // 处理第二层Modal
    secondModal.findElement(By.id("confirm")).click();
    wait.until(ExpectedConditions.invisibilityOf(secondModal));

    // 关闭第一层Modal
    firstModal.findElement(By.id("close")).click();
    wait.until(ExpectedConditions.invisibilityOf(firstModal));
}

最佳实践

1. 异常处理

public void safeAlertHandling() {
    try {
        Alert alert = wait.until(ExpectedConditions.alertIsPresent());
        String text = alert.getText();
        alert.accept();
        System.out.println("成功处理Alert: " + text);
    } catch (TimeoutException e) {
        System.out.println("Alert未在预期时间内出现");
    } catch (NoAlertPresentException e) {
        System.out.println("没有Alert存在");
    } catch (Exception e) {
        System.out.println("处理Alert时发生未知错误: " + e.getMessage());
    }
}

2. 可重用的等待条件

public class CustomExpectedConditions {
    public static ExpectedCondition<Boolean> modalIsFullyLoaded(By modalLocator) {
        return driver -> {
            try {
                WebElement modal = driver.findElement(modalLocator);
                return modal.isDisplayed() && 
                       modal.getAttribute("class").contains("loaded");
            } catch (Exception e) {
                return false;
            }
        };
    }
}

3. 配置化的等待时间

public class ModalConfig {
    public static final int DEFAULT_WAIT_TIME = 10;
    public static final int LONG_WAIT_TIME = 30;
    public static final int SHORT_WAIT_TIME = 5;

    public static WebDriverWait createWait(WebDriver driver, int seconds) {
        return new WebDriverWait(driver, Duration.ofSeconds(seconds));
    }
}

总结

处理模态对话框弹窗是Web自动化测试中的重要技能。关键要点：

  1. 区分弹窗类型：JavaScript原生弹窗使用Alert接口，HTML Modal使用WebElement操作
  2. 使用显式等待：确保弹窗完全加载后再进行操作
  3. 异常处理：妥善处理弹窗可能不出现的情况
  4. iframe处理：记得切换上下文和恢复
  5. 工具类封装：创建可重用的弹窗处理方法

通过掌握这些技术，您可以有效地处理各种类型的模态对话框，提高自动化测试的稳定性和可靠性。

发表评论