Selenium之css怎么实现元素定位？

 

 

世界上最远的距离大概就是明明看到一个页面元素站在那里，可是我却定位不到！！

Selenium定位元素的方法有不少种，像是经过id、name、class_name、tag_name、link_text等等，可是这些方法局限性太大， 随着自动化测试的深刻，和不一样框架要求，会发现上面的定位方式没法解决一些元素定位。尤为对于这样一些元素：

一、没有id、name、class等属性;

二、标签的属性或文本信息特征没有或者不明显；

三、标签嵌套复杂，层次太多等。

因此这些方法了解一下便可，咱们真正须要熟练掌握的是经过xpath和css定位，通常只要掌握一种就能够应对大部分定位工做了。

CSS定位方式和XPATH定位方式基本相同，只是CSS定位表达式有其本身的格式。CSS定位方式拥有比XPATH定位速度快，且比XPATH稳定的特性。下面详细介绍CSS定位方式的使用方法

那这里我跟你们分享如何经过css定位元素，css定位元素的方法是
find _element_by_css_selector

以下是百度首页html代码：

 

 

1.css定位经过绝对路径定位

什么是绝对路径？绝对路径其实就是从开始标签（html）一级一级找到目标元素，上下级元素分隔符为>或者空格

例如：经过css绝对路径定位百度输入框，并输入内容检索，代码以下：

from selenium import  webdriver
import time
# 打开浏览器
driver=webdriver.Chrome()
# 加载项目地址（百度）
driver.get("http://www.baidu.com")
time.sleep(3) 
#定位百度输入框
driver.find_element_by_css_selector("html body div div div div div form span input").send_keys("程序员一凡")
driver.find_element_by_css_selector("html>body>div>div>div>div>div>form>span>input").send_keys("程序员一凡")

　　

2.css定位经过id或class定位

id选择器符号：#，class选择器符号：.仍是刚才案例，经过id或者class定位代码以下：

# 经过id定位
driver.find_element_by_css_selector("#kw").send_keys("程序员一凡")
#class进行定位
driver.find_element_by_css_selector(".s_ipt").send_keys("程序员一凡")

　　

3.经过属性或者部分属性定位

css定位能够经过除元素id、class之外的其余属性或者经过多个属性惟必定位元素，也能够经过部分属性值来定位。经过部分属性定位，有这么些常规匹配符，以字符^指明从字符串的开始匹配，以字符以字符*指明在须要进行模糊查询，以字符$指明在字符串的结尾匹配，代码以下：

driver.find_element_by_css_selector("[autocomplete='off']").send_keys("程序员一凡")
driver.find_element_by_css_selector("[autocomplete='off'][name='wd' ]").send_keys("程序员一凡")
# 4）经过部分属性值定位
driver.find_element_by_css_selector("[autocomplete^='o'][name='wd']").send_keys("程序员一凡")
driver.find_element_by_css_selector("[autocomplete*='f']").send_keys('程序员一凡')
driver.find_element_by_css_selector("[autocomplete$='f']").send_keys("程序员一凡")
　　

　　

4.经过层级定位

层级定位通常很难惟必定位到元素，通常状况下层级跟id/class/属性或者部分属性值一块儿组合定位：

 

driver.find_element_by_css_selector("form>span>input").send_keys("程序员一凡")
driver.find_element_by_css_selector("form.fm>span>input.s_ipt").send_keys("程序员一凡")
driver.find_element_by_css_selector("form>span>input#kw").send_keys("程序员一凡")

　　

 

5.经过兄弟节点定位

什么是兄弟节点，就是同一父级元素下，存在多个相同子标签，那么这些子元素就是兄弟节点，好比像下面这个html代码

 

 如何来定位这些兄弟节点呢？ 定位第一个元素first-child,定位第2/3/4...N位置元素则用nth-child(n),定位最后一个元素last-child，代码以下：

 

# 6)经过兄弟节点定位
driver.find_element_by_css_selector("div#u1 a:first-child").click()
driver.find_element_by_css_selector("div#u1 a:nth-child(3)").click()
driver.find_element_by_css_selector("div#u1 a:last-child").click()

　　

总结：

目前为止，已经整理了自动化测试Python+Selenium中对于web测试定位页面元素的两种主流，也是最好的定位方式XPATH和CSS定位方式，在我我的看来两个方式都很不错，效率都很高，也很容易解决平常工做中的问题，也可以减小页面的变更对于脚本的维护成本，固然不一样问题还须要不一样的方式解决，能解决问题的方法都是好方法，但愿之后的日子对于定位元素再也不是难题。下面咱们对这两种定位方式大概作个对比；

 

 XPATH定位和CSS定位很类似，XPATH功能更强大一些吧，但CSS定位方式执行速度更快，鉴于某些浏览器不支持CSS定位方式，而且通常在自动化测试实施过程当中使用xpath定位方式要比css更广泛，因此建议你们先掌握xpath。