自动化测试：盘点Selenium页面元素定位的8种方法

前段时间因项目需要，学习Selenium进行自动测试。现在总结整理下Selenium中元素定位的方法，希望可以帮助一些有疑问的朋友。

自动化测试步骤 :

定位元素操作元素验证操作结果记录测试结果

在自动化测试过程中，测试程序通常的操作页面元素步骤找到Web的页面元素，并赋予到一个存储对象中 (WebElement)对存储页面元素的对象进行操作，例如：点击链接，在输入框中输入字符等，验证页面上的元素是否符合预期。

通过这三个步骤， 我们可以完成一个页面元素的操作， 找到页面元素是很重要的一个步骤。 找不到页面元素，后面就没法做了，Web页面技术的现实复杂性， 造成大量的页面元素很难定位。经常有人不知道怎么定位。

定位方法大全

使用WebDriver对象的findElement函数定义一个Web页面元素

使用findElements函数可以定位页面的多个元素

定位的页面元素需要使用WebElement对象来存储，以便后续使用

常用的定位页面元素方法如下，

定位方法 ：Java语言实现实例

id 定位 driver.findElement(By.id(“id的值”))；

name定位 driver.findElement(By.name(“name的值”))；

链接的全部文字定位 driver.findElement(By.linkText(“链接的全部文字”))；

链接的部分文字定位 driver.findElement(By.partialLinkText(“链接的部分文字”))；

css 方式定位 driver.findElement(By.cssSelector(“css表达式”))；

xpath 方式定位 driver.findElement(By.xpath(“xpath表达式”))；

Class 名称定位 driver.findElement(By.className(“class属性”))；

TagName 标签名称定位 driver.findElement(By.tagName(“标签名称”))；

Jquery方式 Js.executeScript(“return jQuery.find(“jquery表达式”)”)

如何定位？

在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回元素句柄来定位元素

findElement() 方法返回一个元素, 如果没有找到,会抛出一个异 NoElementFindException()

findElements()方法返回多个元素, 如果没有找到,会返回空数组, 不会抛出异常

如何选择定位方法？

策略是，选择简单，稳定的定位方法。

当页面元素有 id属性的时候，尽量使用 id来定位。没有的话，再选择其他定位方法

cssSelector 执行速度快，推荐使用。

定位超链接的时候，可以考虑 linkText或 partialLinkText：但是要注意的是，文本经常发生改变，所以不推荐用。

xpath 功能最强悍。当时执行速度慢，因为需要查找整个DOM, 所以尽量少用。实在没有办法的时候，才使用 xpath。

这里，初学者可以根据下面的实例来一一了解如何进行元素的定位。

环境准备

首先创建一个hello.html页面，用于下面的演示

你好，世界！

我的看云首页

用户名:

密码:

地区:

广州

佛山

茂名

襄樊

提交

在同个目录下创建一个find_location.py文件，初始化工作

from selenium import webdriver

import os

# 创建Chrome驱动实例

driver = webdriver.Chrome()

# 启动浏览器并且导航到指定URL

# 这里为了覆盖更多的元素定位，我自己编写了一个本地的hello.html文件。

file_path = 'file:///' + os.path.abspath('hello.html')

driver.get(file_path)

元素定位

通过class定位

find_element_by_class_name(self, name):

find_elements_by_class_name(self, name):

# 定位class名称为“head_title"的元素

head_title = driver.find_element_by_class_name("head_title")

print(head_title.text)

通过id定位

find_element_by_id(self, id_):

find_elements_by_id(self, id_):

# 定位id为“world”的元素

world = driver.find_element_by_id("world")

print(world.text)

通过name属性定位

find_element_by_name(self, name):

find_elements_by_name(self, name):

# 定位name为“username”的元素

username = driver.find_element_by_name("username")

print(username.get_attribute("value"))

通过标签名定位

find_element_by_tag_name(self, name):

find_elements_by_tag_name(self, name):

# 定位标签为的元素

submit_btn = driver.find_element_by_tag_name("button")

print(submit_btn.text)

通过链接文本定位

find_element_by_link_text(self, link_text):

find_element_by_partial_link_text(self, link_text):

# 定位链接文本完全匹配“我的看云首页”的元素

kancloud = driver.find_element_by_link_text("我的看云首页")

print(kancloud.get_attribute("href"))

# 定位链接文本部分匹配“看云首页”的元素

kancloud = driver.find_element_by_partial_link_text("看云首页")

print(kancloud.get_attribute("href"))

通过xpath定位

find_element_by_xpath(self, xpath):

find_elements_by_xpath(self, xpath):

# xpath定位，相对路径定位用户名输入框

username = driver.find_element_by_xpath("//body/div/input")

print(username.get_attribute("value"))

# xpath定位，相对路径与属性结合 定位密码输入框

password = driver.find_element_by_xpath("//input[@name='password']")

print(password.get_attribute("value"))

# xpath定位，多个属性结合 定位密码输入框

password = driver.find_element_by_xpath("//input[@name='password'][@type='text']")

print(password.get_attribute("value"))

通过css选择器定位

find_element_by_css_selector(self, css_selector):

find_elements_by_css_selector(self, css_selector):

# css选择器，标签+属性 定位用户名输入框

username = driver.find_element_by_css_selector("input[name='username']")

print(username.get_attribute("value"))

# css选择器，标签+class类名 定位用户名输入框

username = driver.find_element_by_css_selector("input.user_name")

print(username.get_attribute("value"))

# css选择器，标签+多个class类名，定位密码输入框，注意不要空格，空格代表下一级子元素

password = driver.find_element_by_css_selector("input.ptqa.pwd")

print(password.get_attribute("value"))

# css选择器，id+多个class类名，定位密码输入框

password = driver.find_element_by_css_selector("#login_form .ptqa.pwd")

print(password.get_attribute("value"))

# css选择器，多级class类名，定位密码输入框

password = driver.find_element_by_css_selector(".login .ptqa.pwd")

print(password.get_attribute("value"))

# css选择器，class类名+属性，定位密码输入框

password = driver.find_element_by_css_selector(".login .ptqa[name='password']")

print(password.get_attribute("value"))

#css 选择器，根据父子关系，定位密码输入框

password = driver.find_element_by_css_selector("div[id='login_form']>input[name='password']")

print(password.get_attribute("value"))

# css 选择器，根据兄弟关系，定位密码输入框

password = driver.find_element_by_css_selector("input[name='username']+input")

print(password.get_attribute("value"))

上面的定位元素方法，都列出了两个，其中一个是 find_elements_by_xxx,这个方法用在获取结果有多个元素的情况，例如下面获取下拉列表选项

# 用find_element_by_css_selector 获取的是单个元素

mm = driver.find_element_by_class_name("city").find_element_by_css_selector("option[value='mm']")

print(mm.text)

print("-"*20)

# 用find_elements_by_css_selector获取的是元素组列表

cities = driver.find_elements_by_css_selector(".city option")

print(type(cities))

for city in cities:

print(city.text)

运行结果为：

茂名

--------------------

广州

佛山

茂名

襄樊

通用的终极定位语法

上面的所有元素定位 find_element_by_xxx和find_elements_by_xxx调用的结果，实际上都是在调用以下两种方法，我们也可以直接调用一下两种方法即可。

find_element(self, by=By.ID, value=None):

find_elements(self, by=By.ID, value=None):

class By(object):

"""

Set of supported locator strategies.

"""

ID = "id"

XPATH = "xpath"

LINK_TEXT = "link text"

PARTIAL_LINK_TEXT = "partial link text"

NAME = "name"

TAG_NAME = "tag name"

CLASS_NAME = "class name"

CSS_SELECTOR = "css selector"

例如：

from selenium.webdriver.common.by import By

# 根据id,定位id为“world”的元素

world = driver.find_element(By.ID,"world")

print(world.text)

# xpath定位，相对路径与属性结合 定位密码输入框

password = driver.find_element(By.XPATH,"//input[@name='password']")

print(password.get_attribute("value"))

# css选择器，标签+属性 定位用户名输入框

username = driver.find_element(By.CSS_SELECTOR,"input[name='username']")

print(username.get_attribute("value"))

定位总结

我最喜欢的定位方式，优先是id，如果没有id找class，如果class不好定位，找css选择器。我觉得css选择器是最灵活也是最强大的定位方式。使用xpath定位切记不要用绝对路径，最好结合相对路径与属性。

关注51Testing软件测试网，提升it技能，从不会到熟练只差一步。