Web自动化测试：xpath & CSS Selector定位 (2)

CSS Selector是前向的，不能利用子节点定位父节点

方法 描述
..   一个点”.“表示选取当前节点，两个点”..“表示选取当前节点的父节点。  
ancestor   当前节点祖先元素（父、祖父...）  
parent   当前节点的父节点  
Id定位 Xpath CSS Selector
语法   //*[@id='example']   #example  
示例   //*[@id='uesrname']   #uesrname  
描述   选择id='uesrname'的元素。    
Class定位 Xpath CSS Selector
语法   //*[@class='example']   .example  
示例   //*[@class='uesrname']   .uesrname  
描述   选择class='uesrname'的元素。    
属性值定位

没有Id和Class的情况下，可以使用其它属性值定位，比如name、type等。

Xpath CSS Selector
语法   //*[@attribute='value']   [attribute=value]  
示例   //*[@name='uesrname']   [name='username']  
描述   选择属性值name='uesrname'的元素。    

xpath可以使用 ‘and’ 或者 ‘or’ 连接两个属性：

XPATH：

//input[@name='login'and @type='submit']

CSS Selector：

input[name='login'][type='submit']

CSS Selector可以进行子字符串匹配进行定位:

^= 匹配前缀

[id^='id_prefix_'] # id前缀为‘id_prefix_’的元素

$= 匹配后缀

[id$='_id_sufix'] # id后缀为‘_id_sufix’的元素

*= 包含某个字符串

[id*='id_pattern'] # id包含‘id_pattern’的元素 Xpath Contains()方法

Contains()方法也许通过部分文本来定位查找元素，CSS Selector不支持这种用法。

Xpath = //*[contains(@type,'partial_text')] Xpath = //*[contains(@name,'partial_text')] Xpath = //*[contains(@class,'partial_text')] Xpath = //*[contains(@id,'partial_text')] Xpath = //*[contains(text(),'partial_text')] Xpath = //*[contains(@href,'partial_text')] Xpath Starts-with()方法

查找属性值以特定文本开始的元素

Xpath = //*[starts-with(@type,'start_text')] Xpath = //*[starts-with(@name,'start_text')] Xpath = //*[starts-with(@class,'start_text')] Xpath = //*[starts-with(@id,'start_text')] Xpath = //*[starts-with(text(),'start_text')] Xpath = //*[starts-with(@href,'start_text')] Xpath Text()方法

Text()方法基于web元素文本来进行定位

Xpath = //*[text()='text_value'] 实例 子孙元素定位

百度一下”text“，点击”资讯“

Xpath：

//*[@id="s_tab"]/descendant::a[1] //*[@id="s_tab"]/child::*[1]/a[1]

CSS selector：

#s_tab a:nth-child(2) #s_tab a:nth-last-child(9)

python测试代码：

def test_css(self):     self.driver.get("https://www.baidu.com/")     self.driver.find_element_by_id("kw").send_keys("test")            self.driver.find_element_by_id("su").click()            # element = self.driver.find_element_by_css_selector("#s_tab a:nth-child(2)")     # element = self.driver.find_element_by_css_selector('#s_tab a:nth-last-child(9)')     element = self.driver.find_element_by_xpath('//*[@id="s_tab"]/descendant::a[1]')            element.click()     sleep(2) 邻居节点定位

点击”资讯“下一个邻居节点”视频“

xpath

//*[@id="s_tab"]/descendant::a[1]/following-sibling::a[1] //*[@id="s_tab"]/child::*[1]/a[1]/following-sibling::a[1]

CSS selector：

#s_tab a:nth-child(2) + a #s_tab a:nth-last-child(9) + a

python测试代码：

def test_css2(self): self.driver.get("https://www.baidu.com/") self.driver.find_element_by_id("kw").send_keys("test") self.driver.find_element_by_id("su").click() # element = self.driver.find_element_by_css_selector('#s_tab a:nth-child(2) + a') element = self.driver.find_element_by_xpath('//*@id="s_tab"]/descendant::a[1]/following-sibling::a[1]') element.click() sleep(2) Xpath Contains()、Starts-with()、Text()定位

测试页面：

点击”linkByContent“