css selector 元素定位

小小测开

已于 2024-06-13 20:41:42 修改

阅读量1.2k

点赞数 25

分类专栏： Web自动化测试电商平台文章标签：前端 selenium

于 2024-05-29 22:48:09 首次发布

本文链接：https://blog.csdn.net/qq_20878673/article/details/139306835

版权

Web自动化测试电商平台专栏收录该内容

27 篇文章 0 订阅

订阅专栏

作为一种具有强大定位功能的元素定位方法，css selector可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。css定位更快、语法更简洁，但是xpath更直观、更好理解一些。

CSS（Cascading Style Sheets）是一种语言，他用来描述HTML和XML文档的表现，CSS使用选择器来为页面元素绑定属性。这些选择器可以被Selenium用作另外的定位策略。

CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度比XPath快，CSS选择器常见语法如表所示.

CSS选择器的常见语法

选择器	例子	描述
.class	.intro	class选择器，选择class=”intro”的所有元素
#id	#firstname	id选择器，选择id=”firstname”的所有元素
*	*	选择所有元素
element	p	元素所有<p>元素
element>element	div>input	选择父元素为<div>的所有<input>元素
element+element	div+input	选择同一级中紧接在<div>元素后的所有<input>元素
[attribute=value]	[target=_blank]	选择target=”_blank”的所有元素

1、右键 copy css selector方法

选中该元素，右键copy---Copy selector

driver.find_element_by_css_selector("body > div.w1180 > div > div.reg_main > div.reg_left.fl > form > ul > li:nth-child(1) > p:nth-child(2) > input")

2、如果元素某个属性是唯一的，可以通过属性定位

如果元素某个属性是唯一的，那么直接在该属性两边加上中括号，就可以定位该元素，

举个例子，例如<input value="1"/>

那么定位时，可以这样操作

driver.find_element_by_css_selector('[value="1"]')

find_element_by_css_selector(‘[autocomplete=off]’)

find_element_by_css_selector(“[name=’wd’]”)

find_element_by_css_selector(‘[type=”submit”]’)

注意：在CSS当中也可以使用元素的任意属性，只要这些属性可以唯一标识这个元素。对于属性值来说，可夹引号，也可以不加，但要注意和整个字符串的引号进行区分。

3、通过class属性定位：

find_element_by_selector(".s_ipt")

(.s_ipt里面小数点代表class属性)

用CSS语言定位元素，点号（.）表示通过class属性来定位元素。

4、通过id属性定位：

find_element_by_selector("#kw")

(#用来表示 id属性)

井号（#）表示通过id属性来定位元素。

5、通过标签名定位：

find_element_by_css_selector('input')

在CSS语言中，用标签名定位元素不需要任何符号标识，直接使用标签名即可。但是标签名重复的概率非常大，所以很难通过这种方式找到想要的元素。

6、通过父子关系定位：

find_element_by_css_selector('span>input')

上面的写法表示有父元素，它的标签名为span,查找它的所有标签名叫input的子元素。

在下图中，想要定位到"您好 changcheng"这个元素的话，可以看出，用户名是会变化的，通过链接文本定位是不行的，

这个时候可以通过父子元素来定位，可以看到它有个父元素，class="site-nav-right fr"，

welcome=self.driver.find_element_by_css_selector(".site-nav-right.fr > a:nth-child(1)").text
print(welcome)

".site-nav-right.fr > a:nth-child(1)"这表示，找到class属性为site-nav-right.fr的父元素，它的子元素a标签的第一个子元素，".text"表示找到这个元素后，获取这个元素的文本信息。
print(welcome)，运行后打印出出来文本。

补充：可以通过xpath子元素来定位父元素，比如想通过分类“文艺片1”定位前面的复选框是否选中，可先用xpath定位到“文艺片1”，//span[text()="文艺片1"]

然后，再“/../”定位到上一级的input标签。

xi_ju = login.find_element_by_xpath('//span[text()="文艺片1"]/../input')

接下来是一个判断，如果已经被勾选就不点击，没勾选就点击一下。

        # 8、勾选”文艺片1“
        wen_yi = login.find_element_by_xpath('//span[text()="文艺片1"]/../input')
        if wen_yi.is_selected():
            pass
        else:
            wen_yi.click()

7、css可以用多个属性组合的方式定位一个元素

可以把上面的定位策略组合起来使用，这就大大加强了元素定位的唯一性。

举个例子1，例如<input class="a b c d" value="1"/>

那么定位时，可以这样操作

driver.find_element_by_css_selector(".a.b.c.d[value='1']")

举个例子2，

driver.find_element_by_css_selector("div#id input.class")

表示页面中有一个id="id"的div元素，在该div元素的子孙节点中有个input标签，该input标签有个class="class"的属性。我们要定位的就是这个input标签

举个例子3.

find_element_by_css_selector("form.fm>span>input.s_ipt")

我们要定位的这个元素的标签名为input,这个元素的class属性值为s_ipt;并且它有一个父元素，标签名为span,它的父元素还有父元素，标签名为form,而且class属性为fm。我们要找的就是必须满足这么多特征的一个元素。

Xpath 与CSS的类似功能对比

定位方式	Xpath	CSS
标签	//div	div
By id	//div[@id=’eleid’]	div#eleid
By class	//div[@class=’eleclass’]	div.eleid
By 属性	//div[@title=’Move mouse here’]	div[title=Move mouse here] div[title^=Move] div[title$=here] div[title*=mouse]
定位子元素	//div[@id=’eleid’]/* //div/h1	div#eleid div>h1

小小测开

关注

25
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
css selector 元素定位

作为一种具有强大定位功能的元素定位方法，css selector可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。CSS（Cascading Style Sheets）是一种语言，他用来描述HTML和XML文档的表现，CSS使用选择器来为页面元素绑定属性。这些选择器可以被Selenium用作另外的定位策略。CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度比XPth快，CSS选择器常见语法如表所示.CSS选择器的常见语法选择器例子描述.class。
复制链接

扫一扫

专栏目录