0

I'm trying to select an option from a drop-down that has a div tag instead of select. With my below code, I am able to open the respective div, however unable to select the element.

This is the HTML tags:

<div id="selectator_LocationListDD" class="selectator_element single options-hidden" style="width: 
100%; min-height: 35px; padding: 6px 12px; flex-grow: 0; position: relative;">
<span class="selectator_textlength" style="position: absolute; visibility: hidden;">
</span>
<div class="selectator_selected_items">
<div class="selectator_selected_item selectator_value_">
<div class="selectator_selected_item_title">--Select--</div>
<div class="selectator_selected_item_subtitle"></div>
</div>
</div>
<input class="selectator_input" placeholder="Search here..." autocomplete="false">
<ul class="selectator_options" style="top: 73px;"><li class="selectator_option selectator_value_">
<div class="selectator_option_title">--Select--</div><div class="selectator_option_subtitle">
</div>
<div class="selectator_option_subtitle2">
</div>
<div class="selectator_option_subtitle3">
</div>
</li>
<li class="selectator_option selectator_value_CST0003970">
<div class="selectator_option_title">21ST STREET</div>
<div class="selectator_option_subtitle">1031 21st</div>
<div class="selectator_option_subtitle2">Lewiston, ID</div>
</li>
<li class="selectator_option selectator_value_CST0003214">
<div class="selectator_option_title">3RD &amp; STEVENS</div>
<div class="selectator_option_subtitle">508 W Third Ave</div>
<div class="selectator_option_subtitle2">Spokane, WA</div>
</li>
<li class="selectator_option selectator_value_CST0003956 active">
<div class="selectator_option_title">9TH AVE</div>
<div class="selectator_option_subtitle">600 S 9th Ave</div>
<div class="selectator_option_subtitle2">Walla Walla, WA</div>
</li>
<li class="selectator_option selectator_value_CST0003991">
<div class="selectator_option_title">10TH &amp; BANNOCK</div>
<div class="selectator_option_subtitle">950 W Bannock St, Ste 100</div>
<div class="selectator_option_subtitle2">Boise, ID</div>
</li>
</ul>
</div>

The Code ni has so far is:

Page Object:

@FindBy(id="selectator_LocationListDD")
WebElement locationDD;

public void select_locationEI(int index) throws InterruptedException {

    Thread.sleep(2000);
    locationDD.click();
    Select locationEI = new Select(locationDD);
    locationEI.selectByIndex(index+1); 
    // wait.until(ExpectedConditions.visibilityOfElementLocated
    (By.xpath("//div[@class=\"selectator_selected_item selectator_value_\"]//li["+ 
    (index+1)+"]"))).click();
    }

step definition:

    @When("user added equipment for each location")
public void user_added_equipment_for_each_location() throws InterruptedException {

    atmAgreement = new AgreementsATM(driver);


    for(int ei: emptyLocation) {

        atmAgreement.click_addNewEquipment_tab();
        loaderVisibilityWait();
        loaderInvisibilityWait();


        atmAgreement.select_locationEI(ei);
        atmAgreement.enter_modelText();

        String dt = reader.getCellData("ATM", "Depositor Type", 2);
        atmAgreement.select_depositorType(dt);

        String manufacture = reader.getCellData("ATM", "Manufacturer", 2);
        atmAgreement.select_manufacturer(manufacture);

        atmAgreement.enter_terminalID();

        atmAgreement.click_addButtonEI();
        loaderVisibilityWait();
    }
    emptyLocation.clear();
}

I got an org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "div". I'm not sure how to handle this as I've only worked with selects before.

Let's say I wanted to select "9TH AVE" for the agent code. How would I go about this?

Any help is appreciated! Thanks.

Aman
  • 1

2 Answers2

0

Use this xpath and get all the option title (findelements).

//ul//li/div[@class='selectator_option_title']
store above element in yourListOFElements

Once you have the list of webelements you can iterate through each entry and compare the innerHTML

yourListOFElements.get(i).getAttribute("innerHTML")

and compare with your required text. if matches you can click that element

hope you got the idea.

mk_
  • 164
  • 1
  • 14
0

as I see your dropdown list contains search field <input class="selectator_input" placeholder="Search here..." autocomplete="false">

the best way is to

  1. Select the main div with id="selectator_LocationListDD"
  2. select the search field inside the main div.
  3. type in the search field a unique part of the option name.
  4. then click on the only displayed <li> inside the main div.

that way you avoid using the index, which can change frequently and use the text in the selection which most likely depends on your inserted Test data so you have full control of it.

miyaman
  • 1
  • 1