WebDriver-元素定位 -（二）

WebDriver-元素定位 -（二）

Xpath 定位

• 路径

  • 绝对路径
    • 例如：/html/body/form/div/fieldset/p[1]/input
  • 相对路径
    • 例如：//*[@id="userA"]
    • 其中：// 代表任意层级、* 代表任意标签

• 使用方式：

# 绝对路径
user = driver.find_element_by_xpath('/html/body/form/div/fieldset/p[1]/input')
user.send_keys('admin')
# 相对路径
user = driver.find_element_by_xpath('//*[@id="userA"]')
user.send_keys('admin')

• 利用元素属性-定位
  • 元素唯一属性
• 使用方式

driver.find_element_by_xpath("//*[@id='userA']").send_keys('admin')
driver.find_element_by_xpath("//*[@id='passwordA']").send_keys('123456')

• 层级与属性结合-定位
  • 父级有属性，子级没有（较少）
• 使用方式

driver.find_element_by_xpath("//*[@id='p1']/input").send_keys('123456')

• 属性与逻辑结合-定位
  • 元素属性不唯一，则多个结合来进行定位
• 使用方式

driver.find_element_by_xpath("//*[@class='telA' and @name='telA']").send_keys('15711111111')

• 扩展

1. 定位文本是xxx的元素
   （一般用于超链接和按钮）

//*[text()="xxx"]
//*[text()="百度"]

1. 定位属性以xxx开头的元素

//*[starts-with(@attribute,'xxx')]
//*[starts-with(@id,'userA')]

1. 定位属性中含有xxx的元素

//*[contains(@attribute,'Sxxx')]
//*[contains(@id,'ss')]

CSS 定位

• selenium 中推荐使用 CSS 定位方式，比 Xpath 快

分类

• id 选择器

driver.find_element_by_css_selector('#userA').send_keys('admin')

• class 选择器

driver.find_element_by_css_selector('.telA').send_keys('15711111111')

• 标签 选择器

# 仅对第一个 a 标签生效
driver.find_element_by_css_selector('a').click()
# 可以定位指定的 a 标签（通过下标来取）
driver.find_elements_by_css_selector('a')[0].click()

• 属性 选择器

driver.find_element_by_css_selector("[placeholder='电话A']").send_keys('15711111111')
# 注意：引号要不同级，最好是外面双引，里面单引
# 一般没有 id 属性，class 属性也没有，或者 class 属性不唯一才会使用

• 层级 选择器

# 井号可以省略用空格代替
# 也可以于属性合用进行定位
driver.find_element_by_css_selector("p>[id='userA']").send_keys('admin')
driver.find_element_by_css_selector("p [id='userA']").send_keys('admin')

• 扩展1

1. input[type^='p']     
# 说明：type属性以p字母开头的元素
2. input[type$='d']     
# 说明：type属性以d字母结束的元素
3. input[type*='w']     
# 说明：type属性包含w字母的元素

• 扩展2

# 另一种写法，需要除了预置代码外，还需要导入额外的包。
# 导包
from selenium.webdriver.common.by import By
# 元素定位的写法
driver.find_element(By.ID, 'userA').send_keys('admin')

• 注意：

xpath 使用属性时 为 //*[@id="userA"]
css 使用属性时 为 [id='userA']