How to set value in a text box which will only be activated by mouse click

Posted on

Following is an example of a form where in user is required to enter the value inside the text box. As the label indicates you need to enter value by setting the focus of cursor first.
Set value focused
To set a value in a normal text box we can use sendkeys() method in selenium. Here in this case we have a text box which will be enabled only after the user click on it. Hence we need to click on the text box first to enable it or set focus and then we have to enter the text.

Lets look at the HTML code for the same.
<div class="textboxCover" id="textboxCover" style=""></div> <input type="text" name="setValueFocused" id="setValueFocused" style="border: none;">
If we look a the HTML code we have a div which is on top of the input tag on clicking on the same it enables or set focus on the input text box. Hence we need to get the web element for the div first and click on the div and then get the web element of input text box and call sendkeys() method to set value.

Step 1 : Create object for div element

Since we have Id textboxCover for the div we can write our code as follows:
WebElement tbCoverElem = wd.findElement(By.Id("textboxCover"));;

Step 2 : Create web element for text box

Since we have Id setValueFocused for the div we can write our code as follows:
WebElement textBoxElem = wd.findElement(By.Id("setValueFocused")); textBoxElem.sendKeys("Welcome");
Now lets put everything together in Java Code:-
WebDriver wd = new ChromeDriver();
wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
WebElement tbCoverElem = wd.findElement(By.Id("textboxCover"));;
WebElement textBoxElem = wd.findElement(By.Id("setValueFocused"));
This is a generic example of how to handle such situation where input box is not directly accessible of enabled. In real life scenario there might be multiple layers of div of other html elements on top of input box.