Selenium09--CSS定位

CSS定位

• CSS是英文“Cascading Style Sheets"的缩写,是层叠样式表。
• CSS是一种用来表现HTML或XML等文件样式的计算机语言
• CSS为HTML标记语言提供了一种样式描述,它定义了其中元素的显示方式。例如字体、颜色、位置等，被用于描述网页上的信息格式化和显示方式
• 样式规则由一个或多个样式属性及其值组成。可以直接放在网页中,也可以单独存在独立的文档中
• CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态的对网页各种元素进行格式化

CSS选择器

• CSS SELECTOR（CSS选择器）：是CSS中的一个子技术，用于选择要修饰样式的页面元素。
  

获取CSS选择器

Firefox→打开网页→目标元素右击→菜单里选择“检查"→目标源代码行右击→复制→CSS选择器

CSS定位语法

变量 = driver.find_element(By.CSS_SELECTOR,'CSS选择器')

"""
	打开首页,点击"登录"
"""

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By
driver = webdriver.Firefox() # 启动浏览器
driver.get('http://localhost/upload/index.php')
driver.find_element(By.CSS_SELECTOR,'#ECS_MEMBERZONE > a:nth-child(2) > img:nth-child(1)').click()
sleep(3) # 等待3秒
driver.quit() # 关闭浏览器

XPATH定位与CSS定位优缺点

XPATH功能强大,丰富的函数库,支持向上级查找，通过XPATH轴支持各种节点关系查找

CSS定位，选择器在性能上更优,运行速度更快，语法上更简洁

CSS选择器分类

类型选择器、简单属性选择器、路径选择器、索引号选择器

类型选择器

• CSS类型选择器是使用元素标记的名称来选择元素的一种选择器。
• 使用这种选择器，可以对这种类型的每个元素进行修饰。

"""
	启动Firefox,打开留言板,输入留言内容hello,等待3秒,关闭浏览器
"""

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By
driver = webdriver.Firefox() # 启动浏览器
driver.get('http://localhost/upload/message.php')
driver.find_element(By.CSS_SELECTOR,'textarea').send_keys('hello')
sleep(3) # 等待3秒
driver.quit() # 关闭浏览器

简单属性选择器

[属性名='属性值'] 或 标记名[属性名='属性值']

注意:属性不限定，任何属性都可以进行筛选

CLASS属性选择器：用点(.)来标识用CLASS里的类名选择元素。

标记.类名
.类名
.类名1.类名2.类名3

ID属性选择器:用#来标识用id属性值选择元素

标记#id属性值
#id属性值
#id属性值.类名

所有属性都可以用:[]描述属性名值对的信息

标记[属性名='属性值']
[属性名='属性值']
[属性名1='属性值1'][属性名2='属性值2']

路径选择器

• 按照父子关系路径选择元素：用大于号（>）向下级查找子节点
• 如：高级搜索是form下级的a
• form#searchForm>a
• 按照祖先后代关系路径选择元素：用英文半角空格查找后代节点
• 如：高级搜索是div后代里的a
• div#search a
  

索引号选择器

• CSS索引号应用场景：同一个父元素下级有同标记的子元素。
• CSS索引号规则：无论什么标记的所有子元素一起从1开始排序。
  

CSS索引号语法

标记:first-child         -- 第一个子节点
标记:last-child          -- 最后一个子节点
标记:nth-child(索引号)    -- 任意索引号的子节点

CSS选择器语法小结