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

since1986 发布于2019-07-30 17:03 / 1643人阅读

摘要：中大多数的输入框都是标签，但是由于业务中前端有使用到基于实现的富文本编辑器，在实现自动化测试编写时自然会涉及到对富文本器进行操作处理检查该编辑器的元素，可以看到和正常的不同，该结构为一个里面裹了个而在其中输入文字，则是在改变中的如果有换行的

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

检查该编辑器的html元素，可以看到和正常的不同，该结构为一个

里面裹了个

而在其中输入文字，则是在改变中的text(),如果有换行的话则生成多个

和

接下来涉及到使用 selenium 去操作富文本编辑器，seleuim的基本使用就不在本篇进行说明，首先要定位进行输入，普通的一般使用.sned_keys方法轻松实现输入，这里对

使用.sned_keys方法仍然可以生效，不过定位

时根据html结构需要对最外层

进行操作，才可以正常输入（ps、也可以使用from selenium.webdriver.common.keys import Keys进行键盘操作）

第二步，涉及到对输入的文字进行删除操作，这一步也是让我感到非常纳闷的地方，正常的自带有.clear()方法，轻松对文字进行清理，但是在这里，无论我是对

还是还是最外层的

使用clear()方法，在UI界面上能看到文字有被正常清楚，html中的文字也正常被清除，但是一旦的点击保存或者，继续用.sned_keys增加文字，刚才clear的内容就会再次出现。

最后和前端小哥哥讨论，发现可能是REACT框架导致，该框架采用的是view和model绑定的模型，clear操作仅仅清除了view层的内容，实际数据还是存在，所以不能够清除，要想同时清除view和model的话还是需要触发键盘事件

知道了大概原因后，代码就好写很多了，直接seleuim直接定位到

，然后根据字符串长度调用键盘删除键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)

服务器托管私有云 react实现轮播图富文本编辑器 linux文本编辑器富文本web编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41986.html

react 搭建博客---支持markdown的富文本编辑器

摘要：最近在学，准备配合搭个博客，找了很多富文本编辑器，都不是很适合用，后来看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面简洁大方还有预览功能。最近在学nodejs，准备配合react+mongodb搭个博客，找了很多富文本编辑器，都不是很适合react用，后来看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
一款基于vue好用的富文本编辑器Froala WYSIWYG Editor

摘要：前言基于使用过几款富文本编辑器趟过坑，但是这几款总感觉不是那么适合项目需求，苦苦搜寻总算找到一款好用的富文本编辑器支持特性快速预览使用废话不多说，开始撸代码安装引入引入引入中文语言包引入此处可在中引入地址前言：基于Vue使用过几款富文本编辑器：wangEditorvue-quill-editorvue2-editor 趟过坑，但是这几款总感觉不是那么适合项目需求，苦苦搜寻总算找到一...

adam1q84 2019-08-23 12:12 评论0 收藏0
selenuim-下拉框（单选）-python

摘要：一通过定位下拉框先导入的模块，在使用方法进行操作方法一定位不等于不等于如果选项值不是固定的，直接将固定值替换成变量即可下面是的具体方法通过索引定位通过值定位通过文本值定位取消所有选项取消对应选项取消对应选项取消对应文本选项返回第一个选 showImg(https://segmentfault.com/img/bVbk4IA);一、通过select定位下拉框先导入Select的模块，在使...

KevinYan 2019-07-30 18:39 评论0 收藏0