Selenium极力推荐使用CSS locator，原因是CSS locator比XPath locator速度快，特别是IE浏览器没有XPath 解析器，且它比xpath更高效更准确更易编写，无论元素的位置有多复杂，CSS Selector都能精准的定位得到，美中不足是根据页面文字时略有缺陷，而没有xpath直接。
(1)CSS常用定位方法
->根据id定位，格式：#id_name
driver.find_element_by_css_selector('#su').click() #点击百度一下
driver.find_element_by_css_selector('input#su').click() #点击百度一下
->根据class定位，格式：.class_name
driver.find_element_by_css_selector('.s_ipt').send_keys("selenium") #百度搜索selenium
driver.find_element_by_css_selector('input.s_ipt').send_keys("selenium") #百度搜索selenium
复合class：driver.findElement(By.cssSelector(".username.**.***"));
->根据属性来定位元素，格式：[属性名=‘属性值’]
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys("css") #百度搜索css
driver.find_element_by_css_selector('input[autocomplete="off"]').send_keys("css") #百度搜索css
driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性
->根据元素层级来定位元素 父元素>子元素
driver.find_element_by_css_selector('form#form>span>input[type="submit"]').click()
#点击百度一个 ，结合id定位与属性定位
(2)css_selector定位元素的模糊匹配问题
匹配id，先指定一个html标签，然后加上“#”符号，再加上id的属性值
driver.find_element_by_css_selector('div#ID').click()
匹配class，先指定一个html标签，然后加上“.”符号，再加上class的属性值
driver.find_element_by_css_selector('div.CLASS').click()
匹配其他属性：driver.find_element_by_css_selector('div[name=NAME]').click()
组合匹配：driver.find_element_by_css_selector('div[name=NAME][type=TYPE]').click()
匹配头部：driver.find_element_by_css_selector('Input[id ^="ctrl"]') #如ctrl_12
匹配尾部：driver.find_element_by_css_selector('Input[id $="ctrl"]') #如a_ctrl
匹配中间：driver.find_element_by_css_selector('Input[id *= "ctrl"]') #如1_ctrl_12
(3)查询子元素
<form id="form" class="fm" name="f"> <span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap"> <input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"> </span> <span id="s_btn_wr" class="btn_wr s_btn_wr bg"> <input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下"> </span> </form>
以上代码是百度首页搜索输入框和按钮的html，下面讲解以此为例
1)子元素 A>B
WebElement input= driver.findElement(By.cssSelector("form>span>input"));//搜索输入框
2)后代元素 A空格B
WebElement input= driver.findElement(By.cssSelector("form input"));//搜索输入框
3)第一个后代元素 :first-child
WebElement span= driver.findElemet(By.cssSelector("form :first-child"));
#冒号前有空格，定位到form下所有级别的第一个子元素
可定位到三个元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));
#冒号前无空格，定位到form下所有级别的第一个input元素
可定位到两个元素：<input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));
#冒号前无空格，定位到form直接子元素中的第一个span元素
可定位到一个元素：<span id="s_kw_wrap".../>
4)最后一个子元素 :last-child [类同:first-child]
WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));
#冒号前有空格，定位到form下所有级别的第一个子元素
5)第2个子元素 :nth-child(N) [类同:first-child]
WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));
#冒号前有空格，定位到form下所有级别的第二个子元素
6)查询兄弟元素
driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b、
(4)由父节点定位子节点
# -*- coding: utf-8 -*- from selenium import webdriver driver = webdriver.Firefox() driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html') # 1.串联寻找 print driver.find_element_by_id('B').find_element_by_tag_name('div').text # 2.xpath父子关系寻找 print driver.find_element_by_xpath("//div[@id='B']/div").text # 3.css selector父子关系寻找 print driver.find_element_by_css_selector('div#B>div').text # 4.css selector nth-child print driver.find_element_by_css_selector('div#B div:nth-child(1)').text # 5.css selector nth-of-type print driver.find_element_by_css_selector('div#B div:nth-of-type(1)').text # 6.xpath轴 child print driver.find_element_by_xpath("//div[@id='B']/child::div").text driver.quit()
第4种用到css选择器：nth-child(n)，返回第n个div标签；
第5种用到另一个css选择器： nth-of-type(n)，该选择器返回第n个div标签；
第6种用到xpath轴 child，这个是xpath默认的轴，可以忽略不写，其实质是跟方法2一样的。
另外，css中还有一些选择器，如last-child、nth-last-child等
(5)由子节点定位父节点
# -*- coding: utf-8 -*- from selenium import webdriver driver = webdriver.Firefox() driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html') # 1.xpath: '.'代表当前节点; '..'代表父节点 print driver.find_element_by_xpath("//div[@id='C']/../..").text # 2.xpath轴 parent print driver.find_element_by_xpath("//div[@id='C']/parent::*/parent::div").text driver.quit()
第1种是 .. 的形式，. 表示当前节点，.. 表示父节点；
第2种使用xpath轴：parent，取当前节点的父节点。css selector没有获取父节点的办法
(6) 由弟弟节点定位哥哥节点
# -*- coding: utf-8 -*- from selenium import webdriver driver = webdriver.Firefox() driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html') # 1.xpath,通过父节点获取其哥哥节点 print driver.find_element_by_xpath("//div[@id='D']/../div[1]").text # 2.xpath轴 preceding-sibling print driver.find_element_by_xpath("//div[@id='D']/preceding-sibling::div[1]").text driver.quit()
第1种是通过该节点的父节点来获得哥哥节点,1 代表着离当前节点最近的一个哥哥节点，数字越大表示离当前节点越远，
第2种通过 xpath轴：preceding-sibling，其能够获取当前节点的所有同级哥哥节点
(7)由哥哥节点定位弟弟节点
# -*- coding: utf-8 -*- from selenium import webdriver driver = webdriver.Firefox() driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html') # 1.xpath，通过父节点获取其弟弟节点 print driver.find_element_by_xpath("//div[@id='D']/../div[3]").text # 2.xpath轴 following-sibling print driver.find_element_by_xpath("//div[@id='D']/following-sibling::div[1]").text # 3.xpath轴 following print driver.find_element_by_xpath("//div[@id='D']/following::*").text # 4.css selector + print driver.find_element_by_css_selector('div#D + div').text # 5.css selector ~ print driver.find_element_by_css_selector('div#D ~ div').text driver.quit()
第4、5五种用到css selector，+ 和 ~ 的区别是： + 表示紧跟在当前节点之后的div节点，~ 表示当前节点之后的div节点，如果用find_elements，则可获取到一组div节点。