如何在具有type = textbox的div中输入文本?

时间:2019-03-29 03:47:29

标签: javascript c# jquery selenium selenium-chromedriver

我正在尝试在类型为文本框的div中输入文本。

在输入文本之前,请参考下面元素的HTML代码段:

<div class="_5yk2" tabindex="-1">
   <div class="_5rp7">
      <div class="_1p1t">
         <div class="_1p1v" id="placeholder-fr28f" style="white-space: pre- 
            wrap;">Describe your item (optional)
         </div>
      </div>
      <div class="_5rpb">
         <div aria-autocomplete="list" aria-controls="js_1jt" aria- 
            describedby="placeholder-fr28f" aria-multiline="true" class="notranslate 
            _5rpu" data-testid="status-attachment-mentions-input" role="textbox" 
            spellcheck="true" style="outline: currentcolor none medium; -moz-user- 
            select: text; white-space: pre-wrap; overflow-wrap: break-word;" 
            contenteditable="true">
            <div data-contents="true">
               <div class="" data-block="true" data-editor="fr28f" data-offset- 
                  key="496vr-0-0">
                  <div data-offset-key="496vr-0-0" class="_1mf _1mj">
                     <span data-offset-key="496vr-0-0">
                     <br data-text="true">
                     </span>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

输入文字后,其外观如下:

<div class="_5yk2" tabindex="-1">
   <div class="_5rp7">
      <div class="_5rpb">
         <div aria-autocomplete="list" aria-controls="js_1jt" aria- 
            describedby="placeholder-fr28f" aria-multiline="true" class="notranslate 
            _5rpu" data-testid="status-attachment-mentions-input" role="textbox" 
            spellcheck="true" style="outline: currentcolor none medium; -moz-user- 
            select: text; white-space: pre-wrap; overflow-wrap: break-word;" 
            contenteditable="true">
            <div data-contents="true">
               <div class="" data-block="true" data-editor="fr28f" data-offset- 
                  key="496vr-0-0">
                  <div data-offset-key="496vr-0-0" class="_1mf _1mj">
                     <span data-offset-key="496vr-0-0">
                     <span data-text="true">abhinandan</span>
                     </span>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

因此,我尝试使用innerHTML按HTML更改设置值,如下所示:

WebDriverWait waitForDiv= new WebDriverWait(driver,TimeSpan.FromSeconds(10));
var Ele = driver.FindElement(By.XPath("/html/body/div[6]/div[2]/div/div/div/div/div[2]/div/div/div[1]/div[5]/div[1]/div/div/div/div/div[2]/div/div/div/div"));
Ele.Click();
Thread.Sleep(2000);
IWebElement myElementRemoveDiv = driver.FindElement(By.CssSelector("._1p1t"));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].parentNode.removeChild(arguments[0])", myElementRemoveDiv);
IWebElement myElement = driver.FindElement(By.CssSelector("._1mf > span:nth-child(1)"));
String StrInnerHtml = "<span data-text=\"true\">Entering text</span>";
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].innerHTML=" + "'" + StrInnerHtml + "'", myElement);

到目前为止,上面的代码可以成功输入文本,但是单击“下一步”按钮后,文本将无法提交。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

设置文本不是一种好习惯,而是可以直接输入文本。使用CSS路径div[class='notranslate _5rpu'][role='textbox']

IWebElement textbox = driver.FindElement(By.CssSelector("div[class='notranslate _5rpu'][role='textbox']"));
textbox.SendKeys("desired_text");

答案 1 :(得分:0)

尝试将密钥发送到以下元素。

IWebElement textBox = driver.FindElement(By.CssSelector("[data-offset-key='496vr-0-0']"));
textBox.SendKeys("here goes your value")

然后检查“下一步”按钮是否正常工作。

如果这样做没有帮助,请使用以下JavaScript在元素上触发onchange / keypress事件。

要触发onchange事件:

((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].dispatchEvent(new Event('change', {'bubbles': true,'cancelable': true}));",textBox);

要触发按键事件:

((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].dispatchEvent(new Event('keypress', {'bubbles': true,'cancelable': true}));",textBox);

基本上,您必须找出关联的事件,然后调度该事件。只需根据您的元素关联更改事件即可。