首页 > 其他分享 >selenium中使用CSS 定位

selenium中使用CSS 定位

时间:2023-06-27 10:00:16浏览次数:35  
标签:定位 elements 元素 selenium 选择 find CSS 属性

CSS 是一种语言,用来描述 HTML 和 XML 文档的表现。CSS 使用选择器为页面元素 绑定属性。

CSS 选择器可以较为灵活地选择控件的任意属性,一般情况下,CSS 定位速度比 XPath 定位速度快

 通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

 

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

根据 tag名 选择元素的 CSS Selector 语法非常简单,直接写上tag名即可

elements = wd.find_elements(By.CSS_SELECTOR, 'div')
# 等价于
elements = wd.find_elements(By.TAG_NAME, 'div')

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

有下面这样的元素:

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

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

elements = wd.find_elements(By.CSS_SELECTOR, '#searchtext')

根据class属性 选择元素的语法是在 class 值 前面加上一个点: .class

elements = wd.find_elements(By.CSS_SELECTOR, '.animal')
# 等价于
elements = wd.find_elements(By.CLASS_NAME, 'animal')

 

选择 子元素 和 后代元素

如果 元素2 是 元素1 的 直接子元素, CSS Selector 选择子元素的语法是这样的

元素1 > 元素2

中间用一个大于号 (我们可以理解为箭头号),注意,最终选择的元素是 元素2, 并且要求这个 元素2 是 元素1 的直接子元素

选择 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 元素4 , 最终选择的元素是 元素4

元素1 > 元素2 > 元素3 > 元素4

如果 元素2 是 元素1 的 后代元素, CSS Selector 选择后代元素的语法是这样的

元素1   元素2

中间是一个或者多个空格隔开,最终选择的元素是 元素2 , 并且要求这个 元素2 是 元素1 的后代元素。

也支持更多层级的选择, 比如

元素1   元素2   元素3  元素4  # 最终选择的元素是 元素4

 

根据属性选择

css 选择器支持通过任何属性来选择元素,语法是用一个方括号 [] 。

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')
# 选择所有 标签名为div,且class属性值为SKnet的元素
element = wd.find_element(By.CSS_SELECTOR, 'div[class='SKnet']'
# 选择 所有 具有 属性名 为href 的元素,不管它们的值是什么
element = wd.find_element(By.CSS_SELECTOR, '[href]')

CSS 还可以选择 属性值 包含 某个字符串 的元素

比如, 要选择a节点,里面的href属性包含了 miitbeian 字符串,就可以这样写

a[href*="miitbeian"]

还可以 选择 属性值 以某个字符串 开头 的元素

比如, 要选择a节点,里面的href属性以 http 开头 ,就可以这样写

a[href^="http"]

还可以 选择 属性值 以某个字符串 结尾 的元素

比如, 要选择a节点,里面的href属性以 gov.cn 结尾 ,就可以这样写

a[href$="gov.cn"]

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

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

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

 

CSS 选择器的更多用法可以查看 W3CSchool 网站中的 CSS 选择器参考手册

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

 

 


 

参考学习:

白月黑羽

虫师:Selenium3自动化测试实战

标签:定位,elements,元素,selenium,选择,find,CSS,属性
From: https://www.cnblogs.com/jiushao-ing/p/17507855.html

相关文章

  • selenium根据link、partial link选择元素
    link定位By.LINK_TEXT方法是通过元素标签对之间的文字信息来定位元素的,它专门用来定位文本链接.百度输入框上面的几个文字链接的代码如下。<aclass="mnav"name="tj_trnews"href="http://news.baidu.com">新闻</a><aclass="mnav"name="tj_trhao123"href=&......
  • selenium根据class属性、tag名选择元素
    根据class属性选择元素元素也有类型,class属性就用来标志着元素类型若网页html内容如下:<body><divclass="plant"><span>土豆</span></div><divclass="plant"><span>洋葱</span></div>......
  • 【CSS】写一个原生的透明 input 标签输入框
    <divclass="search"> <imgsrc="@/assets/tools/search.svg"/> <inputplaceholder="搜索"@input="onSearch"v-model="searchValue"/></div>.search{ height:32px; width:204px; di......
  • CSS3 px 和 em 和 rem
    px为单位:px实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“......
  • CSS3 初始化的思路
    /*css初始化begin*/html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{ margin:0; padding:0;}fieldset,img,input,button{ border:none; padding:0; margin:0; outline-style:none;/*去掉input获取焦点后的......
  • CSS 尺寸单位和颜色单位
    尺寸单位描述%百分比in英寸cm厘米mm毫米em1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍。例如,如果某元素以12pt显示,那么2em是24pt。在CSS中,em是非常有用的单位,因为它可以自动适应用户所使用的字体。ex一个ex是一个字体的x-height。(x-height通常是......
  • CSS 选择器参考手册
    在CSS中,选择器是一种模式,用于选择需要添加样式的元素。"CSS"列指示该属性是在哪个CSS版本中定义的。(CSS1、CSS2还是CSS3。) 选择器例子例子描述CSS.class.intro选择class="intro"的所有元素。1#id#firstname选择id="firstname"的所有元素。1**选择所有元素。2elementp选......
  • 基于Java+selenium+Chrome,实现截取html页面内容并保存为图片
    1、需求实现Java程序发送邮件,并将输入的多个页面转为pdf类型附件一同发送出去。而页面如何转为pdf呢?其中的一个方案就是先将html页面转为图片,再将图片合并为pdf。此文记录的是html=>png过程。2、开发主要依赖<!--html2image--><dependency><groupId>org.seleniumhq.se......
  • css属性中的 filter 和 backdrop-filter 使用
    filterCSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter/*URLtoSVGfilter*/filter:url("filters.svg#filter-id");/*<filter-function>values......
  • Selenium基础:特殊Dom结构操作 07
    特殊Dom结构是指对元素不能直接操作,需要进行特殊定位切换到它所在的Dom结构,然后才能对其元素进行操作1、windows弹窗--alertconfirmprompt使用driver.switch_to.alert方法alert类操作方法:accept():确定dismiss():取消text():获取弹出框内的内容send_keys(keysToSend):输入......