UI自动化之元素定位(xpath、css)

时间:2021-08-20 07:46:08

  很早之前就已经写过自动化了,不过点着功能久了就会容易忘记元素定位,尤其是xpath和css定位,所以就花点时间做下总结收集。

xpath有两种定位:

一.绝对路径(不推荐使用,除非已经使用了所有方式仍然无法定位)
方法:根据实际目录,逐层输写。
例子: find_element_by_xpath("/html/body/div[1]/span/input/a")  # div[1]指第1个元素
二.相对路径(推荐使用)

方法:找到元素有”精准元素“即唯一能标识的属性;

# 1、通过id定位(以百度首页为例)
driver.find_element_by_xpath("//*[@id='kw']").send_keys("test")
time.sleep(1) # 2、通过class定位
driver.find_element_by_xpath("//*[@class='s_ipt']").send_keys("test") # 3、通过name定位
driver.find_element_by_xpath("//input[@name='wd']").send_keys("test") # 4、通过其它属性定位
driver.find_element_by_xpath("//*[@autocomplete='off']").send_keys("test") # 5、多个属性组合定位(逻辑运算符and、or等)
driver.find_element_by_xpath("//*[@autocomplete='off' and @class='s_ipt']").send_keys("test") # 6、通过文本属性定位
driver.find_element_by_xpath("//*[text()='新闻']") # 7、通过父元素定位子元素(层级关系)
driver.find_element_by_xpath("//*[@id='u1']/a[2]") # 通过上一级的id对下一级a标签进行定位(索引从1开始) # 8、通过子元素找父元素
driver.find_element_by_xpath("//*[@id='kw']/..") # //*[@id='kw']/../.. 这个是找爷爷 # 9、模糊匹配
driver.find_element_by_xpath("//a[contains(text(),'hao')]") # 文本模糊匹配
driver.find_element_by_xpath("//input[contains(@class,'s_btn')]") # class属性模糊匹配,其它类似

CSS语法定位

# 1、通过id定位
driver.find_element_by_css_selector("#kw").send_keys("test") # 2、通过class定位(多个class属性有空格的话,将空格换成.)
driver.find_element_by_css_selector(".s_ipt").send_keys("test") # 3、通过tag定位
driver.find_element_by_css_selector("input") # 定位所有input标签 # 4、通过其它属性定位
driver.find_element_by_css_selector("[name='wd']").send_keys("test") # 5、通过父元素找子元素(组合定位)
driver.find_element_by_css_selector("#qrcode .qrcode-img") # 通过id为qrcode上一级或上上级找寻下级class为qrcode-img的元素
driver.find_element_by_css_selector("qrcode .qrcode-img:nth-child(1)") # 找刚刚上面结果的第一组元素,索引从1开始
driver.find_element_by_css_selector("#qrcode div.qrcode-img:nth-child(1)") # 组合定位,div标签下class为qrcode-img的元素

css更多操作请看下方

UI自动化之元素定位(xpath、css)