selenium之css定位详解

css定位
css概述：
1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。
2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。
3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。
css定位策略（方式）：
1、id选择器
2、class选择器
3、元素选择器
4、属性选择器
5、层级选择器
css定位方法：find_element_by_css_selector()

1：id选择器
说明：根据元素id属性来选择
格式：#id属性值 如：#userA(选择id属性值为userA的所有元素)
示例：打开百度首页，通过css定位，id属性来输入搜索关键字

from selenium import webdriver
import time# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
# 通过css id属性来定位
driver.find_element_by_css_selector('#kw').send_keys('selenium')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()

2：class选择器
说明：根据元素class属性来选择
格式：.class属性值 如：.telA(选择class属性值为telA的所有元素)
示例：打开百度首页，通过css定位，class属性来输入搜索关键字

from selenium import webdriver
import time# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('.s_ipt').send_keys('hello python')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()

3：元素选择器
说明：根据元素标签名来选择
格式：element 如：input(选择所有input元素)

4：属性选择器
说明：根据元素的属性名和值来选择
格式：[attribute=value] 如：[type=‘password’]（选择所有type属性为password的值）
示例：打开百度首页，通过css定位，属性选择器来输入搜索关键字

from selenium import webdriver
import time# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('[name="wd"]').send_keys('你好，python')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()

5：层级选择器
说明：根据元素的父子关系来选择
格式：element>element 如：p>input（返还所有P元素下所有的input元素）
提示：>可以用空格代替，如：p input或者 p [type=‘password’]
示例：打开百度首页，通过css定位，层级选择器来输入搜索关键字

from selenium import webdriver
import time# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
# 通过css 层级选择器定位
driver.find_element_by_css_selector('form > span > input').send_keys('层级属性')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()

selenium之css定位详解相关推荐

UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
css规则中区块block,CSS 定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...
CSS 定位详解：原理与案例
本文要点: 详细讲解了CSS最常见的三种定位方式:fixed, absolute, relative. 讲解了典型的定位案例与使用场景,并结合了特效与过渡动画. 补充了图解CSS定位. CSS 定位( ...
selenium之xpath定位详解
xpath定位 xpath概述: 1.xpath即为xml path的简称,它是一种用来确定XML文档中某部分位置的语言. 2.HTML可以看做是XML的一种实现,所以selenium用户可以使用这种 ...
css定位详解（相对定位、绝对定位和固定定位）
文章目录一.什么是定位? 二.各个属性值的作用 1.相对定位 2.绝对定位 3.静态定位 4.固定定位三.相对和绝对定位 1.相对定位 2.绝对定位 3.相对定位和绝对定位 (1)相对定位 (2) ...
【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
[Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解（定位元素、常用方法、键盘鼠标操作）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...

selenium之css定位详解

selenium之css定位详解相关推荐

最新文章

热门文章