xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点

一、属性定位


1、可以通过元素的id,class,tag标签这三个属性直接定位

  • #   表示id属性,如:#kw
  • .    表示class属性,如:.s_ipt
  • 直接用标签名称,如:input

代码:

# coding = utf-8
from time import sleep
from selenium import webdriver # 驱动文件路径
driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 用CSS通过id属性定位百度搜索框
# driver.find_element_by_css_selector("#kw").send_keys("selenium") # 用CSS通过clas属性定位百度搜索框
# driver.find_element_by_css_selector(".s_ipt").send_keys("selenium") # 用CSS通过标签属性定位百度搜索框,此处必报错
driver.find_element_by_css_selector("input").send_keys("selenium") # 等待5秒
sleep(5)
# 退出
driver.quit()

2、其它属性定位

通过其它属性定位时,直接写属性名和属性值

代码:

# coding = utf-8
from time import sleep
from selenium import webdriver # 驱动文件路径
driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 用CSS通过name属性定位百度搜索框
# driver.find_element_by_css_selector("[name='wd']").send_keys("selenium") # 用CSS通过maxlength属性定位百度搜索框
# driver.find_element_by_css_selector("[maxlength='255']").send_keys("selenium") # 用CSS通过autocomplete属性定位百度搜索框
driver.find_element_by_css_selector("[autocomplete='off']").send_keys("selenium") # 等待5秒
sleep(5)
# 退出
driver.quit()

二、标签和属性组合


代码:

# coding = utf-8
from time import sleep
from selenium import webdriver # 驱动文件路径
driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 用CSS通过标签和id属性组合定位百度搜索框
# driver.find_element_by_css_selector("input#kw").send_keys("selenium") # 用CSS通过标签和class属性组合定位百度搜索框
# driver.find_element_by_css_selector("input.s_ipt").send_keys("selenium") # 用CSS通过标签和name属性组合定位百度搜索框
# driver.find_element_by_css_selector("input[name='wd']").send_keys("selenium") # 用CSS通过标签和autocomplete属性组合定位百度搜索框
driver.find_element_by_css_selector("input[autocomplete='off']").send_keys("selenium") # 等待5秒
sleep(5)
# 退出
driver.quit()

三、层级关系


代码:

# coding = utf-8
from time import sleep
from selenium import webdriver # 驱动文件路径
driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 用CSS通过层级关系定位百度搜索框
driver.find_element_by_css_selector("form#form>span>input").send_keys("selenium") # 等待5秒
sleep(5)
# 退出
driver.quit()

四、索引


CSS的索引定位与xpath的索引定位有很大不同,我们还以百度首页为例

我们要定位“百度一下”按钮,先定位到“百度一下”元素标签<input>的上级标签<span>,而<span>标签是<form>标签下所有<span>标签的第2个<span>,同时又是<form>标签下的第9个子标签

在xpath定位中这样写的:

driver.find_element_by_xpath("//*[@id='form']/span[2]/input")

但是CSS定位必须这样写

driver.find_element_by_css_selector("form#form>span:nth-child(9)>input")

代码:

# coding = utf-8
from time import sleep
from selenium import webdriver # 驱动文件路径
driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 用CSS通过索引系定位百度搜索框
driver.find_element_by_css_selector("form#form>span:nth-child(8)>input").send_keys("selenium")
# 用CSS通过索引定位"百度一下"按钮
driver.find_element_by_css_selector("form#form>span:nth-child(9)>input").click() # 等待5秒
sleep(5)
# 退出
driver.quit()

五、CSS与xpath定位比较


定位方式 xpath CSS
标签 //input input
id //input[@id='kw'] input#kw
class //input[@class='s_ipt'] input.s_ipt
其它属性 //input[@name='username']

input[name=username]

input[name^=user](以user开头)

input[name$=name](以name结尾)

input[name*=erna](包含ernal)

定位子元素

//form[@id='form']/*

//form/input

form#form>*

form#form>input

 定位所有后代元素

//form//input

 form input
索引
//form/span[2]
 form>span[9]
 根据子元素回溯父元素  //*[./[@id='su']](定位到父级元素)  
根据兄弟元素定位   span.soutu-btn+input

Selenium 详解CSS定位的更多相关文章

  1. Selenium 详解xpath定位

    xpath定位在业界被戏称为元素定位的"屠龙宝刀",宝刀在手,武林我有.现在我们就来详解xpath定位方法. 一.xpath通过元素属性定位 xpath可以通过元素的属性来定位,如 ...

  2. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  3. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  4. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  5. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  6. 详解CSS display:inline-block的应用(转)

    详解CSS display:inline-block的应用   阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...

  7. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  8. h5整理--详解css的相对定位和绝对定位

    浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...

  9. 定位页面元素之xpath详解以及定位不到测试元素的常见问题

    一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是 ...

随机推荐

  1. tableau单机版安装

    参考: https://help.tableau.com/current/server-linux/zh-cn/requ.htm   先将服务器防火墙80级8850端口打开 临时关闭SELinux/防 ...

  2. [转帖]oracle备份恢复之recover database的四条语句区别

    oracle备份恢复之recover database的四条语句区别 https://www.cnblogs.com/andy6/p/5925433.html 需要学习一下. 1  recover d ...

  3. Oracle精讲视频课程【价值1.67万】

    ke程链接 https://edu.51cto.com/center/course/lesson/index?id=14443 课程大纲: 0_Oracle学习路线分析(Oracle学习必读)[免费试 ...

  4. springboot - 应用实践(2)第一个springboot应用

    1.使用maven创建一个快速启动项目 2.引入相关依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...

  5. c++ try_throw_catch异常处理

    参考https://www.cnblogs.com/xiaojianliu/articles/8900795.html 在程序设计时,针对不同的异常情况,预先设定异常信息,在程序运行时,根据异常提示信 ...

  6. selenium获取微博用户粉丝数

    selenum的安装 selenium文档 获取微博用户粉丝数 from selenium import webdriver from time import sleep wd = webdriver ...

  7. 04.AutoMapper 之投影(Projection)

    https://www.jianshu.com/p/031553705417 投影(Projection) 投影将源转换为目标而不是扁平化对象模型.如果没有额为的配置AutoMapper需要一个扁平化 ...

  8. Jade学习(四)之结合node如何编译执行

    1.首先安装node 2.新建一个文件夹并进入该文件夹 3.安装jade 4.在新建的文件夹下新建js文件,写nodejs代码 5.在vscode中利用插件code runner直接执行js文件,输出 ...

  9. CF528E Triangles 3000

    cf luogu 既然要求三角形面积,不如考虑三角形的面积公式.因为是三条直线,所以可以考虑利用三个交点来算面积,如果这个三角形按照逆时针方向有\(ABC\)三点,那么他的面积为\(\frac{\ve ...

  10. css实现两个div并排等高(一个div高度随另一个高度变化而变化)

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;