目录
Selenium教程(1)选择和查找基本元素
Selenium教程(3)IFrame切换/窗口切换
Selenium教程(4)操作选择框
1.CSS Selector
(1)原理
蓝色框里面的 .animal 就是 CSS Selector, 指定了class 值为animal的元素,要显示为红色。
Selenium使用CSS Selector基本语法:
(2)根据tag、id、class选择元素
①tag名
②id属性
#id值
.class值
(3)直接子元素和后代子元素关系
- 直接子元素:layer1、layer2是container的直接子元素
- 后代子元素:inner11、inner12是layer1直接子元素,但只是container后代子元素。container后代子元素包括layer1、layer2以及inner11~inner21, 因此后代子元素也包含直接子元素。
- 层级语法关系:如果选择元素4,CSS selector语法为 "元素1 元素2 元素3 元素4",中间有一个或多个空格
(4)根据属性选择
①固定值选择
方括号[] 选择任何属性,如 [href=" http://www.miitbeian.gov.cn "]
因此,selenium语法为
②选择包含某个字符串
选择a节点,里面的href属性包含了 miitbeian 字符串:
③以字符串开头
选择a节点,里面的href属性以 http 开头:
④以字符串结尾
⑤同时搜索多个属性限制
div[class=misc][ctype=gun] 限制多个属性
(5)验证CSS Selector
如果直接运行代码验证CSS Selector成功非常麻烦,
可在浏览器F12开发者工具中输入CSS Selector,判断是否成功定位元素,同理Xpath、CSS路径可以
2.CSS节点语法关系
(1)选择语法联合使用
图中语法可以用:
- ① div.footer1 > span.copyright:选择 一个class 属性值为 copyright 的 span 节点, 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
- ② .footer1 > .copyright:选择 一个class 属性值为copyright 的节点(不限类型), 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点
- ③ .footer1 .copyright: 因为子元素同时也是后代元素
(2)组选择
①同时选择所有 class 为 plant 和 class 为 animal 的元素,CSS选择器可使用 逗号
②同时选择所有 tag名为div的元素 和 id为BYHY的元素
③同时选择所有 id 为 t1 里面的 span 和 p 元素
(3)按次序选择节点
html如下:
①父元素第n个节点
例如:选择 唐诗 和宋词 的第一个作者,即 第2个子元素,并且是span类型
- 限制节点类型: span:nth-child(2)
- 不限制节点类型: nth-child(2),即所有位置第2个元素
②父元素倒数第n个节点
- nth-last-child方法:上述可写为 span:nth-last-child(9),倒数第9个即 顺序第2个
③父元素第几个某类型的子节点
- nth-of-type: span:nth-of-type(1), 选择的是第1个span类型 的子元素
④父元素倒数第几个某类型的子节点
- nth-last-of-type: span:nth-last-of-type(2)
⑤奇数节点和偶数节点
(4) 兄弟节点选择
①相邻兄弟节点选择
要选择 唐诗 和宋词 的第一个 作者, 还有一种思考方法,就是选择 h3 唐诗和宋词后面紧跟着的兄弟节点 span
- 加号紧跟关系: h3 + span
②后续所有兄弟节点选择
选择 h3 后面所有的兄弟节点 span
- ~: h3 ~ span