Selenium IDE CSS元素选择器

点击链接加入群【悦分享测试联盟】:https://jq.qq.com/?_wv=1027&k=5FiMKHH

Css选择器

通过节点属性查找

.class                 选择 class="intro"的所有元素。

#id                     选择 id="firstname"的所有元素。

*                         选择所有元素。

通过节点关系查找

element element             后代选择器

element>element          子元素选择器

element+element          兄弟姊妹选择器

element1~element2       p~ul,选择前面有<p> 元素的每个<ul> 元素。

通过节点属性查找

[attribute]                         [target]   选择带有 target 属性所有元素。

[attribute=value]             [target=_blank]       选择 target="_blank"的所有元素。

[attribute~=value]           [title~=flower]        选择 title 属性包含单词 "flower"的所有元素。

[attribute|=value]           [lang|=en]       选择 lang 属性值以 "en"开头的所有元素。

[attribute^=value]           a[src^="https"]选择其 src 属性值以"https" 开头的每个 <a> 元素。

[attribute$=value]           a[src$=".pdf"] 选择其src 属性以".pdf" 结尾的所有 <a> 元素。

[attribute*=value]           a[src*="abc"] 选择其src 属性中包含"abc" 子串的每个<a> 元素。

伪类选择器

:link                                     a:link                 选择所有链接。

:checked                            input:checked 选择每个被选中的 <input> 元素。

:first-child                         p:first-child      选择属于父元素的第一个子元素的每个 <p> 元素。

:last-child                                   p:last-child      选择属于其父元素最后一个子元素每个<p> 元素。

:first-of-type                    p:first-of-type 选择属于其父元素的首个<p> 元素的每个 <p> 元素。

:last-of-type                     p:last-of-type 选择属于其父元素的最后<p> 元素的每个 <p> 元素。

:only-of-type                    p:only-of-type         选择属于其父元素唯一的<p> 元素的每个 <p> 元素。

:only-child                         p:only-child     选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n)                      p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n)              p:nth-last-child(2)   同上,从最后一个子元素开始计数。

:nth-of-type(n)                 p:nth-of-type(2)      选择属于其父元素第二个<p> 的每个 <p> 元素。

:nth-last-of-type(n)                  p:nth-last-of-type(2)       同上,但是从最后一个子元素开始计数。

:input                所有<input> 元素

:text                           所有type="text" 的 <input> 元素

:password        所有 type="password" 的 <input> 元素

:radio                所有type="radio" 的 <input> 元素

:checkbox        所有 type="checkbox" 的 <input> 元素

:submit             所有type="submit" 的 <input> 元素

:reset                所有type="reset" 的 <input> 元素

:button             所有type="button" 的 <input> 元素

:image              所有type="image" 的 <input> 元素

:file                    所有type="file" 的 <input> 元素

原文地址:http://blog.51cto.com/shareku/2070343

时间: 2024-08-02 04:52:20

Selenium IDE CSS元素选择器的相关文章

Selenium IDE 简单元素选择器

点击链接加入群[悦分享测试联盟]:https://jq.qq.com/?_wv=1027&k=5FiMKHH 元素定位选择器 简介 对于大多数Selenese命令来说,都需要提供一个target参数,这个target参数目的是为了唯一的去定位web应用中的指定元素的内容,我们称之为"locator",locator的表达形式有多种,本节内容会详细阐述各种类型的locator的信息. Locator表达式结构:locatorType=location,在某些特殊情况下,locat

css 元素选择器实例

一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下: p{ fon

CSS元素选择器

http://www.w3school.com.cn/css/css_selector_type.asp 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 html 本身: html {color:black;} h1 {color:blue;} h2 {color:silver;} <!DOCTYPE html> <html> <head>

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

selenium IDE(五)selenium 命令之定位页面元素

定位页面元素 对于很多selenium命令,target域是必须的.Target在web页面范围内识别UI元素,它使用locatorType=location的格式.在很多情况下,locatorType可以省略,下面举例方式来描述各种类型的locatorType. 假如,有如下一段HTML代码: html> <body> <form id= "loginForm" > <input name= "username" type= &

CSS的伪元素选择器

在CSS技术中,提前给我们假定了一些元素名称的选择器名字.把这些名字称为伪元素选择器. 例子: a:link伪元素 某人标签示未被访问前的样式设定 a:hover 鼠标悬停在标签上时的CSS样式 a:active 鼠标点击下,但没有释放时的CSS样式 a:visited 标签被点击后,被访问过之后的CSS样式 如果使用伪元素设置超链接,这4个伪元素有书写顺序. L    V    H    A

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

css基础 组合选择器之多元素选择器 多个元素加上同一个样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 1 a:link{background-color:blue;} //未访问前深蓝色 2 a:visited{background-color:beige;} //访问过淡黄色 3 a:hover{background-color:aqua;} //鼠标悬停时水蓝色 4 a:active{background-col