如何在python中使用Selenium Webdriver将内容设置为mut-rte？

Question

我在react项目中使用多格式RTF编辑器（https://github.com/niuware/mui-rte）。写硒Webdriver集成测试时，我不知道如何在rte输入区域输入文本。

据我所正确理解，mui-rte是draftjs的Materia-ui包装器。反应代码很简单：

<MUIRichTextEditor
        onChange={onChange}
        value={initial}
        {...rest}
/ >

这将生成以下html元素：

<div id="mui-rte-container" class="MUIRichTextEditor-container-73">
<div id="mui-rte-toolbar" class="MUIRichTextEditor-toolbar-84">
    ...
</div>
<div id="mui-rte-editor" class="MUIRichTextEditor-editor-75">
    <div id="mui-rte-editor-container" class="MUIRichTextEditor-hidePlaceholder-79 MUIRichTextEditor-editorContainer-76">
        <div class="DraftEditor-root">
            <div class="DraftEditor-editorContainer">
                <div aria-describedby="placeholder-9mnek" class="notranslate public-DraftEditor-content" role="textbox" spellcheck="false" style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word" contenteditable="true">
                    <div data-contents="true"><div class="" data-block="true" data-editor="7kjuh" data-offset-key="8a2rc-0-0">
                        <div data-offset-key="8a2rc-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
                            <span data-offset-key="8a2rc-0-0">
                                <br data-text="true">
                            </span>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我可以轻松找到任何元素，但是当我尝试例如时：

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait # available since 2.4.0
from selenium.webdriver.support import expected_conditions as EC # available since 2.26.0
from selenium.webdriver.common.by import By

rte_editor = WebDriverWait(self.driver, 2).until(
        EC.presence_of_element_located((By.ID, id))
    )
rte_input = bio_rte.find_element_by_xpath("//div[@role='textbox']")
rte_input.send_keys("Hello")

我得到：

E       selenium.common.exceptions.ElementNotInteractableException: Message: Element <div class="notranslate public-DraftEditor-content"> is not reachable by keyboard

包含我尝试过的所有元素。

用python中的selenium-webdriver将文本输入到draft.js rte的正确方法是什么？我对selenium + webdriver还是很陌生，无论在python，JavaScript还是其他类型的selenium-webdriver API中，任何帮助都将不胜感激。

我在这里有一个示例项目：https://github.com/vessper/formik-mui-rte-example

Answer 1

所需的元素是启用了ReactJS的元素，因此要定位并发送字符序列到必须为element_to_be_clickable()引入WebDriverWait的元素，您可以使用以下任一解决方案：

• 使用CSS_SELECTOR：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.notranslate.public-DraftEditor-content[role='textbox']"))).send_keys("Vess_Perfanov")
  

• 使用XPATH：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='notranslate public-DraftEditor-content' and @role='textbox']"))).send_keys("Vess_Perfanov")
  

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

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