使用 CSS 选择器时 WebdriverIO 行为与 Chrome devtools 控制台不同

Question

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?

Answer 1

All the different selectors you are sharing with us here should work in wdio .

This is the documentation of all the different selectors supported by wdio if you want to take a deeper look:

https://webdriver.io/docs/selectors

So, I would bet your issue is more related with the behavior of your site more than a problem with wdio selectors.

If you are struggling with some selectors I would try adding a wait like this to know what exactly is happening:

https://webdriver.io/docs/api/element/waitForDisplayed