reactjs - 如何在 python 中使用 selenium webdriver 将内容设置为 mui-rte?
问题描述
我在 react 项目中使用 mui-rte 富文本编辑器( https://github.com/niuware/mui-rte )。在编写 selenium 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
更新:
包括来自错误的堆栈跟踪:
self = <test.TestBase testMethod=test_input_text_in_rte>
def test_input_text_in_rte(self):
rte_input = WebDriverWait(self.driver, 20).until(
EC.element_to_be_clickable(
> (By.XPATH, '//div[@class="notranslate public-DraftEditor-content" and @role="textbox"]'))
)
test.py:25:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
self = <selenium.webdriver.support.wait.WebDriverWait (session="38c21bf5-27ea-499d-9831-e8755a10f57a")>
method = <selenium.webdriver.support.expected_conditions.element_to_be_clickable object at 0x7f7115fe7198>, message = ''
def until(self, method, message=''):
"""Calls the method provided with the driver as an argument until the \
return value is not False."""
screen = None
stacktrace = None
end_time = time.time() + self._timeout
while True:
try:
value = method(self._driver)
if value:
return value
except self._ignored_exceptions as exc:
screen = getattr(exc, 'screen', None)
stacktrace = getattr(exc, 'stacktrace', None)
time.sleep(self._poll)
if time.time() > end_time:
break
> raise TimeoutException(message, screen, stacktrace)
E selenium.common.exceptions.TimeoutException: Message:
../../../.virtualenvs/ml2/lib/python3.7/site-packages/selenium/webdriver/support/wait.py:80: TimeoutException
================================================================= 1 failed in 24.70s ==================================================================
解决方案
在我的例子中,它是一个带有contenteditable div的draft.js富文本编辑器
async sendKeysToContentEditableDiv(element, text) {
const script = `var txtarea = arguments[0],txt = arguments[1];
txtarea.dispatchEvent(new Event("focus"));
var txtEvt = document.createEvent("TextEvent");
txtEvt.initTextEvent("textInput", true, true, null, txt);
txtarea.dispatchEvent(txtEvt);
txtarea.dispatchEvent(new Event("blur"));`;
await this.driver.executeScript(script, element, text);
}
推荐阅读
- python - 从 Viewset 数据更新 DRF 序列化程序中的只读字段
- android - 我没有导入 Recycler View AndroidX Library,但我正在使用它。为什么以及它是如何工作的?
- node.js - 无法将 Babel 7 与 Jest 一起使用
- reactjs - 在 reactjs 或 react-native 中定义/初始化状态的正确方法
- sql - 如果我在列上使用 SQLite 自动增量,它会自动维护该列的索引吗?
- java - 确定 Oracle 中接下来 5 个可用的自然/业务键或使用 Spring REST API
- spring - 春季启动@ConfigurationProperties 不起作用
- terminal - 设置鱼壳配置文件
- python - 交换二进制数列表,但只有 x 长度
- javascript - 在 PolymerJs 中,值变化不反映在 html 上