Unable to clear textarea which auto inputs text on clear and blur using Selenium WebDriver

Question

I'm using Selenium WebDriver using Java. I'm having a textarea and I would like to clear default content and enter new content in it. Functionality is such that if I clear text from textarea and hit Tab button, then default text will auto fill. Below is HTML of textarea:

<textarea autocomplete="off" class="form-control rd-control rd-control--textarea empty" cols="20" data-bind="value: offerTitle, expandedTextArea: offerTitle, valueUpdate: 'afterkeydown', customerRequiredFieldsBinding" id="CheckoutWelcomeTitle" name="CheckoutWelcomeTitle" placeholder="ex. Here comes the best offer" rows="1" type="text" data-autosize-on="true" style="overflow-y: hidden; height: 35.9792px;" onblur="setTextColorDefault(this)" oninput="setTextColor(this)">Let's bid on a discount code!</textarea>

I tried using:

driver.findElement(By.id("CheckoutWelcomeTitle")).clear()

But this didn't work.
I also tried this:

driver.findElement(By.id("CheckoutWelcomeTitle")).sendKeys(Keys.CONTROL + "a") 
driver.findElement(By.id("CheckoutWelcomeTitle")).sendKeys(Keys.DELETE)

This sometimes works but not always. Sometimes it clears data and refills default text.

Is there any other way I can clear this textarea in a way that it would work every time?

In case if it helps, developers have used JavaScript to refill the text box on blur event.

Edit: I have used explicit wait with the condition of the element to be clickable.

In case the textarea is not cleared, do you get any exception? Or your code overwrites default content? If page is beeing loaded you always need to wait, f.e. to element is clickable, see org.openqa.selenium.support.ui.ExpectedConditions — pburgr, Feb 05 '19 at 12:01

score 3 · Accepted Answer · answered Feb 05 '19 at 12:23

3

Use Java Script executor it should work.

JavascriptExecutor executor = (JavascriptExecutor) driver;

executor.executeScript("document.getElementById('CheckoutWelcomeTitle').value=''");

answered Feb 05 '19 at 12:23

KunduK

32,888
5
17
41

score 0 · Answer 2 · answered Feb 05 '19 at 12:44

The desired element is a dynamic element so to locate the element you have to induce WebDriverWait for the element to be clickable and you can use either of the following Locator Strategies:

cssSelector:

WebElement myElement = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("textarea.form-control.rd-control.rd-control--textarea.empty#CheckoutWelcomeTitle")));
myElement.click();
myElement.clear();

xpath:

WebElement myElement = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//textarea[@class='form-control rd-control rd-control--textarea empty' and @id='CheckoutWelcomeTitle']")));
myElement.click();
myElement.clear();

score 0 · Answer 3 · answered Dec 21 '21 at 10:18

I think it's worth mentioning a solution that works without custom scripts; to take in account all the possible permutations of drivers and os, the most up-to-date solution to the problem is:

private fun clearField(element: WebElement) {
    element.sendKeys(Keys.chord(Keys.SHIFT, Keys.ARROW_UP), Keys.DELETE)
    element.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.DELETE)
    element.clear()
}

This is the quite redundant solution to the fact that clear does not always work, and to the fact that the first works on mac and the second on windows.
All the three combined has been tested also on react app with validation and input mask.

The namespace to import is import org.openqa.selenium.Keys.

This is an example code, to avoid stale elements you should not pass WebElements around.

Unable to clear textarea which auto inputs text on clear and blur using Selenium WebDriver

3 Answers3