如何清除文本输入？答案

【问题标题】：How to clear text input?如何清除文本输入？
【发布时间】：2020-12-02 04:38:48
【问题描述】：

我已经尝试解决这个问题一段时间了，现有的问题都没有帮助。我正在使用 the node implementation of Selenium WebDriver，版本 ^4.0.0-alpha.1 并使用最新的 ChromeDriver 在 Chrome 上对其进行测试。

我正在尝试清除 <input/> 的文本，其 type="email"。 WebDriver 为此有一个built in command，但是当我执行它时，输入不清除（并且没有错误）：

// This populates the text field, no problem
driver.findElement(By.id("model-auth-email")).sendKeys("test@gmail.com");

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

我不能使用 CTRL+a & BACKSPACE 方法，因为我使用的是 Mac，它会是 CMD+a。根据我能找到的各种线程，ChromeDriver 支持本机 OSX CMD 按钮输入的问题（仍未解决）已有 6 年之久。

我还可以执行诸如循环 BACKSPACE 输入之类的操作，直到它被清除为止，尽管这很 hacky。

关于为什么 .clear() 无法正常工作的任何想法？

【问题讨论】：

你确定你发布了正确的 github 链接吗？
@shkaper 是的，这是正确的

标签： javascript node.js selenium-webdriver selenium-chromedriver

【解决方案1】：

似乎对我们有用的是：

使用 JavaScript 执行 <input> 元素的 select() 方法。
然后使用 Selenium WebDriver 发送 BACKSPACE 键。

这里有一个 clear 函数可以做到这一点：

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

在哪里：

drv 是 WebDriver 的一个实例
web_elt 是 WebElement 的一个实例
executeScript 中的匿名函数被字符串化并接收包裹在web_elt 中的<input> 元素作为参数

在下面找到一个演示及其完整代码。

这是在带有 selenium-webdriver v4 的 Node.js 11 上运行的。
确保您的 chromedriver 在您的 PATH 中，然后运行 node index.js

// 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>

【讨论】：

我尝试了很多不同的方法，但这是唯一适用于 Mac + Chrome 的方法。谢谢！

【解决方案2】：

我遇到了同样的问题，.clear() 或 CTRL+'a' 对我不起作用，这个效果很好：

driver.execute_script("arguments[0].value = '';", text_input)

【讨论】：

【解决方案3】：

来自Webdriver文档，findElement会返回一个promise，所以你可以试试：

driver.findElement(By.id("model-auth-email"))
  .then((el) => {
  el.clear()
  })
  .catch(e => {
    throw e; 
  });

【讨论】：

是的，我最初就这样尝试过，我没有在我的问题中使用 promise 语法，因为我使用 async/await 和/或将测试设置为以稍微不同的方式工作链接一堆，最后只有.then()。但是，是的，尝试了你的建议，它仍然不起作用:(
“model-auth-email”是否正确？也许您可以尝试使用 xpath 或 css 选择器找到此元素...
没错，因为它首先会找到要填充的元素。它可以添加文本，只是不清除它