04-css selector定位元素

一、css selector：属性定位

        css selector可以通过元素的id、class、标签这些属性来对元素进行定位。

• css selector用#号表示id属性，如：#kw
• css selector用.表示class属性，如：.s_ipt
• css selector直接用标签名称，不用额外添加任何标识符，如：input

        下面是使用xpath对百度网页搜索框进行定位的相关代码：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector通过id属性进行定位
driver.find_element('css selector', '#kw').send_keys('python')

# 使用css selector通过class属性进行定位
driver.find_element('css selector', '.s_ipt').send_keys('python')

# 使用css selector通过标签进行定位
eles = driver.find_elements('css selector', 'input')
print(len(eles))

        说明：根据元素的class属性进行定位，前提是该元素有class属性。如果在页面中该元素的class属性值是单一样式的，比如：class='s_ipt'，那么可以使用.s_ipt对该元素进行定位；如果是复合样式的，比如：class='s_ipt  border'，那么可以使用.s_ipt.border对该元素进行定位。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector通过class属性进行定位
driver.find_element('css selector', ".s_ipt.border").send_keys('python')

二、css selector：其它属性

        除了可以通过id、class、标签这三个属性定位外，css selector也可以通过其它属性定位元素。下面是使用css selector对百度网页搜索框进行定位的相关代码：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector通过name属性进行定位
driver.find_element('css selector', "[name='wd']").send_keys('python')

# 使用css selector通过autocomplete属性进行定位
driver.find_element('css selector', "[autocomplete='off']").send_keys('python')

三、css selector：标签

        如果一个网页中同名的属性比较多时，可以通过标签与属性的组合进行筛选，可以使得元素定位更加准确。下面是使用css selector对百度网页搜索框进行定位的相关代码：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector通过标签与id属性的组合进行定位
driver.find_element('css selector', "input#kw").send_keys('python')

# 使用css selector通过标签与class属性的组合进行定位
driver.find_element('css selector', "input.s_ipt").send_keys('python')

# 使用css selector通过标签与其他属性的组合进行定位
driver.find_element('css selector', "input[name='wd']").send_keys('python')

四、css selector：层级

        如果一个元素无法直接定位到，这时候我们可以先找它的父元素，找到它的父元素之后，再找下一个层级就能定位到目标元素了。

        如上图所示，要定位的是input这个标签，它的父元素有属性：id=s_kw_wrap，因此可以很方便的定位到它的父元素。要是它的父元素也无法直接定位到，就依次向上找它父元素的父元素（爷爷元素），它的爷爷元素有属性：id=form，因此可以很方便的定位到它的爷爷元素。然后就可以根据父元素和目标元素之间的层级关系，来定位到目标元素。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector通过定位父元素来定位目标Input输入框
driver.find_element('css selector', "form#form>span>input").send_keys('python')

# 使用css selector通过定位父元素来定位目标Input输入框
driver.find_element('css selector', "form.fm>span>input").send_keys('python')

五、css selector：索引

        如果一个元素和它的兄弟元素有着一样的标签，这时候无法通过层级定位到，因为都是一个父亲生的，属于多胞胎兄弟。虽然多胞胎兄弟很难识别，但是出生是有先后顺序的，于是可以通过它在家里的排行来进行定位。

        如上图所示，select元素下有三个具有相同标签（option）的元素。这时候就可以使用css selector根据元素索引 option:nth-child(1) 分别进行定位，这点与xpath写法有很大差异，其实很好理解，直接翻译过来就是第几个小孩。（注：这里的索引是从1开始的，和python中的索引不一样）

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector定位老大
driver.find_element('css selector', "#nr>option:nth-child(1)").click()

# 使用css selector定位老二
driver.find_element('css selector', "#nr>option:nth-child(2)").click()

# 使用css selector定位老三
driver.find_element('css selector', "#nr>option:nth-child(3)").click()

六、css selector：逻辑运算

        css selector也可以实现逻辑运算，同时匹配多个属性，这里跟xpath不一样，无需写and关键字。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://baidu.com")

# 使用css selector的逻辑运算来定位目标input输入框
driver.find_element('css selector', "input[id='kw'][name='wd']").send_keys('python')

七、css selector：模糊匹配

        css selector还有一个非常强大的功能，即模糊匹配。

• [abc*="def"]：匹配 abc 属性值中包含子串 "def" 的所有元素。
• [abc^="def"]：匹配 abc 属性值以 "def" 开头的所有元素。
• [abc$="def"]：匹配 abc 属性值以 "def" 结尾的所有元素。
• css selector好像不能根据标签文本内容进行定位（未找到具体方法），但xpath可以。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')

# 使用xpath模糊匹配某个属性（这里是指id属性值中包含子串'kw'的元素）
driver.find_element('css selector', "[id*='kw']").send_keys('python')

# 使用xpath模糊匹配以什么开头（这里是指id属性值以'k'开头的元素）
driver.find_element('css selector', "[id^='k']").send_keys('python')

# 使用xpath模糊匹配以什么结尾（这里是指id属性值以'kw'结尾的元素）
driver.find_element('css selector', "[id$='kw']").send_keys('python')

        以上是css selector定位元素的语法，css selector具有强大的功能，即可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。css定位更快、语法更简洁，但是xpath更直观、更好理解一些。