八大元素定位
作者:互联网
八大元素定位
说明:在HTML页面中,<p> 是一个标签,<p>hello</p> 是一个元素,元素由一个开始的标签和结束的标签组成。<font color="red">标签包含属性名color,其值为red。
id定位
说明:CSS的id选择器,id常用于JS操作DOM节点对象。当同个id被多次引用时,通过getElementById方法获取到的是在文档中第一个出现该id的标签(DOM节点对象),因此id一般只被引用于一个标签。
示例:
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
定位:
input = find_element_by_id("su")
class定位
说明:CSS的.class选择器,用于包装一组样式和布局供标签引用,常被复用于多个标签,且多个class可同时作用于同一个标签(多个class通过空格隔开,如:class="btn self-btn bg s_btn")。
- 单个clsss示例:
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
定位:
input = find_element_by_class("s_ipt")
- 多个class定位示例:
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
定位:当标签被多个class作用时,此时不推荐使用class定位,因为通常会定位到多个元素,可通过XPath定位和CSS定位代替。
注意:class定位只能使用一个class,而XPath定位和CSS定位则需要输入所有class
# class定位
input_1 = find_element_by_class("btn")
input_2 = find_element_by_class("self-btn")
input_3 = find_element_by_class("bg s_btn")
# XPath定位
input_4 = find_element_by_Xpath('//input[@class="btn self-btn bg s_btn"]')
# CSS定位
input_5 = find_element_by_css('input[class="btn self-btn bg s_btn"]')
name定位
说明:HTML标签中name属性相当于一个变量名,value属性相当于一个变量值,在JS中以及向网站后端传送参数时,与value一起用,比如name是“color”,value是“red”,那么就会有参数color=“red”
示例:
<input id="kw" name="wd" class="s_ipt" value="输入框的内容" maxlength="255" autocomplete="off">
定位:
input = find_element_by_name("wd")
tag定位
说明:根据标签名称定位,常被用来定位一类功能,HTML页面中有很多相同的标签,因此很少用tag定位单个元素。
示例:
<iframe src="https://www.google.com/recaptcha/api2/aframe" width="0" height="0" style="display: none;">
定位:
iframe = find_element_by_tag_name("iframe")
link_text定位
说明:专门定位文本链接元素,通过标签对之间的文字信息来定位元素。
示例:
<a href="http://news.baidu.com">新闻</a>
定位:
driver.find_element_by_link_text("新闻")
partial_link_text定位
说明:partial_link_text定位是对link_text定位的一种补充,有些文字链接比较长,这个时候我们可以取文字链接的部分文字进行定位,只要这部分文字可以唯一地标识这个链接即可。
示例:
<a class="mnav" name="tj_lang" href="#">一个很长的文本链接</a>
定位:
driver.find_element_by_partial_link_text("文本链接")
XPath定位
说明:XPath 是用于在 XML 文档中定位节点的语言。由于 HTML 可以是 XML (XHTML) 的实现,因此 Selenium 用户可以利用这种强大的语言来定位其 Web 页面中的元素。
XPath定位方法:
-
绝对路径
# 定位该路径的input元素 driver.find_element_by_xpath("html/body/div/form/input")
-
相对路径
# 定位form元素下的input元素 driver.find_element_by_xpath("//form/input")
-
元素索引
# 定位form元素下第一个input元素 driver.find_element_by_xpath("//form/input[1]") # 索引从[1]开始
-
属性
# 定位包含value属性的input元素 driver.find_element_by_xpath("//input[@value]") # 属性前必须带@
-
属性+属性值
# 定位包含value属性值为‘xxx’的input元素 driver.find_element_by_xpath("//input[@value='xxx']") # 注意:使用class属性定位时,需写入该元素所有class值才能定位到 driver.find_element_by_xpath("//input[@class='a b c']") # 多个class值通过空格隔开分别为a,b,c
-
*号(任意值)
# 定位包含value属性的任意元素 driver.find_element_by_xpath("//*[@value]") # 定位包含任意属性的值等于'xxx'的input元素 driver.find_element_by_xpath("//input[@*='xxx']")
-
层级与属性结合
# 定位包含id属性值为'xxx'的from元素下的input元素 driver.find_element_by_xpath("//from[@id='xxx']/input") # 跨级定位 driver.find_element_by_xpath("//from[@id='xxx']/*/input") # 跨一级 driver.find_element_by_xpath("//from[@id='xxx']/*/*/input") # 跨两级 driver.find_element_by_xpath("//from[@id='xxx']//input") # 跨多级
-
上下关系定位
# 定位父级元素 driver.find_element_by_xpath('//*[@class="值"]/parent::*') driver.find_element_by_xpath('//*[@class="值"]/..') # 定位同级元素的上n个元素(n从1开始) driver.find_element_by_xpath('//*[@class="值"]/preceding-sibling::*[n]') # 定位同级元素的下n个元素(n从1开始) driver.find_element_by_xpath('//*[@class="值"]/following-sibling::*[n]')
-
text()标签对文本方法
示例:
<button>登录</button>
定位:
# 定位标签对文本等于‘登录’的button元素,注意非属性不需要@ driver.find_element_by_xpath('//button[text()="登录"]')
-
模糊属性值匹配方法
示例:
<button id="a_b_c">请点击登录</button>
定位:
-
starts-with(@属性/text(),开头值):
driver.find_element_by_xpath('//button[starts-with(@id,"a")]') driver.find_element_by_xpath('//button[starts-with(text(),"请")]')
-
ends-with(@属性/text(),结尾值):
driver.find_element_by_xpath('//button[ends-with(@id,"c")]') driver.find_element_by_xpath('//button[ends-with(text(),"登录")]')
-
contains(@属性/text(),包含值):
driver.find_element_by_xpath('//button[contains(@id,"b")]') driver.find_element_by_xpath('//button[contains(text(),"点击")]')
-
-
and、or、not
示例:
<input id="su" value="abc">百度一下</input>
定位:
- and
# 定位包含id属性值为“su"和value属性值为“abc”的input元素 driver.find_element_by_xpath('//input[@id="su" and @value="abc"]')
- or
# 定位包含id属性值为“su"或“kw”的input元素 driver.find_element_by_xpath('//input[@id="su" or @id="kw"]')
- not
# 定位不包含id属性值为“kw”的input元素 driver.find_element_by_xpath('//input[not(@id="kw")]')
CSS定位
说明:CSS指层叠样式表(Cascading Style Sheet),用来定义如何显示HTML和XML的元素。CSS使用选择器为页面元素绑定属性。
CSS定位方法:
-
.class选择器
示例:
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">
定位:
# 点号(.)加class属性值 driver.find_element_by_css_selector(".s_ipt")
扩展示例:
<span class="btn_wr s_btn_wr bg" id="s_btn_wr"> <input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn"></span>
定位:
# .btn_wr.s_btn_wr:定位class属性中同时有btn_wr和s_btn_wr的元素 driver.find_element_by_css_selector(".btn_wr.s_btn_wr") # .btn_wr .btn:定位class属性为tn_wr元素的后代包含class属性为btn的所有元素 driver.find_element_by_css_selector(".btn_wr .btn") # input.btn:定位class属性为btn的所有input元素 driver.find_element_by_css_selector("input.btn")
-
#id选择器
示例:
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">
定位:
# 井号(#)表示通过id属性值来定位 driver.find_element_by_css_selector("#kw")
标签:定位,八大,class,元素,driver,element,input,find 来源: https://www.cnblogs.com/roronoazoro77/p/16549280.html