如何清除javascript中隐藏的输入值？答案

【问题标题】：How to clear hidden input value in javascript?如何清除javascript中隐藏的输入值？
【发布时间】：2019-10-03 15:07:39
【问题描述】：

await browser.executeScript("document.querySelector(\"body > moo-shell > auto-app\").shadowRoot.querySelector(\"section > auto-farms\").shadowRoot.querySelector(\"section:nth-child(2) > auto-farm\").shadowRoot.querySelector(\"section:nth-child(2) > auto-barn\").shadowRoot.querySelector(\"div > section:nth-child(1) > vaadin-text-field\").shadowRoot.querySelector(\"div > div:nth-child(2) > slot:nth-child(2) > input\").click();").then(function () {
    console.log("Barn name text box is clicked")
  })
  await browser.executeScript("document.querySelector(\"body > moo-shell > auto-app\").shadowRoot.querySelector(\"section > auto-farms\").shadowRoot.querySelector(\"section:nth-child(2) > auto-farm\").shadowRoot.querySelector(\"section:nth-child(2) > auto-barn\").shadowRoot.querySelector(\"div > section:nth-child(1) > vaadin-text-field\").shadowRoot.querySelector(\"div > div:nth-child(2) > slot:nth-child(2) > input\").value = \"\";").then(function () {
    browser.executeScript("document.querySelector('body > moo-shell > auto-app').shadowRoot.querySelector('section > auto-farms').shadowRoot.querySelector('section:nth-child(2) > auto-farm').shadowRoot.querySelector('section:nth-child(2) > auto-barn').shadowRoot.querySelector('div > section:nth-child(1) > vaadin-text-field').shadowRoot.querySelector('div > div:nth-child(2) > slot:nth-child(2) > input').value = 'Automated Test Barn';");
  })
  await browser.sleep(5000);
await browser.executeScript("document.querySelector(\"body > moo-shell > auto-app\").shadowRoot.querySelector(\"section > auto-farms\").shadowRoot.querySelector(\"section:nth-child(2) > auto-farm\").shadowRoot.querySelector(\"section:nth-child(2) > auto-barn\").shadowRoot.querySelector(\"div > section.tanks > auto-tanks-field\").shadowRoot.querySelector(\"div.row-wrapper > div.row > vaadin-text-field\").shadowRoot.querySelector(\"div > div:nth-child(2) > slot:nth-child(2) > input\").click();").then(function () {
    console.log("Tanks text box is clicked");
  })

//尝试先点击文本框，然后清除其隐藏值“”并发送新值。

【问题讨论】：

是的，它是一个影子 DOM。
请看附图。谢谢。它是一个影子 DOM。我正在使用 document.executescript...... 来做 click(),innerText() 使用量角器进行测试。

标签： javascript protractor shadow-dom

【解决方案1】：

设定值

let setValue = function ($element, value){
  return browser.executeScript(
    `arguments[0].value = ${value};`,
    $element.getWebElement()
  )
}

即使不可见也可以点击元素

let jsClick = function ($element){
  return browser.executeScript(
    "arguments[0].click();",
    $element.getWebElement()
  )
}

【讨论】：