Selenium八种元素定位方法

不论是做web项目还是app项目的UI自动化，都是去操作页面中的元素，首先我们要找到这些元素，才能操作这些的元素，那这些元素我们应该怎么来定位呢？selenium官网


一、元素定位

1、什么叫作元素？

1）元素：

　　HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

2）标签：

标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，
绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。
当然还有少部分不是成对出现的，如<br>、<hr>等。

　　标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。

3）属性：

　　为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。

示例：

<html> 
     <head> <title>示例标题</title> </head> 
     <body bgcolor="red"> 
             <p>这是示例页面</p>
     </body>
</html>


在这个示例中，<p>这是示例页面</p>就是HTML元素，其中“这是示例页面”就是元素的具体内容了。

<head><title><body>等就是HTML标签，这是标签构成了HTML元素。
<body bgcolor="red">中的bgcolor="red"就是标签的属性，它定义了标签应该如何具体配置。

元素定位：就是通过元素的信息或元素层级结构来定位元素的。

谷歌浏览器，按F12出现右侧的检查栏，点击鼠标，然后再点击页面中的元素，则可以找到该元素的组成代码。
image


二、元素定位方式

Selenium提供了八种定位元素方式
1、id
2、name
3、class_name：class属性
4、tag_name：标签名称
5、link_text：超链接 a标签
6、partial_link_text：超链接 a标签(模糊)
7、xpath：路径(绝对路径、相对路径)
8、CSS：选择器


汇总：
1、基于元素属性特有定位方式(id、name、class_name)
2、基于元素标签名称定位(tag_name)
3、定位超链接文本(link_text、partial_link_text)
4、基于元素路径定位(xpath)
5、基于选择器(css)


注：结合百度的页面来使用不同的定位方式

image

1、id定位

说明：id定位就是通过元素的id属性来定位元素，HTML 规定id属性在整个HTML文档中必须是唯一的;
前提：元素有id属性

  • id定位的方法

driver.find_element_by_id(id)

  • 实例

百度首页搜索框属性中，有个id="kw"的属性，我们可以通过这个id定位到这个搜索框，在搜索框输入selenium

import time
from selenium import webdriver

# 打开浏览器驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过id定位搜索框，并输入selenium
driver.find_element_by_id('kw').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()

2、name定位

说明：name定位就是根据元素name属性来定位。HTML文档中name的属性值是可以重复的。
前提：元素有id属性

  • name定位的方法

driver.find_element_by_name(name) --页面唯一name
driver.find_elements_by_name(name)[下标] --页面多个name重复，使用下标，下标从0开始

  • 实例

百度首页的搜索框属性中，有个name="wd"的属性，我们可以通过这个name定位到这个搜索框，在搜索框输入selenium

import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过name定位搜索框，并输入selenium
driver.find_element_by_name('wd').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()

3、class name定位

说明: class name定位就是根据元素class属性值来定位元素。HTML通过使用class来定义元素的样式
前提：元素有class属性
注意：如果class有多个属性值，只能使用其中的一个
class="bg s_ipt_wr new-pmd quickdelete-wrap" class一共4个值bg、s_ipt_wr、new-pmd、quickdelete-wrap

  • class name定位的方法

driver.find_element_by_class_name(class_name) --页面唯一class name
driver.find_elements_by_class_name(class_name)[下标] --页面多个class name重复，使用下标，下标从0开始

  • 实例

搜索框属性中，有个class="s_ipt"的属性，我们可以通过这个class定位到这个搜索框，在搜索框输入selenium

import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过class name定位搜索框，并输入selenium
driver.find_element_by_class_name('s_ipt').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()

4、tag name定位

说明: tag name定位就是通过标签名来定位；查看元素时尖括号(<)紧挨着的单词或字母就是标签名；
HTML本质就是由不同的tag组成，每一种标签一般在页面中会存在多个，所以不方便进行精确定位，一般很少使用。

  • tag name定位的方法

driver.find_element_by_tag_name(tag_name) --如果存在多个相同标签，则返回符合条件的第一个标签
driver.find_elements_by_tag_name(tag_name)[下标] --页面多个tag name重复，使用下标，下标从0开始

  • 实例

注：如下图我们定位百度页面的左上角的新闻是a标签，从上往下数第5个a标签，所以得出下标为4，使用find_elements_by_tag_name(tag_name)[下标]

image

import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过tag name标签a定位"新闻"，并点击
driver.find_elements_by_tag_name("a")[4].click()
# 等待5秒
sleep(5)
# 退出
driver.quit()

说明：link_text定位超链接标签(a标签)--精准匹配
注意：link_text只能使用精准匹配(a标签的全部文本内容)

  • link_text定位的方法

driver.find_element_by_link_text(a标签的全部文本内容)

  • 实例

此处定位百度首页的新闻a标签，则需要用新闻的a标签中的全部文本内容："新闻"

image

import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过link_text定位"新闻"的a标签，并点击
driver.find_element_by_link_text("新闻").click()
# 等待5秒
sleep(5)
# 退出
driver.quit()

说明：partial_link_text定位超链接标签(a标签)--模糊匹配
注意：
1.可以使用精准或模糊匹配，如果使用模糊匹配最好使用能代表唯一的关键词；
2.如果有多个值，默认返回第一个值；

  • partial_link_text定位的方法

driver.find_element_by_partial_link_text(a标签的部分文本内容)

  • 实例

有时候一个超链接的文本很长很长，我们如果全部输入，既麻烦，又显得代码很不美观，这时候我们就可以只截取一部分字符串，用这种方法模糊匹配了。
我们用这种方法来定位百度首页的"新闻"超链接，取其中一个"闻"字来进行匹配.

image

import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过partial_link_text定位搜索框，并点击
driver.find_element_by_partial_link_text("闻").click()
# 等待5秒
sleep(5)
# 退出
driver.quit()

7、xpath定位

为什么使用xpath和css定位？
1、id，name，class：依赖于元素这三个对应的属性，如果元素没有以上三个属性，定位方法不能使用；
2、link_text，partial_link_text：只适合超链接；
3、tag name: 页面中相同元素太多，定位比较复杂

1）xpath介绍
xpath（全称：XML Path Language）即 XML 路径语言，它是一门在 XML 文档中查找信息的语言，最初被用来搜寻 XML 文档，同时它也适用于搜索 HTML 文档。

2）xpath常用定位

  • 路径
    • 绝对路径：以单斜杠开头逐级开始编写，不能跳级。如: /html/body/div/p[1]/input
    • 相对路径：以双斜杠开头，双斜杠后边跟元素名称，不知元素名称可以使用代替。如：//input或者// *
  • 路径结合属性：在Xpath中，所有的属性必须使用@符号修饰如: //*[@id='id值']
  • 路径结合逻辑(多个属性)：//*[@id='id值' and @属性='属性值']
  • 路径结合层级：//*[@id='父级id属性值']/input

Xpath拓展
//* [text()='XXX'] # 定位文本值等于XXX的元素
提示：一般适合p标签，a标签
//* [contains(@属性,'xxx')] # 定位属性包含xxx的元素【重点】
提示：contains为关键字，不可更改。
//* [starts-with(@属性,'xxx')] # 定位属性以xxx开头的元素
提示：starts-with为关键字不可更改

3）提示

  • 一般建议使用指定标签名称，不使用*代替，效率比较慢
  • 无论是绝对路径和相对路径，/后面必须为元素的名称或者*
  • 如果能使用相对路径绝对不使用绝对路径

  • xpath定位的方法

driver.find_element_by_xpath(xpath)


  • 实例
    image
import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过xpath绝对定位搜索框，并输入adb
driver.find_element_by_xpath("/html/body/div/div/div[5]/div/div/form/span/input").send_keys("adb")

# 通过xpath路径结合属性定位搜索框，并输入adb
driver.find_element_by_xpath("//*[@id='kw']").send_keys("adb")
# 等待5秒
sleep(5)
# 退出
driver.quit()

8、CSS定位

说明:
1.css一种标记语言，焦点：数据的样式。控制元素的显示样式，就必须先找到元素，在css标记语言中找元素使用css选择器；
2.css定位就是通过css选择器工具进行定位。
3.极力推荐使用，查找元素的效率比xpath高，语法比xpath更简单。

1）CSS定位常用策略（参考百度首页输入框）

  • id 选择器

    • 前提：元素是必须有id属性
    • 语法：#id
    • 如：#kw

  • class 选择器

    • 前提：元素是必须有class属性
    • 语法：.class
    • 如：.s_ipt

  • 元素选择器

    • 语法：element
    • 如：input

  • 属性选择器

    • 语法：[属性名=属性值]
    • 如：[autocomplete="off"]

  • 层级选择器

    • 语法：
    • p>input
    • p input
      提示：>与空格的区别，>后面跟的必须为子元素，空格则并不一定为子元素

css拓展
[属性^='开头的字母'] # 获取指定属性以指定字母开头的元素
[属性$='结束的字母'] # 获取指定属性以指定字母结束的元素
[属性*='包含的字母'] # 获取指定属性包含指定字母的元素
百度首页搜索框：
绝对路径xpath：/html/body/div/div/div[5]/div/div/form/span/input
路径结合属性xpath：// * [@id='kw']
css：#kw

  • css定位的方法

driver.find_element_by_css_selector(css)

  • 实例
import time
from selenium import webdriver

# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过css中的id定位搜索框，并输入adb
driver.find_element_by_css_selector("#kw").send_keys("adb")

# 通过css中的class name定位搜索框，并输入adb
driver.find_element_by_css_selector(".s_ipt").send_keys("adb")
# 等待5秒
sleep(5)
# 退出
driver.quit()
posted @ 2023-03-09 14:48  ll=ll  阅读(4064)  评论(0)  编辑  收藏  举报