Fetching Relative Attributes by Xpath

Question

In the dropdown list below, Im trying to select and echo the results of the data-balance attributes assigned to the data-store attribute labeled "Depot Spot" using xpath. I tried the following xpath  but its only showing the text results of the first "Depot Spot" option. What am i missing?

<div class="modal-content">
<div class="modal-header"><button class="close dialog-close" type="button" aria-hidden="true">&times;</button>
<h4 class="modal-title"></h4> 
<p>&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//select[@name='giftcard']/option[@data-store='Depot Spot'][@data-balance]</p>
<p>&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Result im getting= Depot Spot<span class="message">: 6010 ($34.25)</span></p>
<p>&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;       But the results should be Depot Spot $34.25
Depot Spot $91.60
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
Depot Spot $9.46
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
</div>

    <div class="modal-body"><form><input name="action" type="hidden" value="orderAssignGiftcard" /> 
    <input name="orderId" type="hidden" value="139903" />
    <div class="text-center">
    <p>&nbsp;</p>
    </div>
    <hr />
    <div class="form-group">&nbsp;</div>
    <div class="form-group"><label>Gift Cards</label><select class="form-control giftcard-selector" name="giftcard">
    <option value="81695" data-store="Depot Spot" data-number="6010" data-pin="3591" data-balance="34.25">Depot Spot: 9808 ($34.25)</option>
    <option value="81651" data-store="Sunnys" data-number="06074" data-pin="0939" data-balance="8.31001">Sunnys: 9808 ($8.31)</option>
    <option value="81693" data-store="Marvies" data-number="10162" data-pin="5399" data-balance="53.67">Marvies: 5399 ($53.67)</option>
    <option value="81694" data-store="HappyOnes" data-number="10162" data-pin="7011" data-balance="59.95">HappyOnes: 7011 ($59.95)</option>
    <option value="81648" data-store="Depot Spot" data-number="3487" data-pin="7120" data-balance="91.6">Depot Spot: 3487 ($91.60)</option>
    <option value="81636" data-store="Depot Spot" data-number="03371" data-pin="7231" data-balance="9.46">Depot Spot: 03371 ($9.46)</option>
    </select></div>
    </form>
    <div>&nbsp;</div>
    </div>
    <div class="modal-footer">&nbsp;</div>
    </div>

Answer 1

You don't need such complicated xpath. This should make the job as well. You can collect data-store and data-balance values to separate lists if you wish.

List<String> results = new ArrayList<String>();
WebElement dropdown = driver.findElement(By.Name("giftcard"));
dropdown.click(); // to make the options visible
List<WebElement> options = dropdown.findElements(By.TagName("option"));
for (WebElement option: options) {
    String dataStore = option.getAttribute("data-store");
    String dataBalance = option.getAttribute("data-balance");
    results.add(dataStore + "\\$" + dataBalance);
}

Answer 2

To select the option with text as Depot Spot: 9808 ($34.25) from the dropdown you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• Using cssSelector and selectByVisibleText():

  new Select(new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("select.form-control.giftcard-selector[name='giftcard']")))).selectByVisibleText("Depot Spot: 9808 ($34.25)");
  

• Using xpath and selectByValue():

  new Select(new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//select[@class='form-control giftcard-selector' and @name='giftcard']")))).selectByVisibleText("Depot Spot: 9808 ($34.25)");
  

Further, to print print the value of the data-balance attributes assigned to the data-store value or innerText starting with Depot Spot you can use Java8's stream() and map() you can use the following solution:

• Using cssSelector and data-store attribute:

  System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("select.form-control.giftcard-selector[name='giftcard'] option[data-store='Depot Spot']"))).stream().map(element->element.getAttribute("data-balance")).collect(Collectors.toList()));
  

• Using xpath and text Depot Spot::

  System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//select[@class='form-control giftcard-selector' and @name='giftcard']//option[starts-with(., 'Depot Spot')]"))).stream().map(element->element.getAttribute("data-balance")).collect(Collectors.toList()));