javascript - 如何在 type=textbox 的 div 中输入文本？

Question

我正在尝试在类型为文本框的 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);

到目前为止，上面的代码能够成功输入文本，但是在单击“下一步”按钮时，文本没有被提交。任何帮助将不胜感激。

Answer 1

设置文本不是很好的做法，您可以直接输入文本。使用 CSS 路径 div[class='notranslate _5rpu'][role='textbox']

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