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

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

自动化测试步骤 :

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

在自动化测试过程中,测试程序通常的操作页面元素步骤找到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页面,用于下面的演示

<!DOCTYPE html>

<html lang="zh-CN">

<body>

<h1 class="head_title">你好,<span id="world">世界!</span></h1>

<a href="https://www.kancloud.cn/@guanfuchang" target="_blank">我的看云首页</a>

<br/>

<br/>

<div id="login_form" class="login">

用户名:<input name="username" class="ptqa user_name" placeholder="用户名" value="Milton" required/>

密码:<input type="text" name="password" class="ptqa pwd" placeholder="密码" value="ptqa" required/>

地区:

<select class="city">

<option value="gz">广州</option>

<option value="fs">佛山</option>

<option value="mm">茂名</option>

<option value="hb">襄樊</option>

</select>

<br>

<br>

<button>提交</button>

<br>

</div>

</body>

</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):

# 定位标签为<button>的元素

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):

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

# 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)

运行结果为:

茂名

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

<class 'list'>

广州

佛山

茂名

襄樊

通用的终极定位语法

上面的所有元素定位 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技能,从不会到熟练只差一步。