In the process of developing an automation test script using C# and Selenium WebDriver, I encountered a challenge where I needed to click on two dropdowns consecutively. The HTML source code for the two dropdown elements is as follows:
<select id="ServiceTypeId" class="chosen chzn-done" tabindex="-1" name="ServiceTypeId" style="display: none;"></select>
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"><span>Choose an Option</span></a>
<div class="chzn-drop"></div>
</div>
</div>
<select id="PropertyTypeId" class="chosen chzn-done" tabindex="-1" name="PropertyTypeId" style="display: none;"></select>
<div id="PropertyTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"></a>
<div class="chzn-drop"></div>
</div>
While successfully locating and interacting with the first dropdown element (ServiceTypeId) using its CssSelector like so:
driver.FindElement(By.CssSelector("div.chzn-container a.chzn-single")).Click();
Thread.Sleep(1000);
driver.FindElements(By.CssSelector("div.chzn-drop li.active-result"))[5].Click();
Thread.Sleep(500);
I faced difficulty in locating the second dropdown (PropertyTypeId) due to both having similar classes applied to them.
Attempts to locate the second dropdown by its ID proved unsuccessful:
driver.FindElement(By.Id("PropertyTypeId_chzn")).Click();
This indicates that a jQuery plugin from here was used in creating the dropdowns.
If anyone can provide assistance on how to address this issue, it would be greatly appreciated.
EDIT:
It should be noted that both elements are currently set to display:none. Therefore, attempts to interact with them directly via
driver.FindElement(By.Id("ServiceTypeId")).Click();Element is not currently visible and so may not be interacted with