第22节：富文本框和editor编辑器的处理

一般输入框有三种：

1. 短的input框，如下：

   

   <input id="zenInput2" class="zenInputDemo" type="text" style="position: static;">
   

2. textarea框，如下：

   

   <textarea id="message1" name="message1"></textarea>

3. div式的editor框，如下： 
   

   
   

4. 也可能是更复杂的iframe的editor，如下： 
   

   
   

   下面依次看看这几种输入框该怎么解决：

   1. input

   其实这个只是列在这里，直接send_keys就行

   2.textarea

   很简单，定位到元素，直接send_keys就行。

   示例网址:http://www.sucaijiayuan.com/api/demo.php?url=/demo/20150325-1

   代码：

   # -*- coding: utf-8 -*-
   
   from selenium import webdriver
   from time import sleep
   
   driver = webdriver.Firefox()
   driver.get('http://www.sucaijiayuan.com/api/demo.php?url=/demo/20150325-1')
   driver.maximize_window()
   
   driver.switch_to.frame('iframe')
   
   driver.find_element_by_id('message1').send_keys('Hello world!')  # 很简单，直接send_keys就行
   sleep(2)
   
   print driver.find_element_by_id('message1').get_attribute('value')
   
   driver.quit()
      
      
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

   结果：

   Hello world!
      
      
   1

   3.div式的editor

   这种一样，定位到元素div，直接send_keys就行，不过这个send_keys不是到了‘value’属性中，而是在text中。

   示例网址:http://www.sucaijiayuan.com/api/demo.php?url=/demo/基于bootstrap的轻量级jQuery文本编辑器插件%20LineControl/index.html

   # -*- coding: utf-8 -*-
   
   from selenium import webdriver
   from time import sleep
   
   
   driver = webdriver.Firefox()
   driver.get('http://www.sucaijiayuan.com/api/demo.php?url=/demo/%E5%9F%BA%E4%BA%8Ebootstrap%E7%9A%84%E8%BD%BB%E9%87%8F%E7%BA%A7jQuery%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E6%8F%92%E4%BB%B6%20LineControl/index.html')
   driver.maximize_window()
   
   driver.switch_to.frame('iframe')
   
   driver.find_element_by_class_name('Editor-editor').send_keys('Hello world again!')  # 没什么区别，也是直接send_keys
   sleep(2)
   
   print driver.find_element_by_class_name('Editor-editor').text
   
   driver.quit()
      
      
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

   结果：

   Hello world again!
      
      
   1

   4.iframe中的editor

   这种是最复杂的一种，但要搞明白了，其实也很简单。

   示例网址：http://ueditor.baidu.com/website/examples/completeDemo.html

   代码：

   # -*- coding: utf-8 -*-
   
   from selenium import webdriver
   
   driver = webdriver.Chrome(executable_path='D:\py\AutoTestFramework\drivers\chromedriver.exe')
   driver.get('http://ueditor.baidu.com/website/examples/completeDemo.html')
   
   driver.switch_to.frame('ueditor_0')  # 注意，这种editor一定有frame，一定要切frame
   
   body_string = """Hello world again again!
   Hello world again again!
   Hello world again again!
   
   Hello world again again!"""
   
   driver.find_element_by_tag_name('body').send_keys(body_string)  # 直接往frame里的body里填内容，是不是很简单粗暴
   print driver.find_element_by_tag_name('body').text
   driver.quit()
      
      
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

   结果：

   Hello world again again!
      
      
   1

   其实frame editor的内容一般都是写在里面的body里，最重要的就是切到frame中去.frame中一般是一个空的html，其中显示的内容即是body中的内容。