首页 > 其他分享 >使用CSS选择器进行元素定位

使用CSS选择器进行元素定位

时间:2023-05-16 19:00:38浏览次数:45  
标签:定位 last 元素 selector 选择 nth css 选择器 CSS


使用CSS选择器进行元素定位_定位

        在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的。

之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。

【参见W3C官网说明】

http://www.w3school.com.cn/cssref/css_selectors.asp

先看看css选择器定位的webdriver函数:

def find_elements_by_css_selector(self, css_selector):
        """
        Finds elements by css selector. 
        :Args:
         - css_selector: The css selector to use when finding elements.
        :Usage:
            driver.find_elements_by_css_selector('.foo')
        """
        return self.find_elements(by=By.CSS_SELECTOR, value=css_selector)

开源优测

分享软件测试开源技术、经验、方案的首发平台

使用CSS选择器进行元素定位_定位_02

长按二维码/微信扫描 关注开源优测


常见语法

CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。

选择器

示例

示例说明

CSS

.class

.intro

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

1

#id

#firstname

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

1

*

*

选择所有元素

2

element

p

选择所有<p>元素

1

element,element

div,p

选择所有<div>元素和<p>元素

1

element element

div p

选择<div>元素内的所有<p>元素

1

element>element

div>p

选择所有父级是 <div> 元素的 <p> 元素

2

element+element

div+p

选择所有紧接着<div>元素之后的<p>元素

2

[attribute]

[target]

选择所有带有target属性元素

2

[attribute=value]

[target=-blank]

选择所有使用target="-blank"的元素

2

[attribute~=value]

[title~=flower]

选择标题属性包含单词"flower"的所有元素

2

[attribute|=language]

[lang|=en]

选择一个lang属性的起始值="EN"的所有元素

2

element1~element2

p~ul

选择p元素之后同级的每一个ul元素

3

[attribute^=value]

a[src^="https"]

选择每一个src属性的值以"https"开头的元素

3

[attribute$=value]

a[src$=".pdf"]

选择每一个src属性的值以".pdf"结尾的元素

3

[attribute*=value]

a[src*="44lan"]

选择每一个src属性的值包含子字符串"44lan"的元素

3

:first-of-type

p:first-of-type

选择每个p元素是其父级的第一个p元素

3

:last-of-type

p:last-of-type

选择每个p元素是其父级的最后一个p元素

3

:only-of-type

p:only-of-type

选择每个p元素是其父级的唯一p元素

3

:only-child

p:only-child

选择每个p元素是其父级的唯一子元素

3

:nth-child(n)

p:nth-child(2)

选择每个p元素是其父级的第二个子元素

3

:nth-last-child(n)

p:nth-last-child(2)

选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

3

:nth-of-type(n)

p:nth-of-type(2)

选择每个p元素是其父级的第二个p元素

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

3

:last-child

p:last-child

选择每个p元素是其父级的最后一个子级。

3

:root

:root

选择文档的根元素

3

:empty

p:empty

选择每个没有任何子级的p元素(包括文本节点)

3

:target

#news:target

选择当前活动的#news元素(包含该锚名称的点击的URL)

3

:enabled

input:enabled

选择每一个已启用的输入元素

3

:disabled

input:disabled

选择每一个禁用的输入元素

3

:checked

input:checked

选择每个选中的输入元素

3

:not(selector)

:not(p)

选择每个并非p元素的元素

3

::selection

::selection

匹配元素中被用户选中或处于高亮状态的部分

3

:out-of-range

:out-of-range

匹配值在指定区间之外的input元素

3

:in-range

:in-range

匹配值在指定区间之内的input元素

3

:read-write

:read-write

用于匹配可读及可写的元素

3

:read-only

:read-only

用于匹配设置 "readonly"(只读) 属性的元素

3

:optional

:optional

用于匹配可选的输入元素

3

:required

:required

用于匹配设置了 "required" 属性的元素

3

:valid

:valid

用于匹配输入值为合法的元素

3

:invalid

:invalid

用于匹配输入值为非法的元素

3

作者: Ray


标签:定位,last,元素,selector,选择,nth,css,选择器,CSS
From: https://blog.51cto.com/deeptest/6286488

相关文章

  • css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)
    例子:.check:checked~.content{}~选择器实际上是后继同胞组合器(在2017年之前称为一般同胞组合器):后继同胞组合器由“波浪号”(U+007E,~)字符组成,它将两个简单选择器序列分隔开。由这两个序列表示的元素在文档树中具有相同的父级,并且由第一个序列表示的元素位于由第二个序列表......
  • 电商JD商城登录页面html+css
    这也太难了吧,怎么连抄咱也不会抄啊QAQ看了这么久的前端,总是感觉看得懂,写不出来,抄也不会抄这不,这又抄写了一个京东电商商城的登录页面,本来想好好学习一下页面的布局以及编写结构和思维,结果html代码还行,至少可以看的懂,到了css上就完全不知道怎么设置样式了,感觉有的样式完全可以不......
  • vue8小时带刻度的时间轴,根据当前时间实时定位
    效果图: 需求:1开始时间、结束时间可配置2时差固定8小时3根据当前时间初始化位置4每隔5s刷新位置5超过结束时间停止刷新HTML:<divclass="time-axis"><divclass="startTime">{{start_time}}</div><divclass="endTime">{{end_time}}</div>......
  • app直播源码,css宽度不固定,水平居中
    app直播源码,css宽度不固定,水平居中1.相对定位:  #box{position:relative;left:50%;float:left;} #inner{position:relative;left:-50%;} ​需考虑浮动带来的问题 2.利用diplay:table来解决: #box{display:table;margin:0auto}/*不支持ie6,ie7*/  3.CSS3fl......
  • CSS 计数器
    CSS计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号CSS计数器根据规则来递增变量。CSS计数器使用到以下几个属性:counter-reset -创建或者重置计数器counter-increment -递增变量content -插入生成的内容counter() 或 counters() 函数-将计数......
  • css网页布局
    网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 头部区域头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的logo:CSS3实例.header{ text-align:center;padding:20px;}https://www.scsmld.com/jjs/......
  • 惯性导航 室内定位代码 Matlab Matlab代码实现 普通质心+Kalman+惯性导航
    惯性导航室内定位代码MatlabMatlab代码实现普通质心+Kalman+惯性导航定位ID:6935636401455989......
  • CSS选择器有哪些
    CSS选择器是用来选择HTML或XML元素的一种方式,CSS选择器可以根据元素的标签名、类名、ID、属性值等特征进行选择。以下是一些常用的CSS选择器:标签选择器:使用元素的标签名作为选择器,例如:p、h1、div等。类选择器:选择具有指定类名的元素,使用“.类名”作为选择器,例如:.demo。ID......
  • CSS伪类实现0.5px边框
    div-class为需要添加0.5px边框的元素的类名,下面是less写法,css写法把嵌套的&::after提出来,换成.div-class::after.div-class{position:relative;&::after{position:absolute;bottom:0;content:'';width:100%;height:1px;background-c......
  • 记录--css水滴登录界面
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言今天我们来分享一款非常有趣的登录界面,它使用HTML和CSS制作,具有动态的水波纹效果,让用户在登录时感受到了一股清凉之感。基本html框架<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......