从css定位html选择器,selenium之CSS定位

1.css定位

1、什么是css？

1.1：css(Cascading Style Sheets)是一种语言，它用来描述THML和XML的元素显示样式；

css语言书写两种格式：

1、写在THML语言中

2、写在单独文件中  后缀.css

1.2：在css语言中有css选择器(不同的策略选择元素)，在Selenium中也可以使用这种选择器；

提示：

1、在selenium中极力推荐css定位，因为他比Xpath定位速度要快；

2、css选择器语法非常强大，如果是学习软件测试，可以先学习常用的几个；

css定位 方法

driver.find_element_by_css_selector()

2.css定位常用的策略(方法)

1、id选择器

2、class选择器

3、元素选择器

4、熟悉选择器

5、层级选择器

id选择器

说明：根据元素id属性来选择

格式：#id           如：#user <选择id属性值为user的所有元素>

方法：find_element_by_css_selector()

例如：find_element_by_css_selector(“#user”)

注意：id选择器必须以#修饰

class选择器

说明：根据元素class属性来选择

格式：.class        如：#.tel<选择class属性值为tel的所有元素> ， 如果class属性的元素中有空格需要变空格为“.”。

方法：find_element_by_css_selector()

例如：find_element_by_css_selector(“.tel”)

注意：以  .(点) 修饰，元素必须有class属性

元素选择器

说明：根据元素的标签名选择(标签名称)

格式：element     如：input<选择所有input元素>

属性选择器

说明：根据元素的属性名和值来选择

格式：[attribute=value]      如：[type="password"] <选择所有type属性值为password的值>

层级选择器

说明：根据元素的父子关系来选择

格式：element>element     如：p>input  <返回所有p元素下所有的input元素>，大于符号必须是父子关系，而一个空格只要是后代元素都可以。

提示：> 可以用空格代替     如：p  input  或者  p  [type=“password”]

混用

1.根据标签加属性  ：div[type="password"]

2.根据class属性加其他属性： .plant[name="shet"]

3.如果要选择多个class可以用“,”逗号隔开。如：.plant, anniml,但是如果是#t1>span,p ，它的意思不是选择id=t1标签下的span标签和p标签，而是选择id=t1的标签和p标签，这时只可以：#t1>span, #t1>p.

4.span:nth-child(2):选择父节点下面所有子节点的第二个标签且第二个标签必须为span标签. p:nth-last-child(2)表示选择父节点下面所有子节点的倒数第二个标签且倒数第二个标签必须为p标签.

#t1 :nth-child(2)表示选择id=t1标签下面的第二个标签.  #t1 :nth-child(even)表示选择id=t1标签下面的第所有奇数标签；

span:nth-of-type(1)表示选择父节点下面所有span标签的第一个span标签。它也有倒数的即：nth-last-of-type(1)  .

#t1 p:nth-of-type(even)表示选择id=t1节点下面所有p标签的奇数p标签

5.h3 + span选择h3标签后面的span标签，两个标签必须是相邻的。#t1 h3 ~ span表示选择id=t1节点的所有哦子节点中h3标签后面的所有span标签。

3.CSS延伸

1、input[type^='p']  说明：type属性以p字母开头的元素

2、input[type$='d']  说明：type属性以d字母结束的元素

3、input[type*='w']  说明：type属性包含w字母的元素

注意：测试css和xpath语法可以在开发者工具/element/ctrl+F栏里面。