selenium之CSS定位

 

 

1.css定位

1、什么是css？

1.1：css（Cascading Style Sheets）是一种语言，它用来描述THML和XML的元素显示样式；

　　css语言书写两种格式：

　　　　　　1、写在THML语言中<style type="text/css">...

　　　　　　2、写在单独文件中  后缀.css

1.2：在css语言中有css选择器（不同的策略选择元素），在Selenium中也可以使用这种选择器；

　　提示：

　　　　1、在selenium中极力推荐css定位，因为他比Xpath定位速度要快；

　　　　2、css选择器语法非常强大，如果是学习软件测试，可以先学习常用的几个；

css定位 方法

　　driver.find_element_by_css_selector()

 

2.css定位常用的策略（方法）

　　1、id选择器

　　2、class选择器

　　3、元素选择器

　　4、熟悉选择器

　　5、层级选择器

id选择器

　　说明：根据元素id属性来选择

　　格式：#id           如：#user <选择id属性值为user的所有元素>

　　方法：find_element_by_css_selector()

　　例如：find_element_by_css_selector(“#user”)

　　注意：id选择器必须以#修饰

class选择器

　　说明：根据元素class属性来选择

　　格式：.class        如：#.tel<选择class属性值为tel的所有元素>

　　方法：find_element_by_css_selector()

　　例如：find_element_by_css_selector(“.tel”)

　　注意：以  .（点） 修饰，元素必须有class属性

元素选择器

　　说明：根据元素的标签名选择（标签名称）

　　格式：element     如：input<选择所有input元素>

属性选择器

　　说明：根据元素的属性名和值来选择

　　格式：[attribute=value]      如：[type="password"] <选择所有type属性值为password的值>

层级选择器

　　说明：根据元素的父子关系来选择

　　格式：element>element     如：p>input  <返回所有p元素下所有的input元素>

　　提示：> 可以用空格代替     如：p  input  或者  p  [type=“password”]

3.CSS延伸

　　1、input[type^='p']  说明：type属性以p字母开头的元素

　　2、input[type$='d']  说明：type属性以d字母结束的元素

　　3、input[type*='w']  说明：type属性包含w字母的元素