自动化测试之Selenium css

根据 tag名、id、class 选择元素

CSS Selector 同样可以根据tag名、id 属性和 class属性 来 选择元素，

根据 tag名 选择元素的 CSS Selector 语法非常简单，直接写上tag名即可，

比如 要选择 所有的tag名为div的元素，就可以是这样

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于

elements = wd.find_elements(By.TAG_NAME, 'div')

根据id属性 选择元素的语法是在id号前面加上一个井号： #id值

element = wd.find_element(By.CSS_SELECTOR, '#searchtext')
element.send_keys('你好')

根据class属性 选择元素的语法是在 class 值 前面加上一个点： .class值

elements = wd.find_elements(By.CSS_SELECTOR, '.animal')

因为是选择 所有 符合条件的 ，所以用 find_elements 而不是 find_element

选择 子元素 和 后代元素
子元素：直接包含，并且中间没有间隔
后代元素：中间有间隔

如果 元素2 是 元素1 的 直接子元素， CSS Selector 选择子元素的语法是这样的

元素1 > 元素2
中间用一个大于号 （我们可以理解为箭头号）

注意，最终选择的元素是 元素2， 并且要求这个 元素2 是 元素1 的直接子元素

如果 元素2 是 元素1 的 后代元素， CSS Selector 选择后代元素的语法是这样的

元素1 元素2
中间是一个或者多个空格隔开

最终选择的元素是 元素2 ， 并且要求这个 元素2 是 元素1 的后代元素。

根据属性选择
比如

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')

比如， 要选择a节点，里面的href属性包含了 miitbeian 字符串，就可以这样写

a[href*="miitbeian"]

还可以 选择 属性值 以某个字符串 开头 的元素

比如， 要选择a节点，里面的href属性以 http 开头 ，就可以这样写

a[href^="http"]

还可以 选择 属性值 以某个字符串 结尾 的元素

比如， 要选择a节点，里面的href属性以 gov.cn 结尾 ，就可以这样写

a[href$="gov.cn"]

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制，像这样

div[class=misc][ctype=gun]

验证 CSS Selector
能否选中 这个元素
F12之后 通过ctrl+f

我们可以在里面输入任何 CSS Selector 表达式 ，如果能选择到元素， 右边的的红色方框里面就会显示出类似 2 of 3 这样的内容。

of 后面的数字表示这样的表达式 总共选择到几个元素

of 前面的数字表示当前黄色高亮显示的是 其中第几个元素

上图中的 1 of 1 就是指 ： CSS 选择语法 #bottom > .footer2 a

在当前网页上共选择到 1 个元素， 目前高亮显示的是第1个。

如果我们输入 .plant 就会发现，可以选择到3个元素