当前位置: 首页 > 知识库问答 >
问题:

如何在Python中使用selenium webdriver将内容设置到mui-rte中?

江衡
2023-03-14

我正在一个react项目中使用mui-rte富文本编辑器(https://github.com/niuware/mui-rte)。我不知道在编写selenium webdriver集成测试时如何将文本输入rte输入区域。

正如我正确理解的,mui-rte是DraftJS的materia-ui包装器。react代码简单地说是:

<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>

null

我可以很容易地找到任何元素,但当我尝试这样做时,例如:

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 ==================================================================

共有1个答案

公孙宏远
2023-03-14

在我的示例中,它是一个带有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);
}
 类似资料:
  • 问题内容: 我想通过服务器客户端JSP页面获取内容大小。但是request.getContentLength()总是返回-1,我为什么不呢? Android程式码片段: 问题答案: 您正在使用conn.setChunkedStreamingMode(100),当content- lenght事先未知时,它将有效地启用100字节块中的块传输编码。 如果事先知道要在请求正文中发送的内容的长度,请使用c

  • 问题内容: 我正在使用Flask,并且从get请求返回一个XML文件。如何将内容类型设置为xml? 例如 问题答案: 尝试这样: 实际的Content-Type基于mimetype参数和字符集(默认为UTF-8)。

  • 问题内容: 我如何在seleniumwebdriver 3.0 beta版本中使用geckodriver。当我实例化Firefox时: 我得到错误: 线程“主”中的异常java.lang.IllegalStateException:驱动程序可执行文件的路径必须由webdriver.gecko.driver系统属性设置;否则,必须执行以下操作:有关更多信息,请参见 https://github.co

  • 我正在使用Flask,并从get请求返回一个XML文件。如何将内容类型设置为xml? 例如。

  • 问题内容: 我正在尝试将目录及其所有内容复制到已经存在的路径。问题是,在os模块和shutil模块之间,似乎没有办法做到这一点。该函数期望目标路径事先不存在。 我要寻找的确切结果是将整个文件夹结构复制到另一个文件夹结构上,对发现的所有重复文件都进行无提示覆盖。在开始编写自己的函数来执行此操作之前,我想我想问一下是否有人知道执行此操作的现有食谱或代码段。 问题答案: 做你想要的。 将整个目录树src

  • 我将tinymce编辑器的内容保存在MySQL表中,并希望将从数据库中检索到的相同内容粘贴回编辑器中。 我使用html实体()函数对输入进行编码,并将其保存到数据库中然后在显示内容之前使用html_entity_decode()解码内容。 我面临两个问题: 如何将此内容显示为html,而不仅仅是文本? 我还想用从数据库中检索到的值设置tinyEditor的内容。这段代码片段做到了这一点(取自小博客