一、哪些情况不能用ID选择器

  1. 元素的ID不唯一,或者ID是动态变化的
  2. name以及linktext属性值不唯一

如果满足上述条件,则不能用ID选择器来定位元素,就需要依靠xpath或CSS来定位元素了
PS:不管使用什么方式来查找元素(比如id、name、xpath、CSS等),都需要确保页面上查找出来的元素的唯一性,应该只找到一个匹配的node(如何查看是否唯一,在前两篇已经详细说过——
方式二如何查看匹配节点

二、CSS选择器语法

tag[attribute=‘value’]
标签名[属性=‘值’]
在CSS里,#代表ID,.代表class

三、ID选择器查找元素

  • 举个栗子
    我们写一下慕课网登录的CSS定位,有三种写法
  1. 按语法规则输入:a[id=‘js-signin-btn’],可以看到黄色高亮显示,说明CSS选择器是可以用的,显示一个匹配的节点
    在这里插入图片描述

  2. 在CSS语法中,#代表id,所以我们查找的属性时id的话,可以忽略语法,使用简写:#js-signin-btn,可以看到DOM里也是黄色背景高亮
    在这里插入图片描述

  3. 最后一种写法:a#js-signin-btn,把标签的名字加在了最前面,什么情况写需要加标签呢?如果这个页面有多个标签都有同一个id(一般不会出现这种情况),这种情况下,加上标签名,直接会查找到某个标签下的id,可以使搜索速度更快
    在这里插入图片描述

四、class选择器查找元素

  • 举个栗子
    我们写一下慕课网购物车的CSS定位
  1. 按语法规则输入:span[class=‘icon-shopping-cart’],只输入了一个class,但是没有查找到元素;为什么呢?是因为在单引号里class要完全匹配
    在这里插入图片描述
    现在改一下class值,输入完整的class:span[class=‘icon-shopping-cart js-endcart’],查找出来唯一的元素
    在这里插入图片描述

  2. 购物车元素的class有两个,我们先写icon-shopping-cart,使用.代替class,使用简写:.icon-shopping-cart,可以看到查找出三个元素,此时查找的元素是不唯一的,运行时会报错
    在这里插入图片描述

  3. 写js-endcart,输入.js-endcart,查找出来一个元素,是唯一的
    在这里插入图片描述

  4. 加上标签名,可以看到元素是在span这个标签里的,所以输入span.js-endcart,查找出来一个元素,是唯一的
    在这里插入图片描述

  • 追加class(.class1.class2.class3—)直到找到唯一的元素
    输入.icon-shopping-cart.js-endcart
    在这里插入图片描述

五、通配符定位

语法:标签【属性 通配符=‘值’】
“^”代表以什么文本开始
“$”代表以什么文本结束
“*”代表包含什么文本

  1. 输入div[class^=‘search’],可以查找到div标签下所有以search开头的class属性的元素
    在这里插入图片描述
  2. 输入div[class$=‘area’],可以查找到div标签下所有以area结尾的class属性的元素
    在这里插入图片描述
  3. 输入a[title*=‘页’],可以查找到a标签下所有包含页的title属性的元素
    在这里插入图片描述

六、查找子节点

  1. 通过找到父节点标签来定位:父节点>.class属性值(id属性用#)
    在这里插入图片描述
    CSS选择器查找方法本篇已整理完,下篇整理xpath
CSS选择器查找元素一、哪些情况不能用ID选择器二、CSS选择器语法三、ID选择器查找元素四、class选择器查找元素五、通配符定位六、查找子节点一、哪些情况不能用ID选择器元素的ID不唯一,或者ID是动态变化的name以及linktext属性值不唯一如果满足上述条件,则不能用ID选择器来定位元素,就需要依靠xpath或CSS来定位元素了PS:不管使用什么方式来查找元素(比如id、name、xpath、CSS等),都需要确保页面上查找出来的元素的唯一性,应该只找到一个匹配的node(如何查看是 splitSelector ( '.red, .blue' ) // -> [ '.red', '.blue' ] splitSelector ( 'a[title="Some day , Somewhere"], strong' ) //-> [ 'a[title="Some day , Somewhere"]', 'strong' ]
语法:find_element_by_ css _selector(" css 选择器 定位 策略”) 或者 find_elements_by_ css _selector(" css 选择器 定位 策略”) 1、 css 可以通过 元素 的id,class,标签这三个常规属性直接 定位 到 tips:若用id 定位 ,则用#。若用class 定位 ,则用. 下面是百度搜索框的HTML代码: 通过 css selector 定位 有如下三种常规方式:   find_element_by...
$('div'). css ('color', 'red'). css ('backgorund-color', 'pink'); 2、 css 对象方式: $('div'). css ( { color: 'red' } ) 2、通过class类名方式 1、添加类 addClass('类名') 2、移除类 removeClass('类名') 3、切换类名 toggleClass('类名') 二、通过筛选方法 查找 jquery中 元素 1、通过索引 查找
通过 CSS 选择器 定位 元素 以Google主页的搜索按钮为例,其中HTML代码如下: <input value="Google 搜索" jsaction="sf.chk" name="btnk" type="submit"> 对应的 CSS 路径代码如下: #st-ib Selenium WebDriver中通过 CSS 查找 元素 的java示例代码如下: 示例代码详解:...
elements = wd.find_elements_by_ css _selector('div') elements = wd.find_elements_by_tag_name('div') id值, 加上#: #id值 element = wd.find_element_by_ css _selector('#searchtext') element.send_keys('你好') class值, 加上. : . class值 elements = ... 或者name以及linktext属性值也不唯一 我们就需要考虑用Xpath来 查找 元素 了,然后再对 元素 执行操作 不管用什么方式 查找 元素 ,id、name、Xpath、 CSS 等等 都需要在页面上 查找 到唯一的 元素 ,都应该只找到一个匹配的node 除非想要 查找 一批 元素 放在集合里,然后来 查找 集合 2.语法:(—代表)...
css 选择器 在 web 领域应用非常普遍,不管是前端工程师还是 ui 自动化测试,使用 css 选择器 都能精准快速 定位 到自己想要的 元素 css 选择器 的内容不是很多,稍微花一点时间就可以直接上手,在应用中就能逐渐掌握,当遇到一个表达式不是很熟练的时候,可以再回来查一下这篇文章。 先来看一下怎么使用 css 选择器 。写一个简单的登录界面 HTML : <div class="container"> <h2 class="title">登录</h2> <form i
对于这个需求,需要进行字符串的操作,可以采用字符串拼接和格式化输出等方法,来实现对于旅游信息的展示。 比如可以定义一个字符串变量,将每一天的行程信息都拼接在一起,最后输出整个旅游计划,具体的实现方法可以参考下面的代码示例: ```python # 定义每一天的行程信息 day 1 = " Day 1:抵达青岛,入住青岛特色客栈或酒店" day 2 = " Day 2:栈桥→五四广场" day 3 = " Day 3:海底世界→小麦岛" day 4 = " Day 4:跨海大桥→天主教堂" day 5 = " Day 5:电影博物馆→海底隧道" return_trip = "返程" # 将每一天的行程信息拼接在一起 itinerary = day 1 + "\n" + day 2 + "\n" + day 3 + "\n" + day 4 + "\n" + day 5 + "\n" + return_trip # 打印整个旅游计划 print("青岛五日游行程安排:\n" + itinerary) 输出结果如下: 青岛五日游行程安排: Day 1:抵达青岛,入住青岛特色客栈或酒店 Day 2:栈桥→五四广场 Day 3:海底世界→小麦岛 Day 4:跨海大桥→天主教堂 Day 5:电影博物馆→海底隧道