Selenium中使用CSS定位元素及一些处理

前言

最近项目中使用selenium做web自动化开发，发现用xpath定位只能固定位置的，例如多个卡片相同标签就可以用css来定位并处理。

find_element_by_css_selector()定位元素

方式一 后代或平级关系来选择元素 :

• 父元素:
  (#)表示通过 id 属性来定位元素
  (.)表示通过 class 属性来定位元素

• 子元素（后代关系）
  #choose_car option 含空格的，后面的元素不必是前面元素的直接子元素，只要在父元素的里面
  .s_ipt_wr span
  #choose_car>option 含>键的， 后面的元素必须是前面元素的直接子元素
  .s_ipt_wr>span
  ul>ol>li>em 可以是很多级的父子关系

• 组合型
  #food>span, p 选择id 为food的所有span子元素和所有的p(包括非food的子元素)
  #food>span, #food > p 选择id为food的所有span子元素和所有p子元素
  #food>* 选择id为food的所有子元素
  兄弟节点的选择 (平级关系)
  #food+div 只选择id为food紧跟后面的div
  #food~div 选择id为food后面的div或div们，只需要在id的后面，不需要紧跟

方法二 根据元素的属性及属性值来选择元素 ：

• *[style] 选择所有有stype属性的元素
• p[spec=len2] 选择spec属性值只等于len2的p元素
• yp[spec=‘len2 len3’ ] 选择spec属性值只等于len2 len3的p元素 有空的值一定要加引号
• p[spec*=‘len2’] 选择spec属性值包含len2的p元素
• p[spec^=‘len2’] 选择spec属性值以len2开头的p元素
• p[spec&=‘len2’] 选择spec属性值以len2结尾的p元素
• p[class=special][name=p1] 选择class值等于special，并且name值等于p1的p元素
• p:nth-child(1) 选择第一个p元素
• p:nth-last-child(1) 选择倒数第一个p元素（要保证最后一个元素是p）

将页面上class标签属性修改

• js = document.getElementsByClassName(“level-one”)[0].removeAttribute(“class”); # 删除页面上class为level-one中的class
• document.getElementsByClassName(“relation-wrapper”)[0].classList.add(“used”); # 将页面上class为relation-wrapper的标签属性加上used,以空格隔开