How to clear hidden input value in javascript?

Question

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");
  })

//Trying to click textbox first,then clear its hidden value "" and send new value.

please see the attached picture.thanks.Its a shadow DOM.And i am using document.executescript...... to do click(),innerText() to perform testing using protractor. — sudeep, Oct 03 '19 at 15:18

score 0 · Answer 1 · answered Oct 03 '19 at 16:01

Set value

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

click on element even if invisible

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

How to clear hidden input value in javascript?

1 Answers1