Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to clear text input?

Tags:

I've been trying to fix this issue for a while now, none of the existing questions help. I'm using the node implementation of Selenium WebDriver, version ^4.0.0-alpha.1 and testing it on Chrome using the latest ChromeDriver.

I'm trying to clear the text of an <input/>, whose type="email". WebDriver has a built in command for this, but when I execute it the input doesn't clear (and there's no error):

// This populates the text field, no problem
driver.findElement(By.id("model-auth-email")).sendKeys("[email protected]");

// This is executed without error, but nothing happens, text field isn't cleared
driver.findElement(By.id("model-auth-email")).clear();

I can't use the CTRL+a & BACKSPACE method since I'm using a Mac and it would be CMD+a. And ChromeDriver has had (still unresolved) issues supporting the native OSX CMD button input for like 6 years, according the various threads I could find.

I could also do something like loop BACKSPACE inputs until it's cleared, though that's pretty hacky.

Any ideas on why .clear() is silently not working?

like image 674
Jayce444 Avatar asked Dec 10 '18 00:12

Jayce444


People also ask

How do you empty a textbox in JavaScript?

You can use the onfocus attribute in JavaScript to clear a textbox or an input box when somebody sets focus on the field. If you are using jQuery, then use the . focus() method to clear the field.


1 Answers

What seems to be working for us is to:

  1. Use JavaScript to execute the select() method of the <input> element.
  2. Then use Selenium WebDriver to send a BACKSPACE key.

Here's a clear function that will do just that:

async function clear(drv, web_elt) {
  await drv.executeScript(elt => elt.select(), web_elt);
  await web_elt.sendKeys(Key.BACK_SPACE);
}

Whereby:

  • drv is an instance of WebDriver
  • web_elt is an instance of WebElement
  • The anonymous function in executeScript is stringified and receives the <input> element wrapped in web_elt as a parameter

Find below a demo and the full code for it.


This is running on Node.js 11 with selenium-webdriver v4.
Make sure your chromedriver is in your PATH then run node index.js

enter image description here

// index.js
const path = require('path');
const wd = require('selenium-webdriver');
const {Key} = wd;

const driver =
  (new wd.Builder)
    .forBrowser(wd.Browser.CHROME)
    .build();

async function clear(drv, web_elt) {
  await drv.executeScript(elt => elt.select(), web_elt);
  await web_elt.sendKeys(Key.BACK_SPACE);
}

async function run(drv) {
  await drv.get('file://' + path.join(__dirname, 'index.html'));
  await drv.sleep(1000);
  await clear(drv, drv.findElement({css: 'input'}));
  await drv.sleep(1000);
  await clear(drv, drv.findElement({css: 'textarea'}));
  await drv.sleep(1000);
  await drv.quit();
}

run(driver);
<!-- index.html -->
<html>
  <body>
    <p>
      <input type="text" value="Hello World!"/>
    </p>
    <p>
      <textarea cols="30" rows="10">Hello World!</textarea>
    </p>
  </body>
</html>
like image 83
customcommander Avatar answered Nov 10 '22 01:11

customcommander