前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >全网最全关于selenium webdriver 8大元素定位详解

全网最全关于selenium webdriver 8大元素定位详解

作者头像
全栈程序员站长
发布2022-06-29 15:13:52
1.2K0
发布2022-06-29 15:13:52
举报
文章被收录于专栏:全栈程序员必看

selenium 常用的元素定位方式

元素的定位应该是自动化测试的核心,想要操作一个元素,首先应该识别这个元素。Webdriver提供了一系列的元素定位方法。

代码语言:javascript
复制
常用的有以下几种:
1、id
2、name
3、class name
4、link text
5、partial link text
6、tag name
7、xpath
8、css selector

首先,我们先看看下面的这段HTML的代码,接下来我们会通过这段代码去介绍元素定位的方式。

代码语言:javascript
复制
<span class="bg s_ipt_wr quickdelete-wrap">
    <span class="soutu-btn"></span>
    <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
    <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>
</span>
<span class="bg s_btn_wr">
    <input id="su" class="bg s_btn" type="submit" value="百度一下">
</span>

id元素定位

案例:打开百度首页,在搜索框中自动输入“Selenium”,然后点击搜索按钮,查看搜索页面。

代码语言:javascript
复制
# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 通过id定位元素
driver.find_element_by_id('kw').send_keys("selenium")

# 点击搜索按钮
driver.find_element_by_id('su').click()

name元素定位

代码语言:javascript
复制
# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 通过name定位元素
driver.find_element_by_name('wd').send_keys("selenium我要自学网")

#点击搜索按钮
driver.find_element_by_id('su').click()

元素定位class_mame

代码语言:javascript
复制
# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 使用class_name定位元素
driver.find_element_by_class_name("s_ipt").send_keys("selenium")

sleep(3)

driver.find_element_by_id("su").click()
sleep(2)
driver.quit()

大家如果在项目实战的过程中,会发现classname可能会存在空格类的复合元素,如class=”van-cell van-field”那么一般通过name定位通常会报错,报错的时候,我们可以在consle中使用:

代码语言:javascript
复制
document.getElementsByClassName("van-cell van-field")
在这里插入图片描述
在这里插入图片描述

方法查看页面一共有多少个classname,假设包含多个,我们可以从上一个层级的div中定位class,如果元素为多个时,我们可以使用下标进行定位,如下代码

代码语言:javascript
复制
# coding=utf-8
from selenium.webdriver.support import expected_conditions as EC
from selenium import webdriver
import time


driver = webdriver.Chrome()
driver.get("http://localhost:8080/login")
time.sleep(5)
print(EC.title_contains("登录"))
user_name2 = driver.find_elements_by_class_name("van-cell")[0]
user_name = user_name2.find_elements_by_class_name("van-field__control").send_keys("188****7063")

Xpath层级与逻辑定位

在工作中,我们用xapth的相对路径定位会非常多

代码语言:javascript
复制
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.51zxw.ne")

#层级和属性结合定位--自学网首页输入用户名和密码
#driver.find_element_by_xpath("//form[@id='loginForm']/ul/input[1]").send_keys('51自学网')

#逻辑运算组合定位and
driver.find_element_by_xpath("//input[@class='loinp'and @name='username']").send_keys('666')
sleep(3)
driver.find_element_by_xpath("//from[@id='loginForm']/ul/input[2]").send_keys(666)


xpath分为绝对路径和相对路径

相对路径:
    1、//标签名[@属性=值]
    // 如:i[@class="ing"]
    //*[@*="ing"] * 星号表示通配符,匹配所有
    
    2、文本匹配  //标签名[text() = 值]
    
    //a[text()="公告"]
    
    3、包含  // 标签名[contains@属性/text(), 值]
    
    //a[contains(@herf, "Notif/index/courseid/")]
    //a[contains(text(), "公告")]
    
    4、逻辑运算符来组合更多元素特征 and or
    
    // 标签名@属性=值 and @属性=值 and contains(@属性/text(), 值) and text()=值
    
    5、层级定位://一级元素//二级元素//...
    
    //div[@id="number"]//i[@class="ing"]
    
    6、轴定位
    
    ancestor: 祖先结点 包括父节点
    parent: 父节点 
    preceding: 当前元素节点标签之前的所有节点
    preceding-sibling: 当前元素节点标签的上级
    following: 当前元素节点标签的下级
    following-sibling: 当前元素节点标签之后的所有兄弟节点
    
    //div//table//td//preceding::td
    
    //td[@class="el-table_358_column_2401 is-center "]/preceding-sibling::img[@class="imglogo"]

CSS常用定位方法

Selenium极力推荐使用CSS定位,而不是xpath来定位元素,原因是CSS定位比Xpath定位速度快,语法也更加简洁。

代码语言:javascript
复制
1、find_element_by_css_selector()
2、#id
id选择器根据id属性来定位元素
3、.class class选择器,根据class属性值来定位元素
4、[attribute = 'value']根据属性来定位元素
5、element > element 根据元素层级来定位 父元素>子元素
代码语言:javascript
复制
案例
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

#通过id定位元素
driver.find_element_by_css_selector("#kw").send_keys("Selenium 我要自学网")
sleep(2)

#通过class定位元素
driver.find_element_by_css_selector(".s_ipt").send_keys("python")

#通过属性定位元素
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys("python")

#通过元素层级定位
driver.get("http://www.51zxw.net")
driver.find_element_by_css_selector("form#loginForm>ul>input[type='password']").send_keys("python")

元素定位tag_name

代码语言:javascript
复制
# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.51zxw.net/")

# 使用标签名定位元素,通常标签名会存在多个,所以用下标定位标签名的位置
# 通常不建议使用tag_name定位元素
driver.find_elements_by_tag_name('input')[0].send_keys("selenium")

sleep(3)

driver.quit()

find_elements_by_id

代码语言:javascript
复制
// 一个元素的值,可能存在多个相同的,因此我们可以使用find_elements_by_id这种方法,找到属性值,然后定义一个变量,通过索引的方式去进行定位元素。

from selenium import webdriver

driver = webdriver.Chrome()

driver.get("http://www.baidu.com")
ids = driver.find_elements_by_id("login")

ids[0].send_keys("test")

ids[1].send_keys("123")

元素定位by

代码语言:javascript
复制
from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
driver.implicitly_wait(5)

#使用by方式进行定位
driver.find_element(By.ID,"kw").clear()
driver.find_element(By.NAME,"wd").click()
driver.find_element(By.CLASS_NAME,"s_ipt").send_keys("自学网")
driver.find_element(By.CSS_SELECTOR,"#KW").send_keys('python')

sleep(3)

driver.find_element(By.ID,'kw').click()

fream框架元素定位

案例:在Frame.html文件中定位搜狗搜索页面,进行搜索操作。 什么是frame嵌套? 通俗点的理解,就是一个页面中嵌套了另外一个网站的页面。frame对象代表了一个HTML的内联框架,如果你在自动化测试中无法定位到元素,那么最大的可能就是元素在frame框架中。

代码语言:javascript
复制
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
file_path = r"C:\Users\yuxiaoqi\PycharmProjects\untitled\Html\Frame.html"

driver.get(file_path)

#使用.switch_to.frame方法,切换至frame页面
driver.switch_to_frame("search")

# 如果有嵌套的iframe,则再次进入到二级的ifeame中
driver.switch_to_frame('son')


driver.find_element_by_css_selector("#query").send_keys("python")
sleep(2)
driver.find_element_by_css_selector("#stb").click()

# 跳出ifeame框架
driver.switch_to_default_content()

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/100700.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档