Seleium选择元素备记

因果轮回
74 阅读6分钟

参考：www.w3school.com.cn/cssref/css_…

css知识回顾

<https://www.w3school.com.cn/cssref/css_selectors.asp>
元素2 是元素1 的直接子元素
元素1 > 元素2  

元素2 是 元素1 的后代元素
元素1 元素2  

或的关系
选择class为plant或id为animal的元素
.plant, #animal

选择id为t1下面的span* 或p元素
#t1 > span, #t1 > p

最近相邻兄弟
元素1 + 元素2

所有兄弟
元素1 ~ 元素2
选择h3后面所有的兄弟节点span
h3 ~ span

使用 ID, class, tag 选择元素

find_element(By.ID, 'username')
find_element(By.CLASS_NAME, 'password')
wd.find_element(By.TAG_NAME, 'input')

# element也可以find
spans = element.find_elements(By.TAG_NAME, 'span')  
for span in spans:  
    print(span.text)
    
# 选择id为container下面的后代tag为span的元素
elements = wd.find_elements(By.CSS_SELECTOR, '#container span')

使用 CSS_SELECTOR 选择元素

# 相当于 find_element(By.ID, '.plant')
find_element(By.CSS_SELECTOR, '.plant')  

# 相当于 find_element(By.TAG_NAME, 'plant')
find_element(By.TAG_NAME, 'plant')

# 相当于 find_element(By.ID, 'searchtext')
find_element(By.CSS_SELECTOR, '#searchText')  

# 基于属性选择
find_element(By.CSS_SELECTOR, 'button[type=submit]').click()
find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')
find_element(By.CSS_SELECTOR, 'div[class=“SKnet”]')

# 选择属性为 href 的元素
element = wd.find_element(By.CSS_SELECTOR, '[href]')
# 选择class为plant，属性name为sknet的元素
element = wd.find_element(By.CSS_SELECTOR, '.plant[name="sknet"]')

# 父元素的第n个子节点
nth-child(n)
# 选择第2个子元素(有父元素，并且作为父元素的第二个子元素)，并且是span类型
span:nth-child(2)
# 选择第2个元素，不管是什么类型
:nth-child(2)

# 父元素的倒数第n个子节点
nth-last-child(n)
# 选择倒数第1个子元素，并且是p元素
p:nth-last-child(1)

# 父元素的第n个子节点(指定子节点的类型)
nth-of-type(n)
# 选择第1个span类型的子元素
span:nth-of-type(1)

# 倒数第2个类型为p的元素
p:nth-last-of-type(2)

# 父元素的偶数节点
p:nth-child(even)
# 父元素的奇数节点
p:nth-child(odd)
# 父元素的 某类型偶数节点
p:nth-of-type(even)
# 父元素的 某类型奇数节点
p:nth-of-type(odd)

使用 XPATH 选择元素

XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 都构建于 XPath 表达之上
www.w3school.com.cn/xpath/index… www.byhy.net/tut/auto/se…

# 选择所有/htm/body/div下面的p元素
find_elements(By.XPATH, "/html/body/div/p")

# 选择所有 div 下面的 p 元素
# 这相当于：find_elements(By.CSS_SELECTOR,"div p")
find_elements(By.XPATH, "//div//p")

# 选择 div 元素里面的 所有的 p 元素
# 对应 css 选择器  div p
//div//p	

# Xpath 可以根据属性来选择元素。
# 根据属性来选择元素 是通过 这种格式来的 [@属性名='属性值']
# 选择 id 为 west 的元素：
//*[@id='west']

# 选择所有 select 元素中 class为 single_choice 的元素：
//select[@class='single_choice']

# 选择所有 p 元素下 calss 为 capital huge-city 的元素
# XPATH选择class和css_Selector不同，使用XPATH需要指定全量的class名，而使用css_selector只需指定一个
//p[@class="capital huge-city"]

# 选择属性为 multiple 的所有元素
//*[@multiple]

# 选择 p 类型倒数第2个
//p[last()-1]

# 选择 style属性值 包含 color 字符串的元素
//*[contains(@style, 'color')]

选择 style 属性值 以 color 字符串 开头的元素
//*[starts-with(@style,'color')]

选择 style 属性值以color结尾的元素
//*[ends-with(@style,'color')] # 很遗憾，这是xpath 2.0 的语法 ，目前浏览器都不支持

# 选择所有p类型中第2个
//p[2]

# 选择父元素为div的所有p类型中第2个
//div/p[2]

# 选择父元素为 div 的第2个子元素，不管是什么类型
//div/*[2]

# 选取p类型倒数第1个(即最后一个)子元素
//p[last()]

# 选取p类型倒数第2个子元素
//p[last()-1]

# 选择父元素为div中p类型倒数第3个子元素
//div/p[last()-2]

# 选取option类型第1到2个子元素
//option[position()<=2]

# 选择class属性为multi_choice的前3个子元素
//*[@class='multi_choice']/*[position()<=3]

# 选择class属性为multi_choice的后3个子元素
//*[@class='multi_choice']/*[position()>=last()-2]

# 选所有的 class 为 single_choice 和 class 为 multi_choice 的元素
//*[@class ='single_choice'] | // *[@ class ='multi_choice']

# 选择 id 为 china 的节点的父节点
# 当某个元素没有特征可以直接选择，但是它有子节点有特征， 就可以采用这种方法，先选择子节点，再指定父节点
//*[@id='china']/..

# 选择class为single_choice的后续兄弟节点中的div节点
//*[@class='single_choice']/following-sibling::div

# 选择 class 为 single_choice 的元素的所有前面的兄弟节点
//*[@class='single_choice']/preceding-sibling::*

# 选择 class 为 single_choice 的元素的前面最靠近的兄弟节点
# 而 CSS选择器 目前还没有方法选择前面的兄弟节点
//*[@class='single_choice']/preceding-sibling::*[1]

# 选择 div 元素里面的直接子节点 p
# 对应 css 选择器 div > p
//div/p	

# 选择所有 div 节点的所有直接子节点
# 对应 css 选择器 div > *
//div/*

# 选择所有tag为 a 属性以 hello 开头的节点
# 对应 css 选择器 a[href*="hello"]
//a[contains(@href,’hello’)]

# 选择 tag 为 a 属性href以 hello 结束的节点
# 对应 css 选择器 a[href^="hello"]
//a[starts-with(@href, ‘hello’)]

# 选择所有 p 元素的第2个
# 对应 css 选择器 p:nth-of-type(2)
//p[2]

# 选择父元素为 div 第2个p的子节点
# 对应 css 选择器 div > p:nth-of-type(2)
//div/p[2]

# 组选择
# 对应 css 选择器 option, h4
//option | h4

# 组选择
# 对应 css 选择器 .choice1, .choice2
//*[@class=’choice1’] | *[@class=’choice2’]

# 选择 class 为 single_choice 的元素的所有后续兄弟节点
# 对应 css 选择器 .single_choice ~ *
//*[@class='single_choice']/following-sibling::*

radio 框选择

<div id="my_radio">
  <input type="radio" name="teacher" value="刘德华">刘德华<br>
  <input type="radio" name="teacher" value="张三丰">张三丰<br>
  <input type="radio" name="teacher" value="大刘忙" checked="checked">大刘忙
</div>

# 获取当前选中的元素
find_element(By.CSS_SELECTOR, 
  '#my_radio input[name="teacher"]:checked')
print('当前选中的是: ' + element.get_attribute('value'))

# 点选 张三丰
find_element(By.CSS_SELECTOR, 
  '#my_radio input[value="张三丰"]').click()

checkbox 框选择

<div id="my_checkbox">
  <input type="checkbox" name="teacher" value="刘德华">刘德华<br>
  <input type="checkbox" name="teacher" value="张三丰">张三丰<br>
  <input type="checkbox" name="teacher" value="大刘忙" checked="checked">大刘忙
</div>

# 业务：选中张三丰
# 先把已经选中的选项全部点击一下
elements = driver.find_elements(By.CSS_SELECTOR, 
  '#s_checkbox input[name="teacher"]:checked')
for element in elements:
    element.click()

# 再点击 
driver.find_element(By.CSS_SELECTOR, 
  "#s_checkbox input[value='张三丰']").click()

select 框选择

https://cdn2.byhy.net/files/selenium/test2.html
对于Select 选择框， Selenium 专门提供了一个 Select类进行操作
<select id="ss_single">
    <option value="小江老师">小江老师</option>
    <option value="小雷老师">小雷老师</option>
    <option value="小凯老师" selected="selected">小凯老师</option>
</select>

from selenium.webdriver.support.ui import Select
if __name__ == '__main__':
    wd = chrome_driver()
    wd.implicitly_wait(10)
    wd.get('https://cdn2.byhy.net/files/selenium/test2.html')

    # 创建Select对象
    select = Select(wd.find_element(By.ID, 'ss_single'))
    # 通过 Select 对象选中小雷老师
    select.select_by_visible_text('小雷老师')
    # select.select_by_index(2) # 索引从0开始
    # select_by_value
    # select_by_index
    # select_by_visible_text
    # deselect_by_value
    # deselect_by_index
    # deselect_by_visible_text
    # deselect_all

    input()
    wd.quit()

Select多选框：

<select id="ss_multi" multiple="">
  <option value="小江老师">小江老师</option>
  <option value="小雷老师">小雷老师</option>
  <option value="小凯老师" selected="selected">小凯老师</option>
</select>

select = Select(wd.find_element(By.ID, 'ss_multi'))
select.deselect_all() # 清除所有 已经选中 的选项
select.select_by_visible_text('小雷老师')
select.select_by_visible_text('小凯老师')
avatar
文章
阅读
粉丝