1.简介

按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。

2.常用定位方法(8种)

(1)id
(2)name
(3)class name
(4)tag name
(5)link text
(6)partial link text
(7)xpath
(8)css selector(今天讲解)

3.自动测试实战

以百度首页为例,将CSS的各种定位方法一一讲解和分享一下。

3.1大致步骤

1.访问度娘首页。

2.通过CSS定位到元素,点击一下。

3.2使用索引定位元素

在xpath中,我们使用过索引定位,因此在css中同样可以使用索引定位。这个有的也叫定位子元素或者是伪类定位元素。

CSS的索引定位与xpath的索引定位有很大不同,我们还以百度首页为例

我们要定位“百度一下”按钮,先定位到“百度一下”元素标签<input>的上级标签<span>,而<span>标签是<form>标签下所有<span>标签的第2个<span>,同时又是<form>标签下的第9个子标签

在xpath定位中这样写的:

driver.findElement(By.cssSelector("//*[@id='form']/span[2]/input"))

但是CSS定位必须这样写

driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"))

具体步骤:

在被测试百度网页中,按照宏哥在5.2中的方法 (1)查找输入框并输入“北京宏哥”,(2)查找“百度一下”按钮,(3)点击“百度一下”按钮。

CSS表达式:

(1)form#form>span:nth-child(8)>input
(2)form#form>span:nth-child(9)>input

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "form#form>span:nth-child(8)>input" ));
(2)WebElement SearchButton = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"));

3.2.1代码设计

3.2.2参考代码
package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver; /**
* @author 北京-宏哥
*
* 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
*
* 2021年8月13日
*/
public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驱动路径 WebDriver driver = new ChromeDriver ();
//最大化窗口
driver.manage().window().maximize();
driver.get("http://wwww.baidu.com"); //By css 定位
WebElement SearchBox = driver.findElement(By.cssSelector( "form#form>span:nth-child(8)>input" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input")); HotButton.click(); //定位到文本,将文本高亮显示
//创建一个JavascriptExecutor对象
JavascriptExecutor js =(JavascriptExecutor)driver; //新闻文本高亮显示颜色
js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判断打开页面是不是北京宏哥,这里用url作为验证
assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("断言通过!"); driver.quit();
} }
3.2.3运行代码

1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作,如下小视频所示:

3.3查找兄弟元素

1)同层级下一个元素:+
2)选择同层级多个相同标签的元素:~
备注:
+号可以多次使用
~号一般返回的是多个元素,要用find_elements接收

具体步骤:

在被测试百度网页中,按照宏哥的老办法进行验证: (1)查找输入框并输入“北京宏哥”,(2)查找“百度一下”按钮,(3)点击“百度一下”按钮。

CSS表达式:

(1)span.soutu-btn+input

(2)input#su

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn+input" )); 
(2)WebElement SearchButton = driver.findElement(By.cssSelector("input#su"));
3.3.1代码设计

3.3.2参考代码
package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver; /**
* @author 北京-宏哥
*
* 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
*
* 2021年8月13日
*/
public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驱动路径 WebDriver driver = new ChromeDriver ();
//最大化窗口
driver.manage().window().maximize();
driver.get("http://wwww.baidu.com"); //By css + 定位
WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn+input" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input")); HotButton.click(); //定位到文本,将文本高亮显示
//创建一个JavascriptExecutor对象
JavascriptExecutor js =(JavascriptExecutor)driver; //新闻文本高亮显示颜色
js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判断打开页面是不是北京宏哥,这里用url作为验证
assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("断言通过!"); driver.quit();
} }
3.3.3运行代码

1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作,如下小视频所示:

3.4多元素共同定位

CSS定位表达式支持多元素选择器,也就是一次可以同时选择多个相同的标签,也可以同时选择多个不同的标签,不同标签间用英文的逗号隔开

具体步骤:

在被测试百度网页中,按照宏哥在5.2中的方法 (1)查找输入框并输入“北京宏哥”,(2)查找“百度一下”按钮(因为span有好多input,所以宏哥又用了一下id),(3)点击“百度一下”按钮。

CSS表达式:

(1)span.soutu-btn, input

(2)span#s_btn_wr, input#su

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn, input" )); 
(2)WebElement SearchButton = driver.findElement(By.cssSelector("span#s_btn_wr, input#su"));
3.4.1代码设计

3.4.2参考代码
package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver; /**
* @author 北京-宏哥
*
* 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
*
* 2021年8月13日
*/
public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驱动路径 WebDriver driver = new ChromeDriver ();
//最大化窗口
driver.manage().window().maximize();
driver.get("http://wwww.baidu.com"); //By css 定位
WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn, input" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("span#s_btn_wr, input#su")); HotButton.click(); //定位到文本,将文本高亮显示
//创建一个JavascriptExecutor对象
JavascriptExecutor js =(JavascriptExecutor)driver; //新闻文本高亮显示颜色
js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判断打开页面是不是北京宏哥,这里用url作为验证
assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("断言通过!"); driver.quit();
} }
3.4.3运行代码

1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:

抛出异常主题为element not visible主要有一下三个方面的原因。

第一:元素之间存在逻辑关系,比如你要选择地址时,中国选择完毕之后,才能选择北京。如果想直接一步到位,则会出现element not visible。这种错误并不是元素定位错误所引起的,而是逻辑关系上没有走通。解决办法:注意逻辑顺序的选取,按照网站的要求激活一个在激活下一个。这里面要注意一点的就是在是用Firefox的时候,我的逻辑关系是没有错误的,但是Firefox还是会给我报错element not visible。后来换成chrome浏览器,问题就可以解决。

第二:元素定位错误:如果网页中存在你需要定位的多个元素,如果出现element not visible,有可能是你想要的定位和现实的定位出现了不同,解决办法也就是定位更精确,即定位更有区分性。可以采用By.Id,By.xpath(expression)方式。

第三:元素定位到一个鼠标事件后才能进行事件触发的位置上:比如,需要鼠标移动到某个区域,元素才可以显示点击的按钮,如果鼠标离开,则相应的事件也没办法触发。解决办法:问题都已经描述清楚了,响应的解决办法也就有了,那就是引入action类,模拟鼠标移动到需要定位的元素下,让dom树从新生成,然后定位相应的元素。

这里很明显是第二个原因了。

2.运行代码后电脑端的浏览器的动作,如下小视频所示:

4.小结

4.1css 和 xpath 的区别

1、css 更加简洁
2、xpath 的功能更强大。对于简单的元素定位可以使用css, 复杂的元素使用xpath.
3、xpath 可以使用 text 文本定位, css 不行。
4、效率。通常来说,xpath 的解析效率会低。css 要快一些。

4.2CSS与xpath定位比较

定位方式 xpath CSS
标签 //input input
id //input[@id='kw'] input#kw
class //input[@class='s_ipt'] input.s_ipt
其它属性 //input[@name='username']

input[name=username]

input[name^=user](以user开头)

input[name$=name](以name结尾)

input[name*=erna](包含ernal)

定位子元素

//form[@id='form']/*

//form/input

form#form>*

form#form>input

 定位所有后代元素

//form//input

 form input
索引
//form/span[2]

 form>span[9]
 根据子元素回溯父元素  //*[./[@id='su']](定位到父级元素)  
根据兄弟元素定位   span.soutu-btn+input

《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)的更多相关文章

  1. 《手把手教你》系列技巧篇(八)-java+ selenium自动化测试-元素定位大法之By id(详细教程)

    1.简介 从这篇文章开始,要介绍web自动化核心的内容,也是最困难的部分了,就是:定位元素,并去对定位到的元素进行一系列相关的操作.想要对元素进行操作,第一步,也是最重要的一步,就是要找到这个元素,如 ...

  2. 《手把手教你》系列技巧篇(九)-java+ selenium自动化测试-元素定位大法之By name(详细教程)

    1.简介 上一篇宏哥已经介绍了通过id来定位元素,今天继续介绍其他剩下的七种定位方法中的通过name来定位元素.本文来介绍Webdriver中元素定位方法之By name,顾名思义,就是我们想要定位的 ...

  3. 《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

    1.简介 按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...

  4. 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)

    1.简介 CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性.下面详细介绍CSS定位方式的使用方法.xpat ...

  5. 《手把手教你》系列技巧篇(十六)-java+ selenium自动化测试-元素定位大法之By xpath下卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

  6. 《手把手教你》系列技巧篇(十)-java+ selenium自动化测试-元素定位大法之By class name(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍By ClassName.看到ID,NAME这些方法的讲解,小伙伴们和童鞋们应该知道,要做好Web自动化测试,最好是需要了 ...

  7. 《手把手教你》系列技巧篇(二十)-java+ selenium自动化测试-元素定位大法之终卷(详细教程)

    1.简介 这篇文章主要是对前边的文章中的一些总结和拓展.本来是不打算写着一篇的,但是由于前后文章定位元素的时间有点长,怕大家忘记了,就在这里简单做一个总结和拓展. 2.Selenium八种定位方式 S ...

  8. 《手把手教你》系列技巧篇(十四)-java+ selenium自动化测试-元素定位大法之By xpath上卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

  9. 《手把手教你》系列技巧篇(十五)-java+ selenium自动化测试-元素定位大法之By xpath中卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

随机推荐

  1. 创建Maven项目骨架并使用

    1.archetype是什么? archetype 字面意思是 原型.可以理解为archetype相当于一个脚手架/模板,通过这个脚手架/模板我们可以快速的创建出一个项目. 比如下图中的这些就是mav ...

  2. buu 红帽杯 XX

    一.拖入ida,静态分析 __int64 __fastcall sub_7FF65D4511A0(__int64 a1, __int64 a2) { signed __int64 v2; // rbx ...

  3. Louvain 论文笔记

    Louvain Introduce Louvain算法是社区发现领域中经典的基于模块度最优化的方法,且是目前市场上最常用的社区发现算法.社区发现旨在发现图结构中存在的类簇(而非传统的向量空间). Al ...

  4. python使用笔记25--深拷贝、浅拷贝

    1.循环删除list 1 ll = [1,1,32,4,3,2,3,2,4,6,4,5,6,7,8] 2 for i in ll: 3 if i % 2 !=0: 4 ll.remove(i) 5 p ...

  5. adb bat 改进

    @REM 生成随机数@echo off@REM 设置延迟变量setlocal enabledelayedexpansionset min=9set max=17set /a mod=!max!-!mi ...

  6. 电脑通过WIFI连接手机ADB

    1.搜索adb wifi 2.安装并开启:根据提示 3.电脑:adb connect 192.168.1.134 a安装ADB TOOLS b安装ADB DRIVER c将ADB TOOLS复制到c: ...

  7. css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它. 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表.设置列表标记有 ...

  8. [.NET大牛之路 003] .NET 的发展简史

    如果你热爱某产品,你一定想了解它的历史.今天我们简单回顾一下 .NET 平台的发展历史,来看看它在历史上的里程碑,这对我们更好地了解和学习 .NET 有着重要的意义. 微软 .NET 战略初衷 20 ...

  9. Apache atlas liunx环境安装部署手册

    一.        背景 本文使用一台ubuntu虚拟机安装Apache-atlas,使用集成包unzip apache-atlas-2.1.0.zip进行快速安装部署,该集成包高度集成了hadoop ...

  10. 查看JVM默认参数及微调JVM启动参数

    目录 查看某个JVM进程堆内存信息 微调JVM启动参数 查看JVM的一些默认参数 参考廖雪峰老师的这篇 JVM调优的正确姿势: https://www.liaoxuefeng.com/article/ ...