1

I have used the following code but its not working..enter image description here

Select Section = new Select(driver.findElement(By.id("section-1k")));
        Section.selectByVisibleText("A");
        Thread.sleep(2000);

I have used the following:

By myBy = By.cssSelector("[id^='select2-section'][id$='container']");
WebElement myElement = driver.findElement(myBy);
Select select = new Select(myElement);

select.selectByVisibleText("A");
Thread.sleep(2000);

Its not wroking and did not select element from section drop down. after run this case showing error in console :

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

Would please give me any other suggestion for this. You see my attachment I am easily select class element with the following script:

Select Class = new Select (driver.findElement(By.id("class"))); 
Class.selectByVisibleText("One");
Thread.sleep(2000);

But for section drop down its showing error when try using this as per your suggestion.

Please see the attachment for detail HTML Tag.enter image description here

1
  • Please select correct answer
    – Sagar007
    Dec 18, 2017 at 3:29

4 Answers 4

2

The main problem is that the dropdown in page is not select but span. So you can't use Select class. You have to select it by clicking on the element, aka open the "options" and than click on the "option" you want to select. So, something as this should work:

//click on element of pseudo select
driver.FindElement(By.ClassName("select2")).Click() 
// clicking on the pseudo option
driver.FindElement(By.Id("select2-selection-tn-container")).Click()

Not using select and option to create dropdown is quite common, because select is harder to style. Using div or span as select is much easier to style with CSS.

1

Assuming there are no differences between your screenshots and what you're really working with, the likely reason your code snippet isn't working is because you must use the entire id name which would be select2-section-1k-container. If you want to target it with a partial name, you can do something more like: By.cssSelector([id*='section-1k']) which will target any element whose id contains that sub-string. Make sure though that it doesn't target more than one element though, otherwise you'll end up talking to the wrong one.

Edit:

If I'm understanding correctly, the 1k in your id may change, but no other parts of it. Assuming that we're going to always have select2-section- before and -container after... You could target those two sections separately [id^='select2-section'][id$='container']

In this css example, we're saying that we want to target an element whose attribute (id in our case) starts with a value, but also ends with a value. Those rules are described with:

*= contains substring

^= values begins with

$= value ends with

Edit 2:

Sorry, I should've included an example of how to actually use it too...

By myBy = By.cssSelector("[id^='select2-section'][id$='container']");
WebElement myElement = driver.findElement(myBy);
Select select = new Select(myElement);

Edit 3:

At this point, you seem to be using correct syntax for what you're trying to do. So you need to determine why the selector you're trying to use isn't working. That's not something anyone is going to be able to give you an answer for unless you share the real web page with the elements you need help with.

A few reasons that it could be failing, however:

  • Using ^= to find a value that isn't the true beginning

  • Using $= to find a value that isn't the true end

  • The css selector you're using is locating more than one element, such that the one you intended isn't the first found.

You can find browser addons that let you more easily validate css selectors and will highlight any and all elements that match a css selector you provide. But in the absense of a browser addon, you can use the browser console to test 1-off selectors. The way you do this differs a bit depending on whether you want to use vanilla js, or another such as jquery.

I'm less familiar how to do it with vanilla js, but you can quickly test if a web page uses jquery by typing $(""), $$("") or $j(""). If any of those do NOT give you an error for not being defined, then you have that version of jquery, and you can put css selectors inside those quotes to test directly in the browser. This is a good tool for testing your css selectors and quickly making tweaks before running your potentially bulky and more time consuming test(s).

5
  • Thanks for suggestion. But here 1k is randomly change. So what can I do now for this situation? Nov 3, 2016 at 3:58
  • I elaborated on my answer, hopefully I hit the nail on the head for you
    – Julian
    Nov 3, 2016 at 4:10
  • I have used following but now working Select Section = new Select (driver.findElement(By.cssSelector("[id^='select2-section']")).findElement(By.cssSelector("[id$='container']"))); Section.selectByVisibleText("A"); Nov 3, 2016 at 4:27
  • Try in this way -Select Section = new Select (driver.findElement(By.cssSelector("[id^='select2-section'][id$='container']"‌​)) . I think this is what Julian meant. Nov 3, 2016 at 5:43
  • Tryied to the following but not working. Have any suggestion pls. Select Section = new Select(driver.findElement(By.cssSelector("[id^='select2-section'][‌​id$='container']"))); Section.selectByVisibleText("A"); Nov 3, 2016 at 7:48
1

As per this Documentation Select Section = new Select(driver.findElement(By.id("section-1k"))); is working for only <select> tags not for <span> tag.

For this type of drop down follow this steps :

  1. Click on drop down

    driver.findElement(By.id("select2-section-1k-container")).click();

  2. Click require option like "A"

    driver.findElement(By.xpath("//span[@id='select2-section-1k-container']/..//*[text()='A']")).click();

Note : Here may be list of elements are provided by HTML page so please run this element in console first and take preferred element.

Please let me know If any query

0

The drop-down list is a select node. Go up in the html and find the id of the select node. and then select any option by visible text.

new Select(driver.findElement(By.id("id of select node"))).selectByVisibleText("your desired type");

you should import: import org.openqa.selenium.support.ui.Select; You can also select options from drop-down list by its value but not with the id tag of the span you mentioned before!

5
  • I have used but not working. have any suggestion. Nov 3, 2016 at 4:08
  • @ImtiazAhmedBiplob Then please share more of HTML. I mean upper than I can see in the image.
    – Jose
    Nov 3, 2016 at 10:01
  • Please check given latest attachment. Nov 6, 2016 at 7:32
  • @ImtiazAhmedBiplob By using Select select = new Select(...) you can only locate a select node and it is not possible to locate a span node with that. For selecting any option from a drop-down list you should first locate the select node and then choos any option by its visible text or by its value.
    – Jose
    Nov 8, 2016 at 13:55
  • Hello Jose, Would you please give me an example to see my attachment. Nov 9, 2016 at 9:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.