十六 富文本输入框

一、input标签

1.input标签是对短文本的操作。如百度首页的输入框。值存在于value中。进入控制界面输入命令

image.png

给value赋值方法：driver.find_element_by_id("kw").send_keys("eqweqeq")

二、textarea标签

1.以博客园评论区为例。通过js获取value值。

博客园的输入框的值也是保存在value当中 和百度输入框不同，虽然百度输入框中的文本值也是存在value中，但它可以通过send_keys的方法来发送值，但这种必须要用到js

from selenium import webdriver
import time
import os

#实例化ChromeOptions
option = webdriver.ChromeOptions()
#加载用户配置 绕过登录
option.add_argument(f"--user-data-dir={os.path.expanduser("~")}\\AppData\\Local\\Google\\Chrome\\User Data")

driver = webdriver.Chrome(chrome_options=option)
driver.maximize_window()
driver.get("https://www.cnblogs.com/simran/p/9259467.html")
time.sleep(2)

#定位评论富文本框
ele_textarea = driver.find_element_by_id("tbCommentBody")
#聚焦
driver.execute_script("arguments[0].focus();",ele_textarea)
time.sleep(2)

#执行js语句
driver.execute_script("arguments[0].value=‘test selenium‘",ele_textarea)
time.sleep(2)
driver.find_element_by_id("btn_comment_submit").click()
time.sleep(5)

driver.quit()

三、div的editor标签

比如QQ邮箱写邮件，因此这种也采用的是 send_keys的方法，只不过这个值不在value属性中，而是在text中

image.png

ifram种的editor标签

我们可以看到，内容为空时，直接定位到了body，再仔细看看，原来还有个iframe

image.png

有了内容之后，标签下会自动加一些

标签，文本内容就在

标签的text中

image.png

所以，对于这种情况，先切换到iframe，再向标签直接send_keys，简单粗暴

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://ueditor.baidu.com/website/examples/completeDemo.html")
time.sleep(2)

#通过id切换到iframe
driver.switch_to.frame("ueditor_0")
content = """This is a test content!
             This is a test content!
             This is a test content!
          """
driver.find_element_by_tag_name("body").send_keys(content)
print(driver.find_element_by_tag_name("body").text)

image.png

另外一个iframe的例子
在使用Selenium测试一些CMS后台系统时，有时会遇到一些富文本框，如下图所示：

image.png

整个富文本编辑器是通过iframe嵌入到网页中的，手动尝试输入内容，发现内容是输入到iframe页面的body中的，

这种富文本框怎么输入呢？
我们也可以直接在body的源码上点击右键选择Edit HTML,输入相应的html代码，达到向富文本框输入的目的，如下下图

image.png

以下是使用Selenium的操作方法

只输入纯文本#

如果只输入不带格式的纯文本，可以先切换到这个iframe,然后定位到body,send_keys相应的文本即可，代码如下：

from selenium import webdriver
dr = webdriver.Chrome()

dr.get('http://www.vemmis.com/bjq/index.html')

dr.switch_to.frame('ueditor_0')
dr.find_element('tag name', 'body').send_keys('hello')

运行完如图

image.png

通过JS注入HTML代码

如果想输入带html格式的文本可以通过js注入，代码如下：

from selenium import webdriver
dr = webdriver.Chrome()

dr.get('http://www.vemmis.com/bjq/index.html')

js = "document.querySelector('#ueditor_0').contentDocument.querySelector('body').innerHTML='
Hello
'"
dr.execute_script(js)

• js脚本中document代表整个文档对象
• querySelector()中使用css selector语法定位到这个iframe框架
• 使用contentDocument获取到iframe的文档对象
• 使用querySelector定位到body节点，修改其内部的html代码
  结果如图
  
  image.png