How to select element from "Selection" dropdown using 'id" tag

Question

I have used the following code but its not working..

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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!