SendKeys输入到期日期后日历弹窗致性别下拉框不可操作求助

你遇到的问题很典型：用SendKeys输入护照到期日期后，弹出的日历弹窗干扰了后续操作，导致性别下拉框触发Element is not visible错误。咱们可以通过以下几种方式解决：

1. 输入日期后关闭日历弹窗 #

很多日期选择器支持按ESC键关闭，或者点击页面空白区域来收起弹窗，这样就能让性别下拉框恢复可操作状态：

// 输入护照到期日期
driver.findElement(By.cssSelector("#passport-exp-date-input-243202807")).sendKeys("2021-05-13");

// 方式一：按ESC键关闭日历弹窗
Actions actions = new Actions(driver);
actions.sendKeys(Keys.ESCAPE).perform();

// 方式二：点击页面空白区域（如果ESC无效可以试试这个）
driver.findElement(By.tagName("body")).click();

2. 显式等待下拉框可见后再操作 #

有时候弹窗关闭后，页面元素需要一点时间重新渲染，用显式等待可以确保下拉框完全可见后再执行选择操作：

// 输入日期
driver.findElement(By.cssSelector("#passport-exp-date-input-243202807")).sendKeys("2021-05-13");
// 关闭日历弹窗
Actions actions = new Actions(driver);
actions.sendKeys(Keys.ESCAPE).perform();

// 等待最多10秒，直到性别下拉框可见
WebElement genderDropdown = new WebDriverWait(driver, 10)
        .until(ExpectedConditions.visibilityOfElementLocated(
                By.cssSelector("select[id='passport-gender-243202807'][data-sync-to-element='#citizenship-info-view-passport_gender-243202807']")
        ));

// 选择性别
Select dropdownGender = new Select(genderDropdown);
dropdownGender.selectByVisibleText("Female");

3. 直接通过JavaScript操作下拉框（极端情况） #

如果弹窗始终无法关闭，或者下拉框在DOM中存在但被隐藏，你可以用JavaScript直接设置下拉框的值并触发同步事件（因为你的下拉框带有data-sync-to-element属性，需要触发change事件来同步数据）：

// 输入日期
driver.findElement(By.cssSelector("#passport-exp-date-input-243202807")).sendKeys("2021-05-13");

// 获取性别下拉框元素
WebElement genderDropdown = driver.findElement(
        By.cssSelector("select[id='passport-gender-243202807'][data-sync-to-element='#citizenship-info-view-passport_gender-243202807']")
);

// 用JS设置值为Female（对应value="F"）
((JavascriptExecutor) driver).executeScript("arguments[0].value='F';", genderDropdown);
// 触发change事件，确保页面同步数据
((JavascriptExecutor) driver).executeScript("arguments[0].dispatchEvent(new Event('change'));", genderDropdown);

问题原因说明 #

Element is not visible错误的本质是：日历弹窗弹出后，要么物理遮挡了性别下拉框，要么改变了页面的层叠上下文（z-index），导致下拉框被隐藏在弹窗下方，WebDriver无法找到处于可见状态的元素进行交互操作。

内容的提问来源于stack exchange，提问作者Sarvesh Singh