(八)WebDriver API之定位元素-CSS定位

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

  学习selenium自动化之前,最好先学习HTML、CSS、JavaScript等知识,有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料,

这里就不多做介绍了,所有例子均使用python3.6+selenium执行的。

#------------------------------------------------我是可耻的分割线-------------------------------------------

CSS定位

  CSSCascading Style Sheets)是一种语言,它用来描述HTMLXML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。

CSS可以较为灵活的选择空间的任意属性,一般情况下定位速度要比XPath快,但对于初学者来说学习起来稍微有点难度,下面我们就详细地介绍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’的所有元素

下面同样以百度输入框和搜索按钮为例介绍CSS定位的用法。

...

<span class=’bg s_ipt_wr’>

<input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’

</span>

<span class=’bg s_ipt_wr’>

<input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’ 

</span>

...

1)通过class属性定位:

find_element_by_css_selector(‘.s_ipt’)

find_element_by_css_selector(‘.bg s_btn’)

find_element_by_css_selector()方法用于CSS语言定位元素,点号(.)表示通过class属性来定位元素。

2)通过id属性定位:

find_element_by_css_selector(‘#kw’)

find_element_by_css_selector(‘#su’)

井号(#)表示通过id属性来定位元素

3)通过标签名定位:

find_element_by_css_selector(‘input’)

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

我们可以通过以下几种方式来使标签名查找方式生效:

1、通过父子关系定位:

find_element_by_css_selector(‘span>span’)

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

2、通过属性定位:

find_element_by_css_selector(“[autocomplete=off]”)

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

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

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

3、组合定位:

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

find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)

find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)

有一个父元素,它的标签名叫span;它有一个class属性值叫bg s_ipt_wr;它有一个子元素,标签名叫inout,并且这个子元素的class属性值叫s_ipt。好吧,我们要找的就是具有这么多特征的一个子元素。

原文地址:https://www.cnblogs.com/lirongyang/p/11457498.html