selenium-元素的定位

简介: selenium-元素的定位

前戏


元素的定位是自动化测试的核心,要想操作一个元素,首先应该识别这个元素。Webdriver 提供了一系列的元素定位方法,常用的有 id,name,class name,link text,partial link,tag name,xpath,css

讲定位之前先要了解说一下怎么定位,我们打开百度的首页,按F12,打开开发者工具,大概就是这个样子,点击Element,这里就是前端写的HTML代码,你在页面上所看到的页面就是通过HTML语言和CSS等前端语言展示在浏览器中的

 

其实所有的定位,底层 都是通过css来定位的,以下是它的源代码

def find_element(self, by=By.ID, value=None):
        """
        'Private' method used by the find_element_by_* methods.
        :Usage:
            Use the corresponding find_element_by_* instead of this.
        :rtype: WebElement
        """
        if self.w3c:
            if by == By.ID:
                by = By.CSS_SELECTOR
                value = '[id="%s"]' % value
            elif by == By.TAG_NAME:
                by = By.CSS_SELECTOR
            elif by == By.CLASS_NAME:
                by = By.CSS_SELECTOR
                value = ".%s" % value
            elif by == By.NAME:
                by = By.CSS_SELECTOR
                value = '[name="%s"]' % value
        return self.execute(Command.FIND_ELEMENT, {
            'using': by,
            'value': value})['value']

 

id定位


小需求:

打开百度首页,在搜索框里输入 selenium,python 等关键词,然后

点击搜索按钮,查看搜索页面

from selenium import webdriver
from time import sleep
drive = webdriver.Chrome()
drive.get('http://www.baidu.com')
sleep(3)
drive.find_element_by_id("kw").send_keys("selenium python")  # 通过 id 定位到搜索框,发送值 selenium python,find_element_by_id 查找元素通过 id
sleep(3)
drive.find_element_by_id("su").click()  # 通过 id 定位到搜索按钮,点击
sleep(3)
drive.quit()

这样就通过id定位到搜索框,通过send_keys给搜索框里传了selenium python关键字,然后定位到百度一下的按钮,click()点击


name定位


from selenium import webdriver
from time import sleep
drive = webdriver.Chrome()
drive.get('http://www.baidu.com')
sleep(3)
drive.find_element_by_name("wd").send_keys("英语")  # 通过 name定位到搜索框,发送值英语,
sleep(3)
drive.find_element_by_id("su").click()  # 通过 id 定位到搜索按钮,点击
sleep(3)
drive.quit()


tag_name定位


tag_name就是通过标签名定位

from selenium import webdriver
from time import sleep
drive = webdriver.Chrome()
drive.get('http://www.imooc.com')
drive.find_element_by_tag_name('input').send_keys('python')  # 定位标签名为 input 的第一个元素
drive.find_elements_by_tag_name('input')[0].send_keys('python')  # 定位标签名为 input 的元素,返回第一个
sleep(3)
drive.quit()

一般不通过标签名定位,因为他是从上到下依次取的


class_name


通过class属性值定位

from selenium import webdriver
from time import sleep
drive = webdriver.Chrome()
drive.get('http://www.baidu.com')
drive.find_element_by_class_name('s_ipt').send_keys('selenium')
drive.find_element_by_id('su').click()
sleep(3)
drive.quit()


通过超链接定位 link_text


selenium提供了两种超链接定位方式,第一种是链接文字(全部),第二种也是链接文字(部分文字)

from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get('http://www.imooc.com')
driver.maximize_window()
driver.find_element_by_link_text('免费课程').click()
sleep(3)
driver.find_element_by_partial_link_text('后端').click()  # 通过部分文字定位
driver.quit()


CSS定位


Selenium 推荐使用 css 定位,而不是 xpath 来定位元素,原因是 css 定

位比 xpath 定位速度快,语法也更加简洁

Css 常用方法定位

(1) find_element_by_css_selector()

(2) #id                              id 选择器根据 id 属性来定位元素

(3) .class                          class 选择器,根据 class 属性值来定位元素

(4) [attribute=’value’]       根据属性来定位元素

(5) element>element       根据元素层级来定位 父元素>子元素

来具体看两个例子

例子一:

from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
driver.find_element_by_css_selector("#kw").send_keys('python')  # 通过 id=kw 定位到
driver.find_element_by_css_selector('.s_ipt').send_keys('selenium')  # 通过 class =s_ipt 定位
driver.find_element_by_css_selector("[autocomplete='off']").send_keys('python')  # 通过属性 autocomplete=off 定位
driver.find_element_by_css_selector('#su').click()
sleep(2)
driver.quit()

例子二:

from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
driver.find_element_by_css_selector("[autocomplete='off']").send_keys('python')  # 通过属性 autocomplete=off 定位
driver.find_element_by_css_selector('form#form>span>input').send_keys('6666')
# 通过层级定位到输入框,先定位到id=form 的上级标签 form 上,在定位到下级 span 上,最后定位到第一个 input 标签
driver.find_element_by_css_selector('#su').click()
sleep(2)
driver.quit()

 

不知道大家看懂上面的定位方式了没,官方说比较简洁,但是我没觉得哪里简洁,我只是在学的时候用过CSS定位,在实际的工作中从来没有用过CSS定位。也许我比较菜吧,啊哈哈哈哈哈

当然。css还有其他的用法

目的:查找第一个div标签下的“查询”按钮

html>body>div>input[value='查询']

python定位语句

driver.find_element_by_css_selector("html>body>div>input[value='查询']")

通过">"符号分割,区别于XPath路径中的正斜杠(/),并且也不在使用@符号选择属性


2.使用相对路径定位


目的:查找第一个div标签下的“查询”按钮

input[value='查询']

python定位语句

driver.find_element_by_css_selector("input[value='查询']")

 

3.使用class名称定位元素


目的:查找第一个div标签下的input输入框

driver.find_element_by_css_selector(".spread")


4.使用id属性值定位


目的:查找第一个div标签下ID属性值为"div1input"的input页面元素

driver.find_element_by_css_selector("#div1nput")


5.使用页面其他属性值定位


目的:查找第一个div标签下的第一张图片img

(1):img[alt="div1-img1"]

(2):img[alt="div1-img1"][href="http://www.sogou.com"]

python定位语句

driver.find_element_by_css_selector('img[alt="div1-img1"][href="http://www.sogou.com"]')

(1)和(2)在本例中是等价的,(2)是使用了多个属性定位

 

6.使用属性值的一部分内容定位元素(貌似只能定位超链接)


目的:在被测网页中,查找“搜狗搜索”的链接

表达式1:a[href^="http://www.so"]

表达式2:a[href$="gou.com"]

表达式3:a[href*="so"]

python定位语句

driver.find_element_by_css_selector('a[href^="http://www.so"]')

表达式1表示匹配链接地址开始包含"http://www.so"关键字的链接元素,^表示从字符串的开头匹配

表达式2表示匹配链接地址开始包含"gou.com"关键字的链接元素,$表示从字符串的结尾匹配

表达式3表示匹配链接地址开始包含"so"关键字的链接元素,*表示需要进行模糊匹配

匹配动态变化的属性值


7.使用页面元素进行子页面元素的查找


目的:在被测网页中,查找第一个div下的第一个input标签

表达式1:div#div1>input#div1input

表达式2:div input

python定位语句

driver.find_element_by_css_selector('div#div1>input#div1input')

表达式1中的div#div1,表示在被测网页上定位到ID属性为div1的div标签,“>”表示在已查找到的div元素的子页面中进行查找,input#div1input表示查找ID属性值为div1input的input标签

表达式2表示匹配所有属于div元素后代的input元素,父元素div和子元素input间必须用空格分隔


8.使用伪类定位元素


目的:在被测网页中,查找第一个div下的指定子页面元素

表达式1:div#div1 :first-child

表达式2:div#div1 :nth-child(2)

表达式3:div#div1 :last-child

表达式4:input:focus

表达式5:input:enabled

表达式6:input:checked

表达式7:input:not([id])

python定位语句:

driver.find_element_by_css_selector('input:not([id])')

前三个表达式要注意,在冒号(:)前一定要有一个空格,否则就会定位不到期望的页面元素

表达式1:表示查找ID属性值为div1的div页面元素下的第一个子元素,参考被测网页的HTML可以看到定位的页面元素是input元素,first-child表示查找某个页面元素下的第一个子页面元素

表达式2:表示查找ID属性值为div1的div页面元素下的第二个子元素,参考被测网页的HTML可以看到定位的页面元素是链接元素,nth-child(2)表示查找某个页面元素下的第二个子页面元素,nth-child(3)表示查找某个页面元素下的第三个子页面元素 ,以此类推

表达式3:表示查找ID属性值为div1的div页面元素下的最后一个子元素,参考被测网页的HTML可以看到定位的页面元素是按钮元素,last-child表示查找某个页面元素下的最后一个子页面元素

表达式4:表示查找当前获取焦点的input页面元素

表达式5:表示查找可操作的input页面元素

表达式6:表示查找处于勾选状态的checkbox页面元素

表达式7:表示查找所有无id属性的input页面元素

 

9.查找同级兄弟页面元素


目的:在被测网页中,查找第一个div下第一个input子页面元素的同级兄弟页面元素

表达式1:div#div1>input+a

表达式2:div#div1>input+a+img

表达式3:div#div1>input+*+img

表达式4:ul#recordlist>p~li

表达式1表示在ID属性值为div1的div页面元素下,查找input页面元素后面的同级且临近的链接元素a

表达式2表示在ID属性值为div1的div页面元素下,查找input页面元素和链接元素后面的同级且临近的图片元素img

表达式3表示在ID属性值为div1的div页面元素下,查找input页面元素和元素后面的同级且临近的图片元素img ,*表示任意类型的一个页面元素,只能表示一个页面元素,如果想用此种方法查找第一个div下的最后一个input元素,表达式写法为

div#div1>input+*+*+input或div#div1>input+a+*+input或div#div1>input+a+img+input

表达式4表示子ID属性值为recordlist的ul页面元素下,查好p页面元素以后所有的li元素


10.多元素选择器


目的:在被测网页中,同时选择多个不同的页面元素

div#div,input,a

表示查找所有ID属性值为div1的div元素,所有的input元素,所有的a元素

 

下节来讲下xpath定位,也是我使用最多的定位,xpath定位功能十分的强大


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
selenium的常见表单元素操作(二)
selenium的常见表单元素操作(二)
|
1月前
|
Web App开发 前端开发 测试技术
Selenium 4新特性解析:关联定位器及其他创新功能
【10月更文挑战第6天】Selenium 是一个强大的自动化测试工具,广泛用于Web应用程序的测试。随着Selenium 4的发布,它引入了许多新特性和改进,使得编写和维护自动化脚本变得更加容易。本文将深入探讨Selenium 4的一些关键新特性,特别是关联定位器(Relative Locators),以及其他一些重要的创新功能。
153 2
|
1月前
|
Web App开发 Java 测试技术
selenium的常见表单元素操作(一)
selenium的常见表单元素操作(一)
|
3月前
|
JavaScript 前端开发
[selenium]相对定位器
[selenium]相对定位器
|
3月前
|
JavaScript Python
[selenium]取值元素文本属性样式
[selenium]取值元素文本属性样式
|
5月前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(七十一)-java+ selenium自动化测试-自定义类解决元素同步问题(详解教程)
【6月更文挑战第12天】本文介绍了如何创建一个自定义类库来解决自动化测试中的元素同步问题。作者指出,大部分错误源于元素因时间不同步而引发,为此提供了一种解决方案。在项目实践中,首先在`library`包下创建名为`MyWait`的类,包含一个方法`isElementPresent`,该方法通过循环尝试并等待指定元素出现,避免了直接使用时间等待可能导致的不准确性。之后,在测试类中调用此自定义方法,成功实现了元素同步。代码示例展示了如何在Java+Selenium自动化测试中应用这个自定义类。
58 2
|
6月前
|
JavaScript 前端开发 测试技术
《手把手教你》系列技巧篇(四十八)-java+ selenium自动化测试-判断元素是否可操作(详解教程)
【5月更文挑战第12天】本文介绍了WebDriver中用于判断元素状态的三个方法:`isEnabled()`、`isSelected()`和`isDisplayed()`。`isSelected()`检查元素是否被选中,通常用于勾选框。`isDisplayed()`则用来判断元素是否在页面上可见。`isEnabled()`方法确定元素是否可操作,例如是否能点击或输入内容。
121 1
|
6月前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)
【5月更文挑战第10天】本文介绍了使用Java和Selenium进行Web自动化测试的实践,以安居客网站为例。最后,提到了在浏览器开发者工具中调试和观察页面元素的方法。
64 2
|
6月前
|
存储 JavaScript Java
《手把手教你》系列技巧篇(四十七)-java+ selenium自动化测试-判断元素是否显示(详解教程)
【5月更文挑战第11天】WebDriver 的 `isDisplayed()` 方法用于检查页面元素是否可见,如果元素存在于DOM中且可视,返回`true`,否则返回`false`。在自动化测试中,这个方法常用于验证元素是否真正显示在页面上。示例代码展示了如何使用 `isDisplayed()` 判断百度登录页面的特定错误提示文字是否出现。
120 1
|
6月前
|
Web App开发 JavaScript 测试技术
《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
【5月更文挑战第9天】本文介绍了在Appium中处理App自动化测试中遇到的Toast元素定位的方法。Toast在Web UI测试中也常见,通常作为轻量级反馈短暂显示。文章提供了两种定位Toast元素的技巧.
61 0