CODEWITHSUNDEEP
seleniumselenium-webdriver
Vinee
Vinee

Reputation: 402

Selenium webdriver C# CSS dropdown Issue - Element should have been select but was div

I have a html code as below.

<div class="rowElem fullSize ">
<div class="jqTransformSelectWrapper" style="z-index: 10; width: 276px;">
<div>
<span style="width: 245px;">MasterCard</span>
<a class="jqTransformSelectOpen" href="#"/>
</div>
<ul style="width: 274px; display: none; visibility: visible; height: 100px; overflow: hidden;">
<li><a class="selected" index="0" href="#">MasterCard</a></li>
<li><li><li>
</ul>
<select id="CardProvider" class="jqTransformHidden" name="CardKey" style="">
<option value="1">MasterCard</option>
<option value="2">VISA</option>
<option value="3">AMEX</option>
<option value="4">DEBIT</option>
</select>
</div>
</div>

Here, this is a dropdown menu where the //div/div/div has just one field displayed. //div/div/ul has four individual li which has the same provider input as the select tag.

I tried with a lot of combinations to choose a specific value from the drop down.

If I use //div/div[@select[id="CardProvider"] with FindElement and it returns the very first value.

If I use //div/div/[@select[id]"cardProvider"]/ul//a - It is returning me with four values.

However I am not able to select the menu as the expected tag select but was div. If I write a query to bring the tagname as select, the text value returned as null.

I didnot give my selenium command as nothing worked and given the html for your reference. Kindly provide me your inputs to overcome this.

Upvotes: 3

Views: 22047

Answers (8)

Niyati
Niyati

Reputation: 513

First check that: Drop down in your UI/FrontEnd is using "select" method or not ? And if not then use below snippet that will click in drop down and select value.

WebElement selectMyElement = driver.findElement(this.getObject(By.Id("Id of Your DropDown"))); selectMyElement.click();

        Actions keyDown = new Actions(driver);
        keyDown.sendKeys(Keys.chord(Keys.DOWN, Keys.DOWN)).perform();

Upvotes: 0

shubhi
shubhi

Reputation: 11

String cssSelect="select[class='filerTableSelect']";
    String cssBetween="select[class='filerTableSelect']>option[value='BETWEEN']";
    driver.findElement(By.cssSelector(cssSelect)).click();
    driver.findElement(By.cssSelector(cssBetween)).click();

worked like charm

Upvotes: 0

Kishan Piratla
Kishan Piratla

Reputation: 1

  1. Click on the icon
  2. The list of elements gets exposed to Selenium
  3. Pick one of those

I faced a similar problem in my code and the above steps fixed it.

Upvotes: 0

vikramvi
vikramvi

Reputation: 3605

Below solution works best in case of dropdown implemented without select

  1. Click on drop down icon
  2. wait for list to populate
  3. now work on the list

driver.findElements(By.xpath("//div[@class='dropdown-menu']/div[@class='dropdown-menu-item']")).get(0).getText().equals("Option 1")

you need to put this in loop for all the menu items and works without any issue.

Upvotes: 0

Vinee
Vinee

Reputation: 402

I just followed a different approach (kind of workaround) of having two xpath to locate it and it works fine.

The Code I used is

Driver.FindElement(By.XPath(XPATH1ofCSSDROPDOWN)).Click();
            Driver.Wait(3000); 
            Driver.FindElement(By.XPath(XPATH2ofDROPDOWNLISTELEMENT)).Click();

where XPATH2ofDROPDOWNLISTELEMENT = //*[@id='frmForm']//a[contains(text(), 'MasterCard')]

Kindly let me know if you have any answer apart from the one mentioned on the board.

Upvotes: 0

eugene.polschikov
eugene.polschikov

Reputation: 7339

frankly speaking I'd prefer usign css selectors. 1st approach:

String cssSelect="select[id='CardProvider']";
String cssMasterCard="select[id='CardProvider']>option[value='1']";
String cssVISA="select[id='CardProvider']>option[value='2']";

driver.findElement(By.cssSelector(cssSelect)).click();
driver.manage().timeouts().implicitlyWait(2,TimeUnit.SECONDS);
//clicking on e.g. MasterCard option
driver.findElement(By.cssSelector(cssMasterCard)).click();

2nd approach: if jQuery is supported you can click directly on menu options without clicking on menu dropdown previously:

JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("var x=$(\'"+cssMasterCard+"\');");
        stringBuilder.append("x.click();");
        js.executeScript(stringBuilder.toString());

3rd approach clicking using DOM model:

JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("document.getElementsByTagName('option')[0].click()");
        js.executeScript(stringBuilder.toString());

And dont forget to verify found xPaths or css selectors in firebug, firebug addon in firefox:

enter image description here

Hope this helps you.

Upvotes: 0

Abhishek_Mishra
Abhishek_Mishra

Reputation: 4621

You can try this:

IWebElement dropDownListBox = driver.findElement(By.Id("CardProvider"));
SelectElement clickThis = new SelectElement(dropDownListBox);
clickThis.SelectByText("MasterCard");
clickThis.SelectByText("VISA");
clickThis.SelectByText("AMEX");
clickThis.SelectByText("DEBIT");

Upvotes: -1

niharika_neo
niharika_neo

Reputation: 8531

You can try avoid relative xpaths if those can be avoided. In your html, the select element has a unique identifier, the id, which can be used.

You can try the below:

Select sel = new Select(driver.findElementById("CardProvider"));
sel.selectByVisibleText - there are options here to select by index, visible text and value - choose any which you think would be stable.

You can refer this for more.

Upvotes: 2

Related Questions