定位元素的注意事项(划重点)

  • 找到待定位元素的唯一属性
  • 如果该元素没有唯一属性,则先找到能被唯一定位到的父元素/子元素/相邻元素,再使用 > , " " , + 等进行辅助定位
  • 不要使用随机唯一属性定位
  • 最重要的是多跟研发沟通,尽量把关键元素加上ID或者name,并减少不合理的页面元素,例如重复ID这样的事情最好不要发生

首先,基础的CSS选择器

选择器 名字 例子 例子描述
基础选择器
.class class选择器 .intro 选择 class=“intro” 的所有元素。
#id id选择器 #firstname 选择 id=“firstname” 的所有元素。
* 通配符 选择所有元素。
element 标签选择器 p 选择所有

元素。

多层选择器
element,element 分组选择器 div,p 同时选择所有
元素和所有

元素。

element element 后端选择器 div p 选择
元素内部的所有

元素(包括子元素、孙子元素)

element>element 子元素选择器 div>p 选择
元素下的

子元素

element+element 相邻选择器 div+p 选择
元素之后的所有兄弟

元素。

属性选择器
[attribute] [target] 选择带有 target 属性所有元素。
[attribute=value] [target=_blank] 选择 target=“_blank” 的所有元素。
[attribute*=value] a[href*=“miitbeian”] 选择a节点,里面的href属性包含了 miitbeian 字符串
[attribute^=value] a[href^=“http”] 要选择a节点,里面的href属性以 http 开头
[attribute$=value] a[href$=“gov.cn”] 选择a节点,里面的href属性以 gov.cn 结尾
[attribute~=value] [title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制,像这样 div[class=misc][ctype=gun]

html页面中,css正确写法的栗子

/* id选择器 */
#abc {
    color: #cc0000;
    font-size: 12px;
}

/* class 选择器 */
.down {
    color: #66cc66;
}

/* 标签选择器 */
p {
    background: cornflowerblue;
}

/* 标签选择器可以与class选择器组合使用 */
p.down {
    font-size: 24px;
}

/* 分组选择器 */
ul,
div,
.up {
    color: #cc0000;
}

/* 属性选择器 */
[href] {
    color: #cc6600;
}

span[title="hello"] {
    color: #00FFFF;
}

span[title~="python"] {
    font-size: 24px;
}

/* 后代选择器 */
div li {
    background: forestgreen;
}

/* 子元素选择器 */
div[id="up"]>ul {
    color: #cc6600;
}

/* 相邻兄弟选择器 */
#down+li {
    font-size: 24px;
}

/* 后续兄弟选择器 */
#down~li {
    color: #cc0000;
}

然后,伪类选择器

选择器 例子 例子描述
:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。

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

元素。

:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素的每个

元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

举例说明

参照白月黑羽的网址去练习

语法格式:
通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

根据 tag名、id、class 选择元素

tag名

比如 要选择 所有的tag名为div的元素,就可以是这样

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于

elements = wd.find_elements(By.TAG_NAME, 'div')

id

根据id属性 选择元素的语法是在id号前面加上一个井号: #id值

有下面这样的元素:

<input  type="text" id='searchtext' />

就可以使用 #searchtext 这样的 CSS Selector 来选择它。

  element = wd.find_element(By.CSS_SELECTOR, '#searchtext')

等价于

element = wd.find_element(By.ID, 'searchtext')

class

根据class属性 选择元素的语法是在 class 值 前面加上一个点: .class值
要选择所有 class 属性值为 animal的元素 动物 除了这样写

elements = wd.find_elements(By.CLASS_NAME, 'animal')

等价于

elements = wd.find_elements(By.CSS_SELECTOR, '.animal')

选择 子元素 和 后代元素

选择 子元素

如果 元素2 是 元素1 的 直接子元素, CSS Selector 选择子元素的语法是这样的
元素1 > 元素2
也支持更多层级的选择, 比如
元素1 > 元素2 > 元素3 > 元素4
就是选择 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 元素4 , 最终选择的元素是 元素4

后代元素

如果 元素2 是 元素1 的 后代元素, CSS Selector 选择后代元素的语法是这样的
元素1 元素2
中间是一个或者多个空格隔开
最终选择的元素是 元素2 , 并且要求这个 元素2 是 元素1 的后代元素。
也支持更多层级的选择, 比如
元素1 元素2 元素3 元素4
最终选择的元素是 元素4

根据属性选择

  <a href="https://beian.miit.gov.cn" rel="noopener noreferrer">浙ICP备2022000717号-1</a>

根据属性选择元素

  # 比如要选择上面的a元素,就可以使用 [https://beian.miit.gov.cn"] 
  element = wd.find_element(By.CSS_SELECTOR, '[href="https://beian.miit.gov.cn"]')
  
  # 要选择a节点,里面的href属性包含了 miit 字符串,就可以这样写
  element = wd.find_element(By.CSS_SELECTOR, 'a[href*="miit"]')
  
  # 要选择a节点,里面的href属性以 http 开头 ,就可以这样写
    element = wd.find_element(By.CSS_SELECTOR, ' a[href^="http"]')
  
  #  要选择a节点,里面的href属性以 gov.cn 结尾 ,就可以这样写
    element = wd.find_element(By.CSS_SELECTOR, ' [href$="gov.cn"]')
  
上一篇 下一篇

评论 | 0条评论