Choose dropdown list item in selenium webdriver using javascript

Question

I've been struggling to choose dropdown list item in selenium webdriver using javascript . I'm tasked to open https://pastebin.com/ then choose "10 Minutes" from dropdown list using selenium webdriver javascript. I've achieved to open the dropdown list with the following method:

await driver.findElement(By.id(`postform-expiration`)).click()

Tried to select dropdown list item both li value and id:

await dropdown.findElement(By.css(`li[value="10 Minutes"]`)).click()
// and
await driver.findElement(By.css(`//*[@id="select2-postform-expiration-result-b5nq-10M"]`)).click()

But none of them could choose the dropdown list item.

The structure of the dropdown list is as follows:

<div class="col-sm-9 field-wrapper">
<select id="postform-expiration" class="form-control select2-hidden-accessible" name="PostForm[expiration]" data-s2-options="s2options_7ebc6538" data-krajee-select2="select2_a09a7382" style="width: 1px; height: 1px; visibility: hidden;" data-select2-id="postform-expiration" tabindex="-1" aria-hidden="true">
<option value="N" data-select2-id="4">Never</option>
<option value="B" data-select2-id="11">Burn after read</option>
<option value="10M" data-select2-id="12">10 Minutes</option>
<option value="1H" data-select2-id="13">1 Hour</option>
<option value="1D" data-select2-id="14">1 Day</option>
<option value="1W" data-select2-id="15">1 Week</option>
<option value="2W" data-select2-id="16">2 Weeks</option>
<option value="1M" data-select2-id="17">1 Month</option>
<option value="6M" data-select2-id="18">6 Months</option>
<option value="1Y" data-select2-id="19">1 Year</option>
</select><span class="select2 select2-container select2-container--default select2-container--open select2-container--above select2-container--focus" dir="ltr" data-select2-id="3" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-postform-expiration-container" aria-owns="select2-postform-expiration-results" aria-activedescendant="select2-postform-expiration-result-e4wf-1D"><span class="select2-selection__rendered" id="select2-postform-expiration-container" role="textbox" aria-readonly="true" title="Never">Never</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

</div>

I appreciate your help. Thanks in advance!

Answer 1

Why don't you try a select method. It should work with that particular dropdown. It is as follows:

Select selectTime = new Select(driver.findElement(By.className("select2-selection select2-selection--single")));
selectTime.selectByValue("10 Minutes");

Also, if this does not work, then try something like this (this is more similar to your method):

await dropdown.findElement(By.id(`select2-postform-expiration-container`)).click()
await driver.findElement(By.xpath(`//*[text("10 Minutes"))).click();