web自动化04-css定位

2023-07-30,,

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 

web自动化04-css定位的相关教程结束。

《web自动化04-css定位.doc》

下载本文的Word格式文档,以方便收藏与打印。