0

In my code I wrote this code to enter the expiration date by SendKeys

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

now after entering the date, the calendar pops up with this date and due to this, I am not able to perform the next action which is selecting gender which is a dropdown.

the code for thar is below:

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");

It is giving me an error: “Element is not visible”

Html for expiration date:

 <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 for gender:

<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>

Screenshot of Gender enter image description here

yong
  • 13,357
  • 1
  • 16
  • 27
Sarvesh Singh
  • 13
  • 7

2 Answers2

0

I haven't tested this but I am pretty sure it should work:

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

Or if selecting by text doesn't work, try selecting by index:

dropdown.selectByIndex(2);

Also, to automatically trigger a click event on some other visible element to make the popup calendar go away, try this: https://stackoverflow.com/a/11956130/8065825

UPDATE:

I have just noticed an error in your dropdown HTML: you're placing the </select> closing tag before the dropdown options so clearly that won't work. Try this instead:

<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>
ovimunt
  • 187
  • 1
  • 13
0
// 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()
yong
  • 13,357
  • 1
  • 16
  • 27
  • I am able to get away from thr calendar but is doesn't do the next action – Sarvesh Singh Jun 01 '18 at 04:55
  • The `get way` means the calendar pop-up be closed? – yong Jun 01 '18 at 05:01
  • Yes the pop is now closed after clicking other element on the page but now it's selecting gender it failed there as female test is not visible – Sarvesh Singh Jun 01 '18 at 05:07
  • Please give the heading 20 lines and the ending 20 lines HTML code around the Gender dropdown, I suspect it's not a native dropwdown, but a CSS dropdown, like http://jqueryui.com/selectmenu/ – yong Jun 01 '18 at 05:15
  • I updated code, you can try and to see it will fail at line `driver.findElement(By.id("passport-gender-243202807")).click()` and report `element not visible`. If reported, means it's not a native dropdown. (Native dropdown implement purely by HTML `select` and 'option' tag) – yong Jun 01 '18 at 05:25
  • Yes it is a css dropdown please see the code in question above – Sarvesh Singh Jun 01 '18 at 05:25
  • But the give HTML code of the Gender is only includes `select` and `option` tags. This means it's a native dropdown. If it's not. Please give more HTML code, 30 lines above the `` – yong Jun 01 '18 at 05:28
  • Sir it is working fine with your updated code thanks for the help – Sarvesh Singh Jun 01 '18 at 06:36