Below is the code snippet of html I'm trying to access via WebdriverIO
<div lightning-basecombobox_basecombobox="" class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<button lightning-basecombobox_basecombobox="" class="slds-combobox__input slds-input_faux" id="combobox-button-105" type="button" aria-expanded="false" aria-haspopup="listbox" name="payFrequency" role="combobox" data-value="" aria-label="Pay Frequency, --Select Pay Frequency--" aria-required="true" aria-controls="dropdown-element-105" aria-describedby="help-text-104"><span lightning-basecombobox_basecombobox="" class="slds-truncate">--Select Pay Frequency--</span></button>
<div lightning-basecombobox_basecombobox="" class="slds-input__icon-group slds-input__icon-group_right"><lightning-icon lightning-basecombobox_basecombobox="" class="slds-input__icon slds-input__icon_right slds-icon-utility-down slds-icon_container">
<lightning-primitive-icon><svg class="slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="down" aria-hidden="true" viewBox="0 0 52 52"><g><path d="M8.3 14h35.4c1 0 1.7 1.3.9 2.2L27.3 37.4c-.6.8-1.9.8-2.5 0L7.3 16.2c-.7-.9-.1-2.2 1-2.2z"></path></g></svg></lightning-primitive-icon></lightning-icon></div></div>
It is a combobox drop-down with a list a values to select. Perform a click and select one of the option is the intended outcome. Only the xpath selector works with wdio which is,
$(`//button[@name="payFrequency"]`)
And none of the below CSS Selectors work,
$(`.slds-combobox__input.slds-input_faux`)
$(`button[name="payFrequency"]`)
The above selector works well in Chrome Devtools console and I request a clarity why it doesn't work with wdio?