selenium+java-关于富文本编辑器的处理

     2022-04-04     444

关键词:

Selenium+java - 关于富文本编辑器的处理

什么是富文本编辑器?
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。具体长啥样,如下图:
技术图片

通过自动化操作富文本编辑器
模拟场景:在富文本编辑器中输入:欢迎关注公众号:软件测试君

1、通过键盘事件实现输入
具体代码如下:

 /**
     * 通过键盘事件实现输入操作
     */
    @Test
    public void testByActions() {
        driver.get("https://ueditor.baidu.com/website/onlinedemo.html");
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
        Actions actions = new Actions(driver);
        //鼠标通过tab要先移到富文本框中
        actions.sendKeys(Keys.TAB).perform();
        actions.sendKeys("欢迎关注公众号:软件测试君").perform();
    }

2、通过进入iframe实现输入操作
具体代码如下:

 @Test
    public void testBySwitchIframe() {
        driver.get("https://ueditor.baidu.com/website/onlinedemo.html");
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
        //进入富文本编辑器
        driver.switchTo().frame("ueditor_0");
        //输入文字
        driver.findElement(By.className("view")).sendKeys("欢迎关注公众号:软件测试君");
        //选中全部
        driver.findElement(By.className("view")).sendKeys(Keys.LEFT_CONTROL + "a");
        //跳出富文本编辑器
        driver.switchTo().defaultContent();
        //加粗操作
        driver.findElement(By.cssSelector(".edui-for-bold .edui-icon")).click();
    }

3、通过执行js实现输入操作
具体代码如下:


/**
     * 通过执行js实现输入操作
     */
    @Test
    public void testByJs() {
        driver.get("https://ueditor.baidu.com/website/onlinedemo.html");
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
        String content = "欢迎关注公众号:软件测试君";
        //ueditor_0为所在iframe的id
        String js = "document.getElementById(‘ueditor_0‘).contentDocument.write(‘" + content + "‘);";
        ((JavascriptExecutor) driver).executeScript(js);
    }

以上三种方法,都可在富文本编辑器实现输入操作,仅供参考,如果觉得好,可以关注我哦

EOF

本文作者:久曲建的测试窝
本文链接:https://www.cnblogs.com/longronglang/p/11326056.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
优秀不够,你是否无可替代

软件测试交流QQ群:721256703,期待你的加入!!

欢迎关注我的微信公众号:软件测试君
技术图片

selenium关于富文本的处理

由于项目需要,涉及到富文本的处理。百度了下,发现已经有人总结的很全了。大概思路如下:1.switch_to_frame2.find_element_by_tag_name(‘body‘).send_keys("123") 链接:http://blog.csdn.net/huilan_same/article/details/52386274  一般输入框有三种... 查看详情

如何在 selenium webdriver 的富文本编辑器中输入文本?

】如何在seleniumwebdriver的富文本编辑器中输入文本?【英文标题】:HowtoEntertextinrichtexteditorinseleniumwebdriver?【发布时间】:2017-02-2217:28:02【问题描述】:我们的应用程序中有一个富文本编辑器,我们正在使用selenium对其进行自动化... 查看详情

selenium2+python自动化24-js处理富文本(带iframe)

前言   上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一、加载配置   1.打开博客园写... 查看详情

selenium2+python自动化24-js处理富文本(带iframe)

前言   上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一、加载配置   1.打开博客园写... 查看详情

selenium2+python自动化24-js处理富文本(带iframe)转载

前言   上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一、加载配置   1.打开博客园写... 查看详情

关于富文本编辑器ueditor

             2017.1.18,星期三?    关于富文本编辑器:    富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。 查看详情

selenium4+python3系列-cookie截图单选框及复选框处理富文本框日历控件操作(代码片段)

我所在的城市昨天出了近20+的阳性案例,但这丝毫没有“影响”到996的工作时间,当然,也没有影响到我想继续更新文章的决心。一、cookie常用操作入门上一篇有写过关于cookie的实战案例,个人觉得没有很好地照顾到入门同学的... 查看详情

关于富文本编辑器

在CSDN上写博客已经有几年了,一直在用markdown编辑器,感觉还不错。今年开了公众号后感觉公众号中的编辑器挺不错,接近“所见即所得”,不像markdown编辑一样分开两部分进行。而且编写的文章更加适合在手机... 查看详情

关于百度富文本编辑器uedit的初始化内容失败问题

百度富文本编辑器毫无疑问是强大的,但也会出问题。这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题。我们使用varue=UE.getEditor(‘editor‘,{});创建实例。并使用ue.setContent("HellloWorld!");初始化内容。但是有时候初始... 查看详情

使用selenium爬虫抓取数据(代码片段)

...出的数据进行处理。他的需求是将文章直接导入到富文本编辑器去发布,其实这也是爬虫中的一种。其实这也并不难,就是UI自动化的过程,下面让我们开始吧。准备工具/原料1、java语言2、 查看详情

关于富文本编辑器的一些使用问题

1.在使用ueditor的过程中老是报如下的错误信息 在期间想了各种办法解决,现在大致总结一下第一步:设置好路径 在editor.api.js下面也设置一下路径,要跟自己的项目路径对应  然后第二步:关键一步  http://w... 查看详情

原关于百度富文本编辑器的使用心得

...的数据库中添加新字段,修改后台代码用创建更多ueditor编辑器的新实例(一个字段对应一个实例)。编辑时从数据库中取出数据到ueditor编辑器中这里要说的就是我在从数据库中取出内容到编辑器中踩过的坑 1.实例名.getContent... 查看详情

轻量级富文本编辑器quilleditor结合iview的使用

...ue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,有... 查看详情

富文本编辑器怎么做到防注入

参考技术A只适合在小应用中,并且处理范围非常有限,简单一点就是过滤/转义,在这我就不多说了,其实方法是非常多。我今天主要讲关于架构方面的知识:你google一下,了解下WAF(Web应用防火墙),主要有两方面的:软件角度... 查看详情

富文本编辑器怎么用

参考技术A富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简... 查看详情

关于实现quill(富文本编辑器)初始化数据时自定义属性被清除的问题

...是个坑。。1、刚一开始,我用了项目原本使用的富文本编辑器vue-html5-editor,但发现并不能实现不编辑文字又能改样式,这时的我还没有意识到事情的严重性,以为只是个例,于是我又找了另一款富文本编辑器。2、wangeditor是一款... 查看详情

处理文本的设计模式

...】:2011-10-2513:14:47【问题描述】:我正在开发一个富文本编辑器,我想研究一些。我知道那里有很多编辑,我认为存在一些好的模式。但是,我很难找到好的资源。有没有关于这个主题的好书?具有良好代码且易于阅读的开源项... 查看详情

ASP.NET MVC 富文本编辑器 [关闭]

】ASP.NETMVC富文本编辑器[关闭]【英文标题】:ASP.NETMVCRichTextEditor[closed]【发布时间】:2010-11-0610:39:06【问题描述】:目标此wiki条目的目标是为错误的传统网站创建一个可用富文本编辑器的综合列表。传统的我们指的是任何不是带... 查看详情