自动化测试|selenium自动化测试——元素定位篇（下） python|selenium

一、饭前回顾
二、元素定位详解
- 1.find_element_by_xpath
- 2.find_element_by_css_selector
三、饭后总结

一、饭前回顾

id属性定位
- 语法：find_element_by_id(“id属性值”)
- 注意：动态id不能通过此方法定位
name属性定位
- 语法：find_element_by_name(“name属性值”)
class属性定位
- 语法：find_element_by_class_name(“class属性值”)
tag标签定位
- 语法：find_element_by_tag_name(“标签名”)
超链接定位
- 语法：find_element_by_link_text(“全部文本”) / find_element_by_partial_link_text(“部分连续文本”)

二、元素定位详解 1.find_element_by_xpath 使用场景：在元素定位的时候，一般会优先看是否有唯一的id、name、class等属性，当这些属性都不是唯一的时候，才会考虑xpath的方法。
(1)通过标签+属性定位元素
示例： https://www.taobao.com/
xpath表达式：//标签名[@属性名=‘属性值’]

# 1.导入selenium from selenium import webdriver from time import sleep # 2.打开浏览器——谷歌浏览器 driver = webdriver.Chrome("./chromedriver") # 3.输入网址 driver.get("https://www.taobao.com/") sleep(3) # 4.元素定位-xpath # 4.1 通过标签+属性定位元素 xpath_type = driver.find_element_by_xpath("//input[@id='q']") print("xpath——标签+属性",xpath_type.get_attribute("outerHTML")) # 5.关闭浏览器 driver.quit()

(2)通过层级关系定位元素
示例：https://www.taobao.com/
xpath表达式：//父标签名[@父标签属性名=‘父标签属性值’]/子标签名

# 4.2 通过层级关系定位元素 xpath_s = driver.find_element_by_xpath("//div[@class='search-combobox-input-wrap']/input") print("xpath——层级定位",xpath_s.get_attribute("outerHTML"))

以上输出结果如下：

文章图片
当然咯，层级关系不仅限于父子两层，还可以是多层。
(3)通过索引定位元素
示例：https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index
xpath表达式：//父标签[@父标签属性名=‘父标签属性值’]/子标签[索引值]
使用场景：当一个父标签有多个相同的子标签
注意事项：xpath的索引从1开始

# 1.导入selenium from selenium import webdriver from time import sleep # 2.打开浏览器——谷歌浏览器 driver = webdriver.Chrome("./chromedriver") # 3.输入网址 driver.get("https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index") sleep(3) # 4.元素定位-xpath索引 # 通过索引定位第一个和第二个input标签 first = driver.find_element_by_xpath("//select[@id='searchHotelLevelSelect']/option[1]") # 定位的是第一个input标签 second = driver.find_element_by_xpath("//select[@id='searchHotelLevelSelect']/option[2]") # 定位的是第二个input标签 print("第一个input标签",first.get_attribute("outerHTML")) print("第二个input标签",second.get_attribute("outerHTML")) # 5.关闭浏览器 driver.quit()

输出结果如下：

文章图片

(4)通过逻辑运算定位元素
示例：https://account.cnblogs.com/signin
xpath表达式：//标签名[@属性名1=‘属性值1’ and @属性名2=‘属性值2’]
使用场景：当元素属性值相同的时候，可以通过多个属性，使用and进行连接。
举个：以博客园的注册页为例，定位两个input框后发现class属性值相同。这时候就可以利用class属性结合其他属性来定位。当然咯，在这个例子利用id定位显然更方便，但是实际工作可能会碰到属性值重复的场景，这个方法就很有效啦。

文章图片

话不多说，上代码。

# 1.导入selenium from selenium import webdriver from time import sleep # 2.打开浏览器——谷歌浏览器 driver = webdriver.Chrome("./chromedriver") # 3.输入网址 driver.get("https://account.cnblogs.com/signin") sleep(3) # 4.元素定位-xpath索引 # xpath逻辑定位(and) test = driver.find_element_by_xpath("//input[@class='form-control' and @placeholder='密码']") print("输入框",test.get_attribute("outerHTML")) # 5.关闭浏览器 driver.quit()

输出结果如下：

文章图片

2.find_element_by_css_selector CSS可以通过id、class、标签三个常规属性定位到相应的元素。
(1)通过id、class定位元素
示例：https://www.taobao.com
css表达式：#表示id属性，用.表示class属性。

# 1.导入selenium from selenium import webdriver from time import sleep # 2.打开浏览器——谷歌浏览器 driver = webdriver.Chrome("./chromedriver") # 3.输入网址 driver.get("https://www.taobao.com") sleep(3) # 4.元素定位-css_selector # 4.1 使用id i = driver.find_element_by_css_selector("#q") print("使用id属性",i.get_attribute("outerHTML")) # 4.2 使用class c = driver.find_element_by_css_selector(".search-combobox-input") print("使用class属性",c.get_attribute("outerHTML")) # 5.关闭浏览器 driver.quit()

(2)通过标签+属性定位元素
示例：https://www.taobao.com
css表达式：标签名[属性名=‘属性值’]

t = driver.find_element_by_css_selector("input[aria-label='请输入搜索文字']") print("使用标签+属性",t.get_attribute("outerHTML"))

(3)通过层级定位元素
示例：https://www.taobao.com
css表达式：父标签[父标签属性名=‘父标签属性值’ 子标签] / 父标签[父标签属性名=‘父标签属性值’>子标签]

l = driver.find_element_by_css_selector("div[class='search-combobox-input-wrap'] input") print("使用层级定位",l.get_attribute("outerHTML"))

以上定位方式输出相同，结果如下：

文章图片

(4)通过索引定位元素
示例：https://account.cnblogs.com/signin
css表达式：父标签[父标签属性名=‘父标签属性值’]>子标签:nth-child(索引值)，其中nth-child(索引值)表示父标签下所有子标签的顺序。

# 1.导入selenium from selenium import webdriver from time import sleep # 2.打开浏览器——谷歌浏览器 driver = webdriver.Chrome("./chromedriver") # 3.输入网址 driver.get("https://account.cnblogs.com/signin") sleep(3) # 4.5 使用索引定位输入框 index = driver.find_element_by_css_selector("form#loginForm>div:nth-child(2)>input") # 父标签下所有子标签顺序值 print("使用索引定位",index.get_attribute("outerHTML")) # 5.关闭浏览器 driver.quit()

输出结果如下：

文章图片

(5)通过逻辑定位元素
示例：https://account.cnblogs.com/signin
css表达式：标签名[属性名1=‘属性值1’][属性名2=‘属性值2’]

# 4.6 使用逻辑定位输入框 logic = driver.find_element_by_css_selector("input[type='text'][placeholder='登录用户名 / 邮箱']") print("使用逻辑多个属性",logic.get_attribute("outerHTML"))

输出结果如下：

文章图片

(6)通过模糊匹配定位元素
示例：https://account.cnblogs.com/signin
css表达式：*表示所有，^表示以…开头，$表示以…结尾。

# 4.7 使用模糊匹配定位输入框 # 使用 * 表示匹配所有 m = driver.find_element_by_css_selector("input[type*='x']") # 推荐使用 # m = driver.find_element_by_css_selector("input[type^='te']") # m = driver.find_element_by_css_selector("input[type$='xt']") print("使用模糊匹配*",star.get_attribute("outerHTML"))

输出结果如下：

文章图片

三、饭后总结 【自动化测试|selenium自动化测试——元素定位篇（下）】通过本次内容的学习，不难发现css的表达式相较于xpath更为简洁，然鹅理解起来可能相对困难一些。此外，css提供了更加多元化的定位方式，在查找元素方面显得更为灵活。css的查询效率较高，在性能层面也优于xpath。因此，推荐小伙伴们多多使用find_element_by_css_selector的方式来定位元素~
五月的最后一天，愿今天的你，也有在朝着理想的方向继续努力。当然咯，未来的每一天都要努力地向前冲鸭！