How to make element visible in selenium webdriver?

Question

Please anyone can help me how to select options from the drop down if the element is not visible and it is a boolean attribute. Here is the html tag:

<select id="visualizationId" style="width: 120px; display: none;" name="visualization">
<option value="day">Day</option>
<option value="week">Week</option>
<option selected="" value="month">Month</option>

Am working on selenium webdriver. the below code is not working fine. Is there any sample code to select the invisible element.

Actions actions1 = new Actions(driver);
WebElement dBox1= ((new    WebDriverWait(driver,60)).until(ExpectedConditions.elementToBeClickable(By.id("visualizationId"))));
selectByVisibleText("week");
actions1.moveToElement(dBox1);
actions1.click();
actions1.perform();

When using the below lines also am getting the error: Element is not currently visible and so may not be interacted with Command duration or timeout: 32 millisecond

Select se=new Select(driver.findElement(By.id("visualizationId")));
se.selectByVisibleText("Week");

or

se.selectByValue("week");

Please see the html and there the element is not visible. can any one suggest me how to make element visible then how can i select the option.

Answer 1

You have to be careful when you use native APIs in selenium. Things like webElement.click() and such apply to elements that user would be able to work with in the browser window, namely visible elements.

If a drop down is not visible, you cannot use native APIs to interact with them.

You can try to use the javascript executor.

You most likely will be able to hack your select element to get the value you want by doing something such as: jsExecutor.executeScript(String.format("arguments[0].value = '%1$s';", valueToSet ), selectWebElement);

But if you do this, you're not really testing the UI.

Otherwise, you can also try to make it visible by doing style.diyplay = 'block' (assuming the parent element is visible).

However, your UI should somehow give you some sort of natural way to make that select box visible. Are you using prime faces components or such widgets that hide away the input elements and render instead "pretty" divs to simulate the drop downs and such? If so, interact with the dummy widgets instead of with the native input elements.