选择、操作web元素-3

11月5日

Selenium 作业 3

登录 51job ，
http://www.51job.com

输入搜索关键词 "python"， 地区选择 "杭州"（注意，如果所在地已经选中其他地区，要去掉），
搜索最新发布的职位， 抓取页面信息。 得到如下的格式化信息

Python开发工程师 | 杭州纳帕科技有限公司 | 杭州 | 0.8-1.6万/月 | 04-27
Python高级开发工程师 | 中浙信科技咨询有限公司 | 杭州 | 1-1.5万/月 | 04-27
高级Python开发工程师 | 杭州新思维计算机有限公司 | 杭州-西湖区 | 1-1.5万/月 | 04-27

参考答案，往下翻

方法一

# coding:utf8
from selenium import webdriver

driver = webdriver.Chrome(r"d:\tools\webdrivers\chromedriver.exe")
# 别忘了设置
driver.implicitly_wait(10)

# 抓取信息
driver.get('http://www.51job.com')

driver.find_element_by_id('kwdselectid').send_keys('python')
# 点击工作地点
driver.find_element_by_id('work_position_input').click()

# 选择所有城市，去掉非杭州的且选择杭州，
# 如果是杭州但是没有选，选上这些城市
cityEles = driver.find_elements_by_css_selector('#work_position_click_center_right em')

for one in cityEles:
    cityName = one.text
    selected = one.get_attribute('class')
    # print cityName,seleted

    if cityName == u'杭州':
        if selected != 'on':
            one.click()

    else:
        if selected == 'on':
            one.click()

# 保存城市选择
driver.find_element_by_id('work_position_click_bottom_save').click()

# 点击搜索
driver.find_element_by_css_selector('.ush  button').click()

# 搜索结果分析
jobs = driver.find_elements_by_css_selector('#resultList  div.el')  div同时class为el，不能有空格，表示&关系

for job in jobs:
    # 去掉第一行：标题行
    if 'title' in job.get_attribute('class'):
        continue

    filelds = job.find_elements_by_tag_name('span')
    strField = [fileld.text for fileld in filelds]
    print (' | '.join(strField))

driver.quit()

方法二

# coding:utf8
from selenium import webdriver

driver = webdriver.Chrome(r"d:\tools\webdrivers\chromedriver.exe")
driver.implicitly_wait(10)

driver.get('http://www.51job.com')

driver.find_element_by_id('kwdselectid').send_keys('python')
driver.find_element_by_id('work_position_input').click()

# 选择城市，去掉非杭州的，选择杭州
selectedCityEles = driver.find_elements_by_css_selector('#work_position_click_center em[class=on]')

for one in selectedCityEles:
    one.click()

driver.find_element_by_id('work_position_click_center_right_list_category_000000_080200').click()

# 保存城市选择
driver.find_element_by_id('work_position_click_bottom_save').click()
driver.find_element_by_css_selector('div.ush > button').click()

# 搜索结果分析
jobs = driver.find_elements_by_css_selector('#resultList div[class=el]')
for job in jobs:

    fields = job.find_elements_by_tag_name('span')
    stringFilelds = [field.text for field in fields]
    print (' | '.join(stringFilelds))

driver.quit()

子元素（child）选择器

选择元素的子元素，

　　和后代选择器不同：#choose_car  option;  option不一定是子元素

　　比如 #choose_car > option      footer > p;  >必须是直接子元素

　　可以是很多级：ul > ol > li > em

组（group）选择

组选择同时选择多个元素，逗号隔开 语法： <s1>,<s2>

比如 p,button       #food, .cheese

组合使用

　　选择id为food的的所有span子元素和所有的p（包括非food的子元素） #food > span,p  组选择的优先级最低

　　选择id为food的的所有span子元素和所有的p子元素 #food > span, #food  > p

　　选择id为food的的所有子元素 #food > *

兄弟节点选择

　　选择紧接在另一个元素后的元素，二者有相同的父元素，比如 #food + div ; #many > div > p.special + p   紧接着后面的兄弟节点

　　选择在另一个元素后的元素，二者有相同的父元素，比如 #food ~ div，所有的兄弟节点

属性选择器

可以根据元素的属性及属性值来选择元素

　　比如

　　*[style]

　　p[spec=len2]

　　p[spec='len2 len3']   中间有空格，所以加引号；没有空格，可加可不加

　　p[spec*='len2']   #包含

　　p[spec^='len2']  #开头  结尾

　　p[span$='len2']

　　p[class=special][name=p1]    同时满足两种属性

http://www.w3school.com.cn/cssref/css_selectors.asp

p:nth-child(2)           选择属于其父元素的第二个子元素的每个 <p> 元素

p:nth-last-child(2)    同上，从最后一个子元素开始计数。

p:nth-of-type(2)       选择属于其父元素第二个 <p> 元素的每个 <p> 元素

p:nth-last-of-type(2)  同上，但是从最后一个子元素开始计数

验证CSS选择器,点击elements，按ctrl +F 

element 标签内查找      #choose_car option[value='volvo']

console内   精准的css表达式  $$("choose_car option[value='volvo']")

编辑框的一些操作

用clear方法清除该元素里面字符串 input1.clear()

获取input元素里面输入的文本内容 input1.get_attribute('value')

单选框

对应的html

<input type="radio" name="gender" value="male"> 男<br>

<input type="radio" name="gender" value="female"> 女<br>

click方法选择

input1 = driver.find_element(By.CSS_SELECTOR,"input[value=male]")

input.click()

不管是原来该元素是否选中，直接去点击该元素没有问题，都可以确保该单选框选中

勾选框

对应的html

<input type="checkbox" name="vehicle" value = "bike"> 我有一辆自行车

<input type="checkbox" name="vehicle" value = "car"  checked> 我有一辆汽车

click方法选择

is_selected 方法来获取选择的状态

input1 = driver.find_element(By.CSS_SELECTOR,"input[value=car]")

selected = input1_is_selected()

if selected:

　　print ('car already selected')

else:

　　print('car not selected,click on it')

　　input1.click()

复选框

对应的html

<select multiple>

　　<option value='benz'>奔驰S300</option>

　　<option value='accord'>雅阁</option>

</select>

<select>

　　<option value="male">男</option>

　　<option value="female" selected="selected">女</option>

select类

方法deselect_all

方法select_by_visible_text

# coding=utf-8

from selenium import webdriver
driver = webdriver.Chrome(r"d:\tools\webdrivers\chromedriver.exe")
driver.get('file:///D:/gsync/workspace/sq/selenium/samples_selenium/wd/lesson04/ms.html') # 打开网址

# 导入 Select

from selenium.webdriver.support.ui import Select

# 获得相应的WebElement

select = Select(driver.find_element_by_id("multi"))

# 先去选择所有的 选项

select.deselect_all()

select.select_by_visible_text("雅阁")

select.select_by_visible_text("宝马 740")
# 获得相应的WebElement

select = Select(driver.find_element_by_id("single"))

select.select_by_visible_text("男")
input('press any key to quit...')

driver.quit()

# 浏览器退出