如何修改 contenteditable 元素的 innerHTML

【问题标题】：How to modify the innerHTML of a contenteditable element如何修改 contenteditable 元素的 innerHTML
【发布时间】：2018-10-21 10:39:03
【问题描述】：

我正在使用 Selenium 和 Chrome 驱动程序和 python3.6 来测试一个网站。我在网页中有代码 sn-p 如下：

<div tabindex="-1" class="_3F6QL _2WovP">
<div class="_39LWd" style="visibility: visible;">Type a message</div>
<div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true">*******</div>
</div>

我想在网页中使用 Selenium 将 ******* 替换为 Hello World!。我怎么做？

【问题讨论】：

stackoverflow.com/questions/35922259/…
Modify innerHTML using selenium的可能重复
请参阅：How do I do X? SO 的期望是，提出问题的用户不仅会进行研究以回答他们自己的问题，还会分享该研究、代码尝试和结果。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask

标签： python selenium

【解决方案1】：

要将文本 ******* 替换为文本 Hello World!，因为元素是 React 元素，您需要诱导 WebDriverWait 以使 元素可点击您可以使用以下任一解决方案：

使用CSS_SELECTOR：

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.copyable-text.selectable-text[data-tab='1']")))
element.click()
element.clear()
element.send_keys("Hello World!")

使用XPATH：

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'selectable-text')][contains(.,'*******')]")))
element.click()
element.clear()
element.send_keys("Hello World!")

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

【讨论】：