web自动化测试(七)CSS定位方式

2022/5/24 23:50:05

编程Tag： 选择器属性 type web 自动化 css 元素 child

本文主要是介绍web自动化测试(七)CSS定位方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS选择器

要使用css对HTML页面中的元素进行定位或控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。css 选择器有自己的语法规则和表达式。

CSS支持场景

支持web产品
支持app端的webview

CSS相对定位

在使用过程中尽量避免直接copy selector绝对路径，使用相对定位更加容易维护，语法也相对更为简洁

CSS定位调试方法

进入浏览器的console
输入:
- $("css表达式")
- 或者$$("css表达式")

CSS基本语法

选择器	格式	示例	示例说明
选择全部	*	*	选择全部元素
标签选择器	html标签	p	选择所有<p>元素
ID选择器	#id属性值	#su	选择所有id='su'的元素
类选择器	.class属性值	.s_btn	选择所有class='s_btn'的元素
属性选择器1	[属性名]	[type]	选择所有带type属性的元素
属性选择器2	[属性名='属性值']	[type="submit"]	选择所有type="submit"的元素
属性选择器3	[属性名~='属性值']	[type~="submit"]	选择所有type包含"submit"的元素
属性选择器4	[属性名\|='属性值']	[type\|="submit"]	选择所有type以"submit"开头的元素

CSS关系定位语法

选择器	格式	示例	示例说明
标签指定属性	标签加属性描述	input#su	选择所有id='su'的<input>元素
并集	元素1,元素2	div,p	选择所有<div>和<p>元素
父子	元素1>元素2	div>p	选择所有父级是<div>的<p>元素
后代	元素1 元素2	div p	选择<div>中的所有<p>元素
相邻	元素1+元素2	div+p	选择<div>同级后的相邻<p>元素
同级	元素1~元素2	div~p	选择<div>同级后的所有<p>元素

CSS顺序定位语法

选择器	格式	示例	示例说明
唯一子元素	:only-child	p:only-child	选择所有<p>元素且该元素是其父级的唯一一个元素
第一子元素	:first-child	p:first-child	选择所有<p>元素且该元素是其父级的第一个元素
最后子元素	:last-child	p:last-child	选择所有<p>元素且该元素是其父级的最后一个子元素
顺序选择器	:nth-child(n)	p:nth-child(2)	选择所有<p>元素且该元素是其父级的第二个子元素
顺序类型选择器	:nth-of-type(n)	p:nth-of-type(2)	选择所有<p>元素且该元素是其父级的第二个<p>元素
倒序选择器	:nth-last-child(n)	p:nth-last-child(2)	选择所有<p>元素且该元素是其父级的倒数第二个子元素
倒序类型选择器	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有<p>元素且该元素是其父级的倒数第二个<p>元素

这篇关于web自动化测试(七)CSS定位方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

相关编程文章

更多>