WebdriverIO waitForExist() select element's selected option

Question

My initial research led me to find the jQuery selector that would allow me to return the correct element in the Chrome Inspector, but Webdriver does not or cannot recognize this selector even though jQuery does.

This snippet is what my select element looks like.

<select id="ember2932" tabindex="0" class="reasons-drop-down ember-view x-select">
    <option id="ember2933" class="ember-view x-option">Select a Reason</option>
    <option id="ember2935" value="DOCUMENT_LOST" class="ember-view x-option">Document Lost</option>
    <option id="ember2937" value="DATA_ISSUE_CORRECTION" class="ember-view x-option">Data Issue/Correction</option>
</select>

The jQuery selector I'm using is:

$("select.reasons-drop-down option:selected:contains('Document Lost')")

That works in Chrome Inspector and returns this when the "Document Lost" option is selected:

[<option id=​"ember2935" value=​"DOCUMENT_LOST" class=​"ember-view x-option">​Document Lost​</option>​]

It returns an empty array when it is not selected because it cannot find the element.

When I started my selector incrementally in Webdriver, it makes meaningful returns all the way up to

$("select.reasons-drop-down option")

Once I add the :selected, Webdriver is no longer able to see the existence of the selector, even though the jQuery in the inspector still can.

How can I get Webdriver to recognize the element that I know exists in the DOM and can be selected using jQuery? At this point, I'm blocked because I can't get Webdriver to identify the selected option at all, even though I can clearly get it in jQuery.

How do I verify the selected option in Webdriver? waitForExist() doesn't work and the api for isSelected() doesn't seem to fit this use or I don't understand it.

Answer 1

If you're not bound to using JQuery, you can try

  client.selectByValue('#ember2932', 'DOCUMENT_LOST')

http://webdriver.io/api/action/selectByValue.html