当前位置:   article > 正文

Selenium八大元素定位方法_selenium定位百度输入框输入内容

selenium定位百度输入框输入内容

八大元素定位方法

查看元素的属性值,通过是在浏览器窗口按下F12,打开开发者工具

点击工具栏左侧箭头,鼠标移入界面选元素,查看元素属性;

再按Ctrl+f,在输入框输入定位方法,验证是否正确定位到。

在这里插入图片描述

1.通过ID属性选择

示例:

<input type="text" name="uname" id="username" class="px" />
  • 1

通过ID属性值定位,语法:

driver.find_element(By.ID,'username') 
driver.find_element("id",'username')  #By.ID等价于"id"
  • 1
  • 2
2.通过name属性选择

示例:

<input type="text" name="uname" id="username" class="px" />
  • 1

通过name属性值定位,语法:

driver.find_element(By.NAME,"uname")
driver.find_element("name","uname")
  • 1
  • 2
3.通过class属性选择

示例:

<input type="text" name="uname" id="username" class="px" />
  • 1

通过name属性值定位,语法:

driver.find_element(By.CLASS_NAME,'px')
driver.find_element("class name","px")
  • 1
  • 2

注意:class多个值时,只能写一个

4.通过tag名称定位

html代码:

<div id='div1'>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
</div>
  • 1
  • 2
  • 3
  • 4

通过tag name定位,语法:

driver.find_element(By.TAG_NAME, 'p')
driver.find_element("tag name", "P"
  • 1
  • 2

注意:find_element(定位1个元素)如果定位到多个,操作的是第一个!

5.通过链接文本定位

通过链接文本定位是针对a标签

示例html代码:

<a href="https://www.baidu.com">百度一下,你就知道</a>
  • 1

通过link text定位,语法:

driver.find_element(By.LINK_TEXT, '百度一下,你就知道')
driver.find_element("link text","百度一下,你就知道")
  • 1
  • 2
6.通过链接部分文本定位

有时候链接文本太长,我们可以使用如下方法,语法

driver.find_element(By.PARTIAL_LINK_TEXT,'百度')
driver.find_element("partial link text","百度")
  • 1
  • 2
7.通过xpath定位
<html>
	<head>
		<meta charset="utf-8">
		<title>第二天</title>
	</head>
	<body>
		<div id="div1">
				用户名:<input type="text" name="uname" id="username" class="px" />
				密码:<input type="text" name="pword" id="password" class="pv vm" />
				<br>
				<a href="https://www.baidu.com">百度一下,你就知道</a>
			    <p>这是一个段落1</p>
		</div>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
7.1xpath路径法

7.1.1 绝对路径

driver.find_element(By.XPATH,'html/body/div/input')
driver.find_element('xpath','html/body/div/input')
  • 1
  • 2

7.1.2 相对路径

"""
//input  所有input标签
//p[1]   父节点下的第一个p标签
//*      定位所有的标签(更多是配合属性法来定位)
"""
driver.find_element('xpath','//input')
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
7.2 xpath属性法

语法:

  • [@属性名=‘属性值’],要结合路径法
  • //input[@id=‘username’] 所有input标签中id属性为username的元素
  • //*[@id=‘username’] 因为id唯一,所以可以不论标签
  • xpath中用class属性值定位的时候,所有class的值都要写入,不能写一个,注意跟前面class定位的区别

示例:

driver.find_element(By.XPATH,"//input[@id='username']")
  • 1
7.3 xpath函数法

常用的3个:

  • start-with(@属性名,‘属性开头的值’)
  • contains(@属性名,‘属性包含的值’)
  • text()=‘该标签的文本’
  • contains与text结合: //a[contains(text(),‘a标签包含的文本’)] 非常的常用。
driver.find_element("xpath", "//a[contains(text(),'百度')]")
  • 1
7.4 xpath逻辑运算符

语法:

//input[@name=‘uname’ and @class=‘px’]

//input[@name=‘uname’ or @ class=‘pv vm’] # 自动化中极少用

8.通过css选择器定位

有以下html代码:

<html>
	<head>
		<meta charset="utf-8">
		<title>第二天</title>
	</head>
	<body>
		<div id="div1">
				用户名:<input type="text" name="uname" id="username" class="px" />
				密码:<input type="text" name="pword" id="password" class="pv vm" />
				<br>
				<a href="https://www.baidu.com">百度一下,你就知道</a>
			    <p>这是一个段落1</p>
			    <p>这是一个段落2</p>
		</div>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
8.1 标签名选择器

示例:p 所有p标签

driver.find_element(By.CSS_SELECTOR,'p')
  • 1
8.2 id选择器

示例:#username id属性的值是username

driver.find_element("css selector",'#username')
  • 1
8.3 class选择器

示例:.pv.vm class=pv vm’

driver.find_element("css selector",'.pv.vm')
  • 1
8.4 属性选择器

语法:[属性名=‘属性值’]

  • 示例1:[id=‘username’] id属性值是username

  • 示例2:input[id^=‘usernam’] input标签的id属性开头是usernam

  • 示例3:input[id*=‘sernam’] input标签的id属性值包含sernam

  • 示例4:input[id$=‘ername’] input标签的id属性值结尾是ername

driver.find_element(By.CSS_SELECTOR,"[id='username")
driver.find_element(By.CSS_SELECTOR,'input[id^="usernam"]')
driver.find_element(By.CSS_SELECTOR,'input[id*="ernam"]')
driver.find_element(By.CSS_SELECTOR,'input[id$="ername"]')
  • 1
  • 2
  • 3
  • 4
8.5 路径选择器
  • 子代选择器 示例:html>body html下的body

  • 后代选择器 示例:html div html下的div

  • 二弟选择器 示例:head+body head紧挨着的body

  • 弟弟 示例:div~p 跟div同级,在div之后的弟弟

8.6 伪类选择器
  • :first-child 第一个元素 body>:first-child body下的第一个标签

  • :last-child 最后一个元素 body>:last-child body下的最后一个标签

  • :nth-child(n) 第几个元素 body>div:nth-child(3) body下的第三个标签是div

  • :nth-last-child 倒数第几个元素 body>div:nth-last-child(4) body下的倒数第四个标签是div

  • :only-child 唯一元素 input:only-child 每个节点下的唯一一个input标签

driver.find_element(By.CSS_SELECTOR,'div>:first-child')   # 定位到div下第一个标签,即用户名输入框
driver.find_element(By.CSS_SELECTOR,'div>:last-child')    # 定位到div下最后一个标签 ,即 <p>这是一个段落2</p>
driver.find_element(By.CSS_SELECTOR,'div>:nth-child(2)')   # div下第二个标签,即密码输入框
  • 1
  • 2
  • 3

注:xpath是万能的,但是xpath是慢的,css号称速度最快,推荐使用

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/480937
推荐阅读
相关标签
  

闽ICP备14008679号