web自动化04-css定位

css元素定位

1、 是什么？

　　用来描述html元素的显示样式

　　选择器是一种模式，用于选择需要添加样式的元素

 

　　selenium中推荐使用css定位，比XPath定位要快

 

 2、如何定位？

 

　　css定位方法：通过css的选择器语法定位元素

 

　　element = driver.find_element_by_css_selector(css策略)

 

 3、常用定位？

 

　　css定位常用策略：

 

　　　　1、id选择器

　　　　2、class选择器

　　　　3、元素选择器

　　　　4、属性选择器

　　　　5、层级选择器

 

 

①id选择器

 

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

　　格式：#id

　　例如：#user<选择id属性值为userA的元素>

 

②class选择器

 

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

　　格式：.class

　　例如：.telA<选择属性值为telA的所有元素>

 

注意：与class_name方法不同的是，如果使用具有多个值的class属性，则需要传入全部的属性，与xpath一样

 

 

③元素选择器

 

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

　　格式：element

　　例如：input<选择所有input元素>

 

④属性选择器

 

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

　　格式：element[attribute = value]

　　例如：[type = "password"]<选择type属性值为password的元素>

 

需求：打开注册A.html页面，完成以下操作：

1、使用id选择器定位用户输入框，输入：12345

2、使用属性选择器定位密码输入框,输入：1213

3、使用class选择器定位电话号码输入框，输入：23123

4、使用元素选择器定位注册按钮，并点击

 

⑤层级选择器

 

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

　　格式1：element1 >  element2         　　通过element1来定位element2，并且element2必须为element1的直接子元素

　　例如1：父层级策略 > 子层级策略

　　格式2：element1  element2　　　　　　通过element1米定位element2，并且element2为element1的后代元素

　　例如2：祖辈策略  后代策略

 

注意：父子层级关系也可以使用空格连接上下层级策略

 

4、CSS延伸[了解]

 

• input[type^='p']　　type属性以p字母开头的元素
• input[types='d”]　　type属性以d字母结束的元素
• input[type*=‘w']　　txpe属性包含w字母的元素

 

********扩展8种元素定位的底层实现**********：

 

　　方式：driver.find_element(By.xxx, 'value')

　　参数说明：

　　　　By.xxx :为By类的类型 如：By.ID

　　　　value: 元素的定位值 如： "userA"

 

By类：需要导包 位置： from selenium.webdriver.common.by import By