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:

The form with pseudo select element

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:

enter image description here

I can add more details if required. Thanks.

what does the span fall in? what is the parent element of span? — niharika_neo, Dec 21 '12 at 04:22
@amey, I just added information to the question under EDIT 1. Thanks. — vlr, Dec 21 '12 at 09:51
@niharika_neo, I added the image of the page's source. Thanks. — vlr, Dec 21 '12 at 09:52

Alex Okrushko · Accepted Answer · 2016-07-27T20:54:53.800

4

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. :)

edited Jul 27 '16 at 20:54

answered Dec 21 '12 at 15:17

Alex Okrushko

7,212
6
44
63

Thanks a lot. It works. Is there way I can manipulate original page's source and add option that does not exist? Like, can I dynamically add dropdown option for 300 records? I know it is separate questio, but it is directly related to the this context. Thanks. – vlr Dec 22 '12 at 08:34
@vlr, You can do it without any problem, however that's not automation's job (unless you are trying to verify that it's not possible to submit a different value). First, you can add html code through any Browser's Dev Tools. Secondly, you can call this in your code: http://jsfiddle.net/R7e5L/ NOTE: Since you haven't posted the HTML code when your ddl is open I cannot guarantee this code in two places: the value of `tdgroup[number]` and `selectNewCount([number])`. I put **3** as number - but that's just my guess. – Alex Okrushko Dec 23 '12 at 15:35
@vlr, Also any good web developer will block your attempts to set new value (other than dev provides), however looking at HTML code I think that your devs are not that great and this trick might work. – Alex Okrushko Dec 23 '12 at 15:37
I have a query here. How elementOfInterest reference of WebElement can be accessible outside try catch block? @vlr – Purendra Agrawal Jul 13 '16 at 17:15
@Purendra I've put the variable declaration out of the try/catch block – Alex Okrushko Jul 27 '16 at 21:02

score 0 · Answer 2 · answered Dec 21 '12 at 04:34

0

Have you tried selectByValue("value")?

answered Dec 21 '12 at 04:34

some_other_guy

3,364
4
37
55

It actually does not accept that element even before I try to activate any sort of select. It falls on `Select select = new Select(element);` – vlr Dec 21 '12 at 09:54

score 0 · Answer 3 · answered Dec 21 '12 at 14:58

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();
}

score -1 · Answer 4 · answered Dec 21 '12 at 10:07

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)

the code you provided is really not helpful – Rohan Arora Jun 26 '22 at 15:47 — Rohan Arora, Jun 26 '22 at 15:47

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

4 Answers4