（三）自动化测试之selenium学习心得-CSS表达式1

 CSS Selector 语法选择元素原理

HTML中经常要 为 某些元素 指定 显示效果，比如 前景文字颜色是红色， 背景颜色是黑色， 字体是微软雅黑等。

那么CSS必须告诉浏览器：要 选择哪些元素 ， 来使用这样的显示风格。

 

.animal就是CSS选择器

既然 CSS Selector 语法 天生就是浏览器用来选择元素的，selenium自然就可以使用它用在自动化中，去选择要操作的元素了。

只要 CSS Selector 的语法是正确的， Selenium 就可以选择到该元素。

 

简单例子：

       css_elements = wd.find_elements_by_css_selector('.animal')
等价于  css_elements = wd.find_elements_by_class_name('animal')

 

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

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

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

1.1、根据tag名选择元素简单例子

 tag_elements = wd.find_elements_by_css_selector('span')

等价于 css_elements = wd.find_elements_by_tag_name('span')

 

1.2、根据class选择元素简单例子

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

css_elements = wd.find_elements_by_css_selector('.animal')
等价于 css_elements = wd.find_elements_by_class_name('animal')

 

1.3、根据id选择元素简单例子

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

id_elements = wd.find_elements_by_css_selector('#wrapper')

 

简而言之，之前学的通过id、CSS、tag选择元素都可以通过用css选择器来表示

 

2、选择 子元素 和 后代元素

 2.1、选择子元素

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

元素1 > 元素2

也支持更多层级的选择， 比如

元素1 > 元素2 > 元素3 > 元素4
就是选择 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 元素4 ， 最终选择的元素是 元素4

简单例子：

elements = wd.find_elements_by_css_selector('#layer1 > div ')

elements = wd.find_elements_by_css_selector('#container > #layer1 > div')

 

2.2、后代元素

后代元素也包括了直接子元素，也包括了里面的所有不是直接的元素

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

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

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

也支持更多层级的选择， 比如
元素1 元素2 元素3 元素4
最终选择的元素是 元素4

简单例子：

elements = wd.find_elements_by_css_selector('#layer1 span')

注：子元素和后台元素可以混合使用

例如：elements = wd.find_elements_by_css_selector('#container > #layer1 span')

通过位置限制范围选择元素来获取我们想要的元素！

 

3、根据属性选择

id、class 都是web元素的 ```属性``` ，因为它们是很常用的属性，所以css选择器专门提供了根据 id、class 选择的语法。

其他属性的一般表示语法，语法是用一个方括号 [] 。css 选择器支持通过任何属性来选择元素

简单例子：

css_elements = wd.find_elements_by_css_selector('[href="http://www.miitbeian.gov.cn"]')

css_elements = wd.find_elements_by_css_selector('[href]')

 

当然，前面可以加上标签名的限制，比如下面标签名为a 属性是href的元素

css_elements = wd.find_elements_by_css_selector('a[href]')

注意a[href]中间不能有空格，有空格表示的就是后代元素的关系而不是当前的关系

 

3.1、CSS 还可以选择 属性值 包含 某个字符串 的元素

css_elements = wd.find_elements_by_css_selector('a[href*="miitbeian"]')

 

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

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

css_elements = wd.find_elements_by_css_selector('a[href^="http"]')

 

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

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

css_elements = wd.find_elements_by_css_selector('a[href$="gov.cn"]')

 

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

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

css_elements = wd.find_elements_by_css_selector('input[name="wd"][class="s_ipt"]')

 

 

验证 CSS Selector

当我们进行自动化开发的时候，有大量选择元素的语句，都要这样一个个的验证，就非常耗时间。

由于 CSS Selector 是浏览器直接支持的，可以在浏览器 开发者工具栏 中验证。
按F12 打开 开发者工具栏
点击 Elements 标签后， 同时按 Ctrl 键 和 F 键， 就会出现下图箭头处的 搜索框
我们可以在里面输入任何 CSS Selector 表达式 ，如果能选择到元素， 右边的的红色方框里面就会显示出类似 2 of 3 这样的内容。