Can not sendKey to hidden element

Question

I'm practicing to interact with element (nopCommerce domain). But encountered some problems, when trying to perform sendKey to an invisible element.

This is an input field of product tags, which becomes invisible by CSS (position: absolute and left: -99999px).

Below this input field is a <ul> tag which takes the role of it.

I've listed below all the solutions I can think about so far,

1. Click (focus) to ul element and try to sendKey to ul tag => of course it doesn't work, because this element is not interactable by keyboard.

2. Directly sendKey to input field -> also not working.

3. Make this input field visible with jsExecutor and try to sendKey to it -> also not working.

4. Set value for this input field with setAttribute method of jsExecutor -> can set value for input field, however, when you click save button and come back, product tags will not be saved (not working)

This is domain, which contains elements I'm trying to interact with:

https://admin-demo.nopcommerce.com/Admin/Product/Edit/3

I'm struggling to find for more than three days, but nothing seems to work.

I'd really appreciate if anyone can give me some idea and solution.

Answer 1

This is the common problem faced by top software testing companies, We can overcome these by using 'Actions' class of selenium interactions.

Below is the code where i am able to send text successfully.

WebElement element = driver.findElement(By.xpath("//div//input[@name='ProductTags']/../ul"));

element.click();

Actions action = new Actions(driver);

action.sendKeys(element, "Iphone").build().perform();

action.sendKeys(Keys.TAB).build().perform();