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

Question

我有3个下拉列表，它们不是选择类。所以我需要单击每个元素的向下箭头键。这些箭头键的CSS相同： .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> ]

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

尝试：

尝试使用这些xpath：

${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 Selector来查找它们。在这种情况下，我建议使用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']"

第二个选项：使用带有特定ID，类名，可搜索或订购的 CSS Selector 。

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"

Answer 2

是的，你可以用driver.findElements索引选择它们（注意's'）。这将返回定位器找到的Web元素列表。然后，您可以像任何List一样遍历列表。例如：

List<WebElement> arrows = driver.findElements(By.className("Select-arrow"));
WebElement jobTitle = arrows.get(0);  
WebElement countryCode = arrows.get(1);
WebElement timezone = arrows.get(2);