css - 我们如何选择下拉箭头键的 css 定位器-

Question

我有 3 个下拉列表，它们不是选择类。所以我需要点击每个元素的向下箭头键。这些箭头键的样式相同:.Select-arrow(使用的火路)

HTML:

<form accept-charset="UTF-8" autocomplete="off"><div class="form-group"><label for="nickname" class="control-label label__floating control-label">Nickname</label><input name="nickname" value="" id="nickname" class="signup-nickname form-control" type="text"><span class="help-block">Ex. LarrySaint, LSJ, LSSaintJohn, LSJohn</span></div><div class="form-group"><label class="control-label label__floating">Job Title</label><div class="Select Select--single"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-2--value"><div role="combobox" aria-expanded="false" aria-owns="react-select-2--value" aria-activedescendant="react-select-2--value" class="Select-input" tabindex="0" aria-readonly="false" style="border: 0px none; width: 1px; display: inline-block;"></div></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></div><div class="form-container__phone"><div class="form-container__phone--country"><div class="form-group"><label class="control-label label__floating">Country Code</label><div class="Select Select--single is-searchable"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-3--value"><div role="combobox" aria-expanded="false" aria-owns="react-select-3--value" aria-activedescendant="react-select-3--value" class="Select-input" tabindex="0" aria-readonly="false" style="border: 0px none; width: 1px; display: inline-block;"></div></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></div></div><div class="form-container__phone--number"><div class="form-group"><label for="phoneNumber" class="control-label label__floating control-label">Phone Number</label><input disabled="" name="phoneNumber" value="" id="phoneNumber" class="signup-phonenumber form-control" type="text"><span class="help-block">Ex. 855-434-7339, (510) 299 1234</span></div></div></div><div id="timezone"><div class="form-group"><label class="control-label label__floating">Select Timezone</label><div class="Select Select--single is-searchable"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-4--value"><div role="combobox" aria-expanded="false" aria-owns="react-select-4--value" aria-activedescendant="react-select-4--value" class="Select-input" tabindex="0" aria-readonly="false" style="border: 0px none; width: 1px; display: inline-block;"></div></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></div></div></form>

因此，我无法唯一标识每个下拉箭头的 css 值。请帮忙鉴定。

在 ff 控制台中，

$$('.Select-arrow')


Array [ <span.Select-arrow>, <span.Select-arrow>, <span.Select-arrow> ]

我可以通过索引选择这些元素中的任何一个吗？请帮帮我。

尝试:

尝试使用这些 xpaths:

${NEW_USER_LOGIN_PAGE_JOB_TITLE_DROPDOWN}    //*[@id='react-select-2--value-item']/input
${NEW_USER_LOGIN_PAGE_JOB_TITLE_DROPDOWN_OPTION4}     //*[@id='react-select-2--option-4']
${NEW_USER_LOGIN_PAGE_COUNTRY_CODE_DROPDOWN}    //*[@id='react-select-3--value-item']/input
${NEW_USER_LOGIN_PAGE_COUNTRY_CODE_DROPDOWN_OPTION96}    //*[@id='react-select-3--option-96']
${NEW_USER_LOGIN_PAGE_TIME_ZONE_DROPDOWN}       //*[@id='react-select-4--value-item']/input
${NEW_USER_LOGIN_PAGE_TIME_ZONE_DROPDOWN_OPTION102}      //*[@id='react-select-4--option-102']

这些都不起作用。

Answer 1

您可以使用 XPath 或 CSS 选择器来查找它们。在这种情况下，我推荐 XPath，因为它更灵活，也更宽容。

第一个选项:使用 XPath 通过标签元素中的文本查找每个箭头的根元素。

NEW_USER_LOGIN_PAGE_JOB_TITLE_DROPDOWN: "//label[contains(text(),'Job Title')]/..//span[@class='Select-arrow']"
NEW_USER_LOGIN_PAGE_COUNTRY_CODE_DROPDOWN: "//label[contains(text(),'Country Code')]/..//span[@class='Select-arrow']"
NEW_USER_LOGIN_PAGE_TIME_ZONE_DROPDOWN: "//label[contains(text(),'Select Timezone')]/..//span[@class='Select-arrow']"

第二个选项:将 CSS 选择器 与特定 ID、类名、可搜索或顺序一起使用。

NEW_USER_LOGIN_PAGE_JOB_TITLE_DROPDOWN: "div.Select:not(.is-searchable) span.Select-arrow" //supposing the Job Title dropdown is not searchable.
NEW_USER_LOGIN_PAGE_JOB_TITLE_DROPDOWN: "form > div:nth-child(2) span.Select-arrow" //supposing the Job Title dropdown is always the second item in the form.
NEW_USER_LOGIN_PAGE_COUNTRY_CODE_DROPDOWN: "div[class*='__phone--country'] span.Select-arrow"
NEW_USER_LOGIN_PAGE_TIME_ZONE_DROPDOWN: "#timezone span.Select-arrow"