Selecting value from the Dropdown using selenium web-driver - selenium

Question

I have a small doubt over here on selecting one of the value from the drop down using selenium . When i generated a code using selenium-IDE it gave me a set of codes for selecting from the drop-down .
Code is as follows-->
driver.findElement(By.cssSelector("input.search")).click();
driver.findElement(By.xpath("//table[#id='project-add-table']/tbody/tr[4]/td[3]/div/div[2]/div[3]")).click();
new Select(driver.findElement(By.cssSelector("select"))).selectByVisibleText("Test");
So can anybody tell what is the use of that second line of code ?After clicking to the dropdown why cant we directly select the required element?
HTML -->
<td class="environmentTd" required="">
<div class="ui fluid search dropdown env selection">
<select>
<option value="SB">Sandbox</option>
<option value="DEV">Development</option>
<option value="QA">Test</option>
<option value="PROD">Production</option>
<option value="PP">Pre Production</option>
<option value="UAT">UAT</option>
<option value="DR">DR</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text">Sandbox</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item active selected" data-value="SB">Sandbox</div>
<div class="item" data-value="DEV">Development</div>
<div class="item" data-value="QA">Test</div>
<div class="item" data-value="PROD">Production</div>
<div class="item" data-value="PP">Pre Production</div>
<div class="item" data-value="UAT">UAT</div>
<div class="item" data-value="DR">DR</div>
</div>
</div>
</td>

Answer 1

If your select tag is visible in DOM without you clicking the dropdown, just use the third line
Select select = new Select(driver.findElement(By.cssSelector("select")));
select.selectByValue("QA");
Otherwise, click on the dropdown which will probably generate the DIV with class
class="menu transition hidden"
and then you can use the select line.

Answer 2

U don't really need to click on dropdown. U need to find dropdown as WebElement, convert it to SelectElement and use it's class method to select option.
I assume, that in provided code you click on dropdown, then click on opened fields with options. But I think it's a lot of unnecessary actions. Unless you have any scripts, triggered by that clicks, which must be tested.

Answer 3

From your description it sounds like the SELECT element isn't visible until the 2nd click happens. It's also possible that the 2nd click creates the SELECT element via Javascript. You could investigate this by using the Chrome devtools and search for the SELECT element before the 2nd click happens. See if it exists or maybe exists but is not visible. Then click on the 2nd element and see how the HTML changes. Without access to the site, that's about as good an explanation as we can provide. It's not something I would worry about. It's just the way the site is designed.