Selenium之页面元素定位

简介: WebDriver提供了八种页面元素定位的方法。

单个元素定位

WebDriver提供了八种页面元素定位的方法,下面来依次为大家介绍一下:

id定位:     find_element_by_id("")

HTML页面规定了id属性在HTML文档中必须是唯一的(页面id不唯一时,在编辑器中会标红显示,但是页面依然能正常加载)。id定位方法就是通过元素的id属性来查找元素,比如通过id定位百度输入框:

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
find_element_by_id("kw")

name定位:    find_element_by_name("")

HTML页面元素中有时候会指定name属性,有name属性的元素可以通过name进行定位,但要注意name属性在同一个页面可能存在多个相同的元素.

通过name属性定位百度输入框:

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
find_element_by_name("wd")

class定位:    find_element_by_class_name("")

class定位方式与id、name类似,下面通过class定位百度输入框:

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
find_element_by_class_name("s_ipt")

tag定位:    find_element_by_tag_name("")

通过html元素的标签类型去定位元素,这个在页面中会存在很多tag name相同的元素,用这种方式识别元素的概率很低。

find_element_by_class_name("input")
find_element_by_class_name("div")

link定位:    find_element_by_link_text()

link通常用来定位文本链接,比如百度首页上方的链接就可以通过link的方式定位:


微信图片_20220113162231.png

find_element_by_link_text("新闻")
find_element_by_link_text("hao123")
find_element_by_link_text("地图")

partial link定位:    driver.find_element_by_link_text()

partial link定位是对link定位的一种补充,有些文本链接会比较长,这个时候可以取文本链接的一部分进行定位,只要这一部分信息可以唯一地标识这个链接。

<a  class="mnav" href="#">一个很长很长很长的文本链接</a>
find_element_by_link_text("一个很长的")
find_element_by_link_text("很长的文本链接")

xpath定位:    driver.find_element_by_xpath()

xpath有很多种定位策略,最简单直观的就是写出元素的绝对路径:

  • xpath-利用绝对路径定位
    如果一个层级下有多个相同的标签名时,那么就按上下顺序确定是第几个,比如div[2]表示当前层级下的第二个div标签。
find_element_by_xpath("/html/body/div/div[2]/div/form/span[2]/input")
  • xpath-利用元素属性定位
find_element_by_xpath("//input[@id='kw']")

//表示当前页面某个目录下,imput表示定位元素的标签名,[@id='kw']表示这个元素的id属性值等于kw。下面演示通过name和class定位:

find_element_by_xpath("//input[@name='wd']")
find_element_by_xpath("//input[@class='s_ipt']")
find_element_by_xpath("//*[@class='bg_s_btn']")

如果不想指定标签名,则也可以用星号(*)代替。用xpath不局限与id,name,class等属性,元素的任意属性值都可以使用,只要它能唯一的标识一个元素。

find_element_by_xpath("//input[@maxlength='100']")
find_element_by_xpath("//input[@autocomplete='off']")
find_element_by_xpath("//input[@type='submit']")
  • xpath-利用层级和属性结合起来定位

如果一个元素本身没有可以唯一标识这个元素的属性值,那么我们可以往上找其对应的其他层级是否有可以唯一标识属性的值,也可以拿来使用。

find_element_by_xpath("//form[@id='form']/input")
find_element_by_xpath("//form[@id='form']/span[2]/input")
  • xpath-使用逻辑运算符连接多个属性值定位

如果一个属性不能唯一地区分一个元素,我们还可以使用逻辑运算符连接多个属性来查找元素。

比如:现在有以下一段元素要定位:

......
<input id="kw" class="su" name="ie">
<input id="kw" class="aa" name="ie">
<input id="bb" class="su" name="ie">
......

此时,要定位第一行的input元素,就可以采用下面的写法:

find_element_by_xpath("//input[@id='kw' and @class='su']")

xpath定位除以上几种方式手写定位外,谷歌浏览器还可以借助浏览器自带的功能进行xpath元素定位的复制,火狐浏览器还可以借助FireBug插件进行元素xpath等方式定位复制。下面演示一下如果在谷歌浏览器上复制百度首页某个元素的xpath路径:

1、鼠标选中要定位的元素,右键->选择检查

2、选择屏幕下方高亮的元素,右键->copy->copy xpath / copy full xpath,然后粘贴即可

copy xpath:会根据工具智能的复制出精简的xpath路径, copy full xpath:复制的是全路径的绝对地址定位元素,但这2种方式复制出来的路径并不能保证100%就一定可用,有时候需要自己再进行一些调整。


微信图片_20220113162235.gif


CSS定位:    find_element_by_css_selector(".s_ipt")

css可以比较灵活的选择控件的任意属性,一般情况下定位速度要比xpath快,但对于初学者来说的话,学习起来稍微有点难度,下面就简单地介绍一下css的语法和使用。

css选择器的常见语法

选择器
例子
描述
.class
.intro
class选择器,选择class="intro"的所有元素
#id
#kw
id选择器,选择id="kw"的所有元素
*
*
选择所有元素
element
p 元素所有<p>元素
element > element
div > input
选择父元素为<div>的所有<input>元素
element + element
div + input
选择同一级中紧接在<div>元素之后的所有<input>元素
[attribute=value]
[target=_blank]
选择target="_blank"的所有元素

具体用法演示:

1、通过class属性定位
find_element_by_css_selector(".s_ipt")
2、通过id属性定位
find_element_by_css_selector("#kw")
3、通过标签定位
find_element_by_css_selector("input")
4、通过父子关系定位
find_element_by_css_selector("span>input")
5、通过属性定位
find_element_by_css_selector("[autocomplete=off]")
find_element_by_css_selector("[name=kw]")
6、组合定位
find_element_by_css_selector("form.fm>span>input.s_ipt")
find_element_by_css_selector("form#form>span>input#kw")

以上简单的介绍了8中定位方法,WebDriver还提供了另外一套写法,即统一调用find_element()方法,通过By来声明定位的方法,并且传入对应定位方法的定位参数。具体如下:

• find_element(By.ID,"loginName")
• find_element(By.NAME,"SubjectName")
• find_element(By.CLASS_NAME,"u-btn-levred")
• find_element(By.TAG_NAME,"input")
• find_element(By.LINK_TEXT,"退出")
• find_element(By.PARTIAL_LINK_TEXT,"退")
• find_element(By.XPATH,"//*[@id='Title']")
• find_element(By.CSS_SELECTOR,"[type=submit]")

其实前面8中定位方法,底层也是调用的find_element()方法

   def find_element_by_id(self, id_):
        """Finds an element by id.
        :Args:
         - id\_ - The id of the element to be found.
        :Returns:
         - WebElement - the element if it was found
        :Raises:
         - NoSuchElementException - if the element wasn't found
        :Usage:
            element = driver.find_element_by_id('foo')
        """
        return self.find_element(by=By.ID, value=id_)


find_element(),find_elements()区别

细心的同学会发现,在使用的时候,除了find_element()之外,还会有一个find_elements()方法,那么他们两有什么区别呢?

1.只查找一个元素的时候:可以使用find_element(),find_elements()

 find_element()会返回一个WebElement节点对象,但是没找到会报错,而find_elements()不会,之后返回一个空列表

2.查找多个元素的时候:只能用find_elements(),返回一个列表,列表里的元素全是WebElement节点对象

3.如果想要获取元素相关内容,find_element()可直接获取,find_elements()需要获取列表某个指定元素之后才能获取相关内容

一组元素定位

前面已经介绍了单个元素定位的方法,这里再介绍一种定位一组元素的方法:

find_elements_by_id()

find_elements_by_name()

find_elements_by_class_name()

find_elements_by_tag_name()

find_elements_by_link_text()

find_elements_by_partial_link_text()

find_elements_by_xpath()

find_elements_by_css_selector()

看出区别了吗?这几个方法在element后面加了一个s,能够定位多个属性相同的元素,返回的是一个元素对象的数组,定位不到时,返回的是一个空数组,不会报元素找不到的异常。

应用场景:比如下拉框的时候 ,先定位获取下拉框的所有选项,再循环遍历,找到满足条件的某个元素,选中或者做其他操作。

相关文章
|
22天前
|
Web App开发 前端开发 Java
《手把手教你》系列技巧篇(九)-java+ selenium自动化测试-元素定位大法之By name(详细教程)
【4月更文挑战第1天】 这篇教程介绍了如何使用Selenium Webdriver通过name属性来定位网页元素,作为系列教程的一部分,之前讲解了id定位,后续还会有其他六种定位方法。文中以百度搜索为例,详细说明了定位搜索框(name=&quot;wd&quot;)并输入关键词“北京宏哥”的步骤,包括手动操作流程、编写自动化脚本以及代码实现。此外,还提供了查看和理解Selenium源码的方法,强调了`open implementation`选项用于查看方法的具体实现。整个过程旨在帮助读者学习Selenium的元素定位,并实践自动化测试。
41 0
|
1月前
|
Web App开发 存储 JavaScript
《手把手教你》系列技巧篇(八)-java+ selenium自动化测试-元素定位大法之By id(详细教程)
【2月更文挑战第17天】本文介绍了Web自动化测试的核心——元素定位。文章首先强调了定位元素的重要性,指出找不到元素则无法进行后续操作。Selenium提供八种定位方法,包括By id、name、class name等。其中,By id是最简单快捷的方式。文章还阐述了自动化测试的步骤:定位元素、操作元素、验证结果和记录测试结果。此外,讨论了如何选择定位方法,推荐优先使用简单稳定的方式,如id,其次考虑其他方法。最后,作者提供了Chrome浏览器的开发者工具作为定位元素的工具,并给出了通过id定位的代码示例。
51 0
|
18天前
|
前端开发 Java 测试技术
《手把手教你》系列技巧篇(十二)-java+ selenium自动化测试-元素定位大法之By link text(详细教程)
【4月更文挑战第4天】本文介绍了link text在自动化测试中的应用。Link text是指网页中链接的文字描述,点击可跳转至其他页面。文章列举了8种常用的定位方法,其中着重讲解了link text定位,并通过实例展示了如何使用Java代码实现点击百度首页的“奥运奖牌榜 最新排名”链接,进入相应页面。如果link text不准确,则无法定位到元素,这说明linkText是精准匹配,而非模糊匹配。文章还提到了partial link text作为link text的模糊匹配版本,将在后续内容中介绍。
37 4
|
16天前
|
XML 前端开发 Java
《手把手教你》系列技巧篇(十四)-java+ selenium自动化测试-元素定位大法之By xpath上卷(详细教程)
【4月更文挑战第6天】按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath。xpath 的定位方法, 非常强大。使用这种方法几乎可以定位到页面上的任意元素。xpath 是XML Path的简称, 由于HTML文档本身就是一个标准的XML页面,所以我们可以使用Xpath 的用法来定位页面元素。XPath 是XML 和Path的缩写,主要用于xml文档中选择文档中节点。基于XML树状文档结构,XPath语言可以用在整棵树中寻找指定的节点。
43 0
|
11天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
35 2
|
12天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
49 0
|
13天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
39 1
|
4月前
|
移动开发 安全 测试技术
『App自动化测试之Appium应用篇』| 继承于selenium常用的元素定位方法有哪些?如何使用?
『App自动化测试之Appium应用篇』| 继承于selenium常用的元素定位方法有哪些?如何使用?
84 0
|
2月前
|
Python
Python selenium 页面滚动
Python selenium 页面滚动
14 0
|
4月前
|
XML 人工智能 前端开发
软件测试/人工智能|selenium元素定位方式大全
软件测试/人工智能|selenium元素定位方式大全
28 0

热门文章

最新文章