Selenium3自动化测试【20】CSS定位元素
CSS 指层叠样式表 (CascadingStyleSheets),CSS一种用来表现HTML或XML等文件样式的计算机语言,其能够灵活的为页面提供丰富样式的风格。
CSS使用选择器为页面元素绑定属性(如ID、class等),这些选择器可以被Selenium使用来进行定位元素。CSS较为灵活的选择控件的任意属性,CSS定位元素的速度比xpath速度快。
CSS定位是通过find_element_by_css_selector方法。
仍然以bing搜索页为例介绍CSS定位的用法。
要操作Bing搜索页。
- 通过CSS找到搜索框与搜索按钮元素;
- 通过键盘输入检索的关键字;
- 用鼠标单击搜索按钮;
- 提交搜索请求。
搜素框元素的html代码。
<input class="b_searchbox" id="sb_form_q" name="q" title="输入搜索词" type="search" value="" maxlength="100" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" aria-controls="sw_as" aria-autocomplete="both" aria-owns="sw_as">
搜索按钮元素的html代码
<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">
1. ID定位
通过元素的ID,find_element_by_css_selector()方法实现的源码如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
driver.find_element_by_css_selector("#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("#sb_form_go").click()
sleep(3)
driver.quit()
2. class定位
通过元素的class, find_element_by_css_selector()方法实现的源码如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
通过css - class定位
driver.find_element_by_css_selector(".b_searchbox").send_keys("bella")
driver.find_element_by_css_selector(".b_searchboxSubmit").click()
sleep(1)
driver.quit()
- 通过name属性定位
借助name属性,通过的find_element_by_css_selector()方法实现的源码如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
通过css-属性定位
driver.find_element_by_css_selector("[name='q']").send_keys("bella")
driver.find_element_by_css_selector("[name='go']").click()
sleep(1)
driver.quit()
4. CSS层级定位
类似XPath的层级定位,CSS也可以通过层级(父元素)实现元素的定位。
搜索框元素的上一级是1个div标签,该div标签的clalss属性等于b_searchboxForm,html代码如下:
<div class="b_searchboxForm" role="search" data-bm="15">
……
……
</div>
搜索按钮元素的上一级也是1个div标签,该div标签的id属性等于sb_go_par,该div的html代码如下:
<div id="sb_go_par" data-sbtip="搜索网页">。
<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">
</div>
搜素框元素与父元素(class等于b_searchboxForm)的结合。
find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q")
搜索按钮元素与父元素(id等于sb_go_par)的结合。
find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit")
可以看到父元素与子元素是通过 > 连接起来的。
通过CSS层级定位,find_element_by_css_selector()方法实现的源码如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
通过css 层级定位
输入框为id,搜索按钮为class
driver.find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit").click()
sleep(1)
driver.quit()
可以通过FireFox浏览器自带的FireFox Developer Tools工具快速生成CSS语法,生成的操做方法与XPath相同,如图所示。
单击【CSS选择器】,即可复制搜素框元素的CSS语法(#sb_form_q),这样快速的获取某元素的CSS语法。
单击【CSS路径】,可获取搜素框元素的CSS路径(类似XPath绝对路径),如图所示。
搜素框元素的CSS路径。
html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox
搜素按钮元素的CSS路径。
html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm div#sb_go_par input#sb_form_go.b_searchboxSubmit
通过CSS绝对路径,find_element_by_css_selector()方法实现的源码如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
通过css 层级 # 通过完成css路径来定位
driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox").send_keys("bella")
driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_go.b_searchboxSubmit").click()
sleep(3)
driver.quit()
如果你觉的文章读的不过瘾,可以查看详细的视频教程。
【2021】UI自动化测试:Selenium3自动化测试
https://ke.qq.com/course/3172187?tuin=9c43f38e
【测试全系列视频课程】请点击我哦.....
地址:https://ke.qq.com/course/2525707?tuin=9c43f38e
图书京东、当当有售
京东:https://item.jd.com/12784287.html
当当:http://product.dangdang.com/29177828.html)!
最新文章
- Sublime Text3配置在可交互环境下运行python快捷键
- linux学习之-vsftp
- RDIFramework.NET开发实例━表约束条件权限的使用-WinForm
- OpenCV 绘制图像直方图
- Kubuntu(14.04)共享wifi(热点)
- Android学习之 UI效果
- QF——iOS沙盒机制
- Windbg找出死锁
- spring boot maven 插件
- JavaScript中你所不知道的Object(一)
- 借助Docker单机秒开数十万TCP连接
- selenium python 中浏览器操作
- vue-cli 部分浏览器不支持es6的语法-babel-polyfill的引用和使用
- Ubuntu下安装open-falcon-v0.2.1
- CentOS7下mariadb日常管理
- 七牛云java(服务端)通用工具类
- weblogic92一次成功修改密码的记录
- C#字符串截取、获取当前电脑时间、判断输入日期对错 随手记
- BZOJ.3139.[HNOI2013]比赛(搜索 Hash)
- 测试Js权限
热门文章
- Python字符与字节新编
- Air530Z GPS/北斗定位模块_设计指导手册_V1.2
- csp-s模拟测试57(10.2)「天空龙」&#183;「巨神兵」&#183;「太阳神」
- 【题解】coin HDU2884 多重背包
- Spring Cloud Data Flow整合UAA之使用LDAP进行账号管理
- 案例 | 腾讯广告 AMS 的容器化之路
- redis 客户端实现读写分离实现
- Redis6使用指导(完整版)
- 低代码开发LCDP,Power Apps系列 - 新建泰勒创新中心门户案例
- Python中任务队列-芹菜celery的使用