How to select value in a span element with Selenium testing?

Question

The page I am trying to test has a span element that is actually functioning as a drop down select menu. The Selenium code for "select" elements does not work and throws the following:

Exception in thread "main" org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span"

The code for that element looks as the following:

<span style="width: 100%" val="30" id="countVal">30</span>

The code when I open the drop down menu is:

<tr onclick="selectNewCount(1);" class="selec_option">
<td onmouseout="blankit(this)" onmouseover="colorit(this)" class="bones_pointer out_color" id="tdgroup1">50</td>
</tr>

This is how this looks like:

EDIT 1:

This is my Selenium code:

            // choose number of records.
        try {
            WebDriverWait wait = new WebDriverWait(driver, /*seconds=*/10);

            element = wait.until(presenceOfElementLocated(By.id("countVal")));

            Select select = new Select(element);
            select.deselectAll();
            select.selectByVisibleText("100");

        } catch (NoSuchElementException ex) {
            System.out.println("PAGE SOURCE: \n" + driver.getPageSource());
            ex.printStackTrace();
        }

This is how page source code looks around this element:

I can add more details if required. Thanks.

Answer 1

So here is what's happening:

When you click on <div id="countSelect"></div> JavaScript's show_countSelector() is executed and the values are appended to the table. Those "select options" are actually "table rows".

So your steps are:
1) If there are no rows with class selec_option under div with id countSelect, then you need to click on that div first.
2) After that you click on the particular row.

So I'll try to show the Java code (however, I use Python for Selenium):

WebElement selectorElement = driver.find(By.xpath('//*[@id="countSelect"]')));

WebElement elementOfInterest;
try {
    //trying to get the "select option"
    elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]'))

} catch (NoSuchElementException e) { 
    //so options are not visible, meaning we need to click first
    selectorElement.click()
    //good idea would be to put "wait for element" here
    elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]'))
}
//this would select the option
elementOfInterest.click()

Something like this. :)

Answer 2

Have you tried selectByValue("value")?

Answer 3

That's because it's not a select even if it looks like it is...

You have to use an other mean. I think that a simple

element = driver.find(By.id("countVal"));
element.click()

should work

You have to find the way the select work, there should be some javascript involved behind. When you'll know how the change of element appear, you'll be able to find what to do in Selenium. But that's certainly not a pure select

(Note : that's a not tested and even mabe not compilable code, but it shows you how I see the point)

Answer 4

You can use Select class only with html native selects... you use custom select which is actually a span.

an example for you case:

 public void selectValue(String item) {
    WebElement dropDown = driver.findElement(By.id("countTd"));
    dropDown.click();

    driver.findElement(By.xpath("//td[@id='countTd']/span[text()='" + item + "']")).click();
}