无法在下拉列表上执行操作，因为日历会在sendKeys发送到期日期后弹出

Question

在我的代码中，我编写了此代码以通过SendKeys输入到期日期

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

现在输入日期后，日历会弹出这个日期，因此，我无法执行下一个选择性别的下一个操作。

thar的代码如下：

String locator = "select[id='passport-gender-243202807']" + 
      "[data-sync-to-element='#citizenship-info-view-passport_gender-243202807']"
Select dropdownGender = new Select(driver.findElement(By.cssSelector()));

dropdownGender.selectByVisibleText("Female");

它给了我一个错误：“元素不可见”

有效期的Html：

 <input required="" type="text" id="passport-exp-date-input-243202807"
        name="documentExpirationDateInput" 
        class="form-control expirationDate input-sm orange-calendar 
               sync validDateFormat date-picker-selector hasDatepicker"
        data-language="en" data-date-format="yy-mm-dd" 
        data-end-date-of-trip="2018-07-07T00:00:00.000-04:00" 
        data-min-date="0" data-max-date="" 
        data-sync-to-element="#citizenship-info-view-document_expiration-243202807" 
        data-ocr="" value="">

性别的Html：

<select required="" type="text" name="gender" id="passport-gender-243202807"
        class="form-control input-sm sync" data-ocr=""
        data-sync-to-element="#citizenship-info-view-passport_gender-243202807">
    <option value="">Gender</option>
    <option value="M">Male</option>
    <option value="F">Female</option>
</select>

性别截屏

Answer 1

我还没有对此进行过测试，但我很确定它应该有效：

Select dropdown = new Select(driver.findElement(By.id("passport-gender-243202807")));
dropdown.selectByVisibleText("Female");

或者，如果按文字选择不起作用，请尝试按索引选择：

dropdown.selectByIndex(2);

此外，要自动触发其他可见元素上的点击事件以使弹出式日历消失，请尝试以下操作：https://stackoverflow.com/a/11956130/8065825

<强>更新

我刚刚注意到您的下拉列表HTML中出现了错误：您在下拉选项之前放置了</select>结束标记，这样就可以清楚地表明它不会起作用。试试这个：

<select required="" type="text" name="gender" id="passport-gender-243202807" class="form-control input-sm sync" data-sync-to-element="#citizenship-info-view-passport_gender-243202807" data-ocr="">
    <option value="">Gender</option>
    <option value="M">Male</option>
    <option value="F">Female</option>
</select>

Answer 2

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

// click any element on page which is not covered by the calendar pop-up
// to make the calendar close, so that it won't cover the Gender element
driver.findElement(<any element no covered by calendar>).click()

// if it's native dropdown,
// click on the dropdown to expand all options
// Generally, for native dropdown, no need to expand options
// we can directly click the option without expand all options.
driver.findElement(By.id("passport-gender-243202807")).click()

// click the wanted option
driver.findElement(By.id("passport-gender-243202807"))
      .findElement(By.xpath("./option[text()='Female']")).click()