selenuim操做基于REACT实现的富文本编辑器1

web中大多数的输入框都是<input>标签，可是因为业务中前端有使用到基于REACT实现的富文本编辑器，在实现自动化测试编写时天然会涉及到对富文本器进行操做处理

检查该编辑器的html元素，能够看到和正常的<input>不一样，该结构为一个<div>里面裹了个<span>

而在其中输入文字，则是在改变<span>中<span>的text(),若是有换行的话则生成多个<div>和<span>

接下来涉及到使用 selenium 去操做富文本编辑器，seleuim的基本使用就不在本篇进行说明，首先要定位进行输入，普通的<input>通常使用.sned_keys方法轻松实现输入，这里对<div>使用.sned_keys方法仍然能够生效，不过定位<div>时根据html结构须要对最外层<div>进行操做，才能够正常输入 （ps、也可使用from selenium.webdriver.common.keys import Keys进行键盘操做）

第二步，涉及到对输入的文字进行删除操做，这一步也是让我感到很是纳闷的地方，正常的<input>自带有.clear()方法，轻松对文字进行清理，可是在这里，不管我是对<div>仍是<span>仍是最外层的<div>使用clear()方法，在UI界面上能看到文字有被正常清楚，html中的文字也正常被清除，可是一旦的点击保存或者，继续用.sned_keys增长文字，刚才clear的内容就会再次出现。

最后和前端小哥哥讨论，发现多是REACT框架致使，该框架采用的是view和model绑定的模型，clear操做仅仅清除了view层的内容，实际数据仍是存在，因此不可以清除，要想同时清除view和model的话仍是须要触发键盘事件

知道了大概缘由后，代码就好写不少了，直接seleuim直接定位到<div>，而后根据字符串长度调用键盘删除键send_keys(Keys.BACK_SPACE)

最后贴上很挫的python代码

content_input = dr.find_element_by_xpath("//div[@role='textbox']")
        content_input.click()
        for key in change_name:
            content_input.send_keys(Keys.BACK_SPACE)

        content_input.send_keys(change_content)