python+selenium自动化测试——CSS选择元素（二）

　　

　　id、class都是web元素的属性，因为他们是很常用的属性，所以css选择器专门提供了根据id、class选择的语法。(  . 表示class的值，# 表示id的值)

那么其他的属性呢？

比如：<a href="https://www.baidu.com"> 百度</a> 根据href选择，也可以使用css选择器

 

css选择器支持通过任何属性来选择元素，语法是用一个方括号[ ]

比如：要选择上面的 a元素，可以使用 [ href = "https://www.baidu.com" ]  即选择属性href值为 https://www.baidu.com 的元素

　　element = driver .find_elements_by_css_selector( ' [ href = "https://www.baidu.com" ] ' )

当然，前面可以加上css表达式,标签名等限制

   比如 ：

 　　div[ class = 't' ] 表示所有标签名为div,且class属性值为t的元素(属性值用单引号，双引号都可以)

        .t[href='https://www.baidu.com']   表示所有class值为t且href的值为百度链接的元素  注意 .t后面不能加空格 

 根据属性选择

还可以不指定属性值，比如 ：  [ href ], 表示选择所有属性名为href的元素，不管它们的值是什么。

 

验证CSS Selector

　

那么我们怎么验证 CSS Selector 的语法是否正确选择了我们要选择的元素呢？

当然可以像下面这样，写出Python代码，运行看看，能否操作成功

element = wd.find_element_by_css_selector('#searchtext')
element.input('输入的文本')

如果成功，说明选择元素的语法是正确的。

 

但是这样做的问题就是：太麻烦了。

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

 

由于 CSS Selector 是浏览器直接支持的，可以在浏览器 开发者工具栏 中验证。

比如我们使用Chrome浏览器打开 http://cdn1.python3.vip/files/selenium/sample1.html

按F12 打开 开发者工具栏

如果我们要验证 下面的表达式

#bottom > .footer2  a

能否选中 这个元素

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

可以这样做：

点击 Elements 标签后， 同时按 Ctrl 键 和 F 键， 就会出现下图箭头处的 搜索框

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

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

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

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

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

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