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,能够定位多个属性相同的元素,返回的是一个元素对象的数组,定位不到时,返回的是一个空数组,不会报元素找不到的异常。

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

相关文章
|
10月前
|
Web App开发 XML 前端开发
Selenium安装及八大元素定位方法&介绍及使用教程
Selenium是一个支持多种编程语言的自动化测试工具,用于Web应用的测试。它提供了多种元素定位策略,包括ID、Name、Class Name、Tag Name、Link Text、Partial Link Text、CSS Selector和XPath。安装Selenium需先确保Python和pip已安装,然后通过pip安装库,并下载对应浏览器的WebDriver。验证安装成功后,可通过编写简单脚本来打开网页并打印标题。注意WebDriver版本应与浏览器兼容,且可能需要额外的依赖包。文章还介绍了XPath的两种类型及其区别,推荐使用相对XPath以提高稳定性。
303 0
|
5月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
185 4
|
5月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
167 2
|
7月前
|
设计模式 Java 测试技术
【Selenium使用误区】Iframe元素定位失败:避免误提GitHub Issue的技巧
本文分享了作者在使用Selenium进行UI自动化测试时遇到的一个常见问题:在模拟登录163邮箱的过程中,元素定位失败,原因是没有正确地定位到iframe内的元素。文章通过分析问题原因、提供解决方案和附录代码,指导读者如何避免类似的错误,并强调了在UI自动化测试中准确定位页面元素的重要性。
72 1
|
7月前
|
XML 前端开发 JavaScript
[selenium]元素定位
[selenium]元素定位
|
8月前
|
测试技术 API Android开发
《手把手教你》系列基础篇(九十七)-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类(详解教程)
【7月更文挑战第15天】这是关于自动化测试框架中Selenium API二次封装的教程总结。教程中介绍了如何设计一个支持不同浏览器测试的页面基类(BasePage),该基类包含了对Selenium方法的二次封装,如元素的输入、点击、清除等常用操作,以减少重复代码。此外,页面基类还提供了获取页面标题和URL的方法。
188 2
|
8月前
|
数据采集 前端开发 测试技术
【Python】已解决:(最新版selenium框架元素定位报错)NameError: name ‘By’ is not defined
【Python】已解决:(最新版selenium框架元素定位报错)NameError: name ‘By’ is not defined
240 0
|
10月前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十九)-java+ selenium自动化测试-隐藏元素定位与操作(详解教程)
【5月更文挑战第13天】本文主要讨论了在Selenium自动化测试中如何处理前端隐藏元素的问题。隐藏元素通常是通过`type="hidden"`或`style="display: none;"`属性实现的,它们在页面上不可见,但仍然存在于HTML代码中。Selenium可以定位到这些隐藏元素,但无法直接进行点击、输入等操作,会报错“ElementNotInteractableException”。
173 3
|
10月前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)
【5月更文挑战第10天】本文介绍了使用Java和Selenium进行Web自动化测试的实践,以安居客网站为例。最后,提到了在浏览器开发者工具中调试和观察页面元素的方法。
84 2
|
10月前
|
Web App开发 前端开发 JavaScript
《手把手教你》系列技巧篇(二十)-java+ selenium自动化测试-元素定位大法之终卷(详细教程)
【4月更文挑战第12天】本文介绍了Selenium的八种元素定位方式,包括id、name、class name、css selector、link text、partial link text、tag name和xpath,并给出了每种方式的示例代码。建议在选择定位方法时,优先使用唯一性的id和name,其次考虑css或xpath,但要注意它们的性能影响。
248 6