はどのように我々は、私がダウンリスト3のドロップを持っているキー -

Question

ドロップダウン矢印のCSSのロケータを選択することができ、彼らはクラスを選択されていません。私は各要素の下矢印キーをクリックする必要があります。 .Select矢印（使用firepath）

HTML：これらの矢印キーが同じであるのCSSので

<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> 

は、I一意矢印ダウン各液滴の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セレクタの両方を使用してそれらを見つけることができます。この場合、XPathはより柔軟で許容範囲が広いので、XPathを推奨します。

第1オプション：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セレクタ、クラス名は、または順検索可能です。

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」に注意してください）でインデックスで選択できます。これは、ロケータによって検出されたWebElementsの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);