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

简介: 【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。

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的索引定位有很大不同,我们还以百度首页为例

我们要定位“百度一下”按钮,先定位到“百度一下”元素标签的上级标签,而标签是标签下所有标签的第2个,同时又是标签下的第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




每天学习一点,今后必成大神-

往期推荐(由于跳转参数丢失了,所有建议选中要访问的右键,在新标签页中打开链接即可访问):

Appium自动化系列,耗时80天打造的从搭建环境到实际应用精品教程测试

Python接口自动化测试教程,熬夜87天整理出这一份上万字的超全学习指南

Python+Selenium自动化系列,通宵700天从无到有搭建一个自动化测试框架

Java+Selenium自动化系列,仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架

Jmeter工具从基础->进阶->高级,费时2年多整理出这一份全网超详细的入门到精通教程

Fiddler工具从基础->进阶->高级,费时100多天吐血整理出这一份全网超详细的入门到精通教程

Pycharm工具基础使用教程

相关文章
|
3月前
|
前端开发 JavaScript Java
【实操】SpringBoot监听Iphone15邮件提醒,Selenium+Python自动化抢购脚本
本文介绍了一个结合SpringBoot和Python的实用功能,旨在监控iPhone 15的库存状态并通过邮件提醒用户。系统采用SpringBoot监听苹果官网API,解析JSON数据判断是否有货,并展示最近的库存记录。此外,还能自动触发Selenium+Python脚本实现自动化购买。文中详细介绍了技术栈、接口分析、邮件配置及自动化脚本的设置方法。该项目不仅适用于熟悉后端开发的人员,也适合回顾Layui和Jquery等前端技术。
53 0
【实操】SpringBoot监听Iphone15邮件提醒,Selenium+Python自动化抢购脚本
|
28天前
|
JavaScript 前端开发 测试技术
精通Selenium:从基础到高级的网页自动化测试策略
【10月更文挑战第6天】随着Web应用变得越来越复杂,手动进行功能和兼容性测试变得既耗时又容易出错。自动化测试因此成为了现代软件开发不可或缺的一部分。Selenium是一个强大的工具集,它支持多种编程语言(包括Python),允许开发者编写脚本来模拟用户与Web页面的交互。本文将带领读者从Selenium的基础知识出发,逐步深入到高级的应用场景,通过丰富的代码示例来展示如何高效地进行网页自动化测试。
156 5
|
5天前
|
Web App开发 设计模式 JavaScript
自动化测试之美:如何利用Selenium实现Web应用的高效测试
【10月更文挑战第29天】在软件开发的世界中,测试是确保产品质量的关键步骤。本文将带你了解如何使用Selenium这一强大的自动化测试工具,提高Web应用测试的效率和准确性。通过实际案例,我们将探索Selenium的核心功能及其在现代软件开发中的应用,旨在帮助读者掌握自动化测试的精髓,从而提升软件测试工作的整体效能。
|
2月前
|
数据采集 Web App开发 测试技术
使用Selenium与WebDriver实现跨浏览器自动化数据抓取
在网络爬虫领域,Selenium与WebDriver是实现跨浏览器自动化数据抓取的利器。本文详细介绍了如何利用Selenium和WebDriver结合代理IP技术提升数据抓取的稳定性和效率。通过设置user-agent和cookie来模拟真实用户行为,避免被网站检测和阻止。文章提供了具体的代码示例,展示了如何配置代理IP、设置user-agent和cookie,并实现了跨浏览器的数据抓取。合理的参数配置能有效减少爬虫被封禁的风险,提高数据抓取效率。
260 6
使用Selenium与WebDriver实现跨浏览器自动化数据抓取
|
23天前
|
Web App开发 Java 测试技术
一、自动化:web自动化。Selenium 入门指南:从安装到实践
一、自动化:web自动化。Selenium 入门指南:从安装到实践
33 0
|
2月前
|
Web App开发 JavaScript Java
自动化测试的利剑:Selenium WebDriver入门与实践
【9月更文挑战第21天】在软件开发的海洋中,自动化测试犹如一艘船,帮助开发者们快速航行至质量保证的彼岸。本文将作为你的罗盘,指引你了解和掌握Selenium WebDriver这一强大的自动化测试工具。通过深入浅出的方式,我们将探索Selenium WebDriver的基本概念、安装过程以及编写简单测试脚本的方法。无论你是刚接触自动化测试的新手,还是希望提升测试技能的开发者,这篇文章都将为你提供有价值的指导。
|
2月前
|
Web App开发 Java 测试技术
自动化测试的利器:Selenium WebDriver入门与实践
【9月更文挑战第8天】在软件开发的海洋中,测试是确保我们不会溺水的那根救生索。Selenium WebDriver,作为自动化测试的明星工具,让这根救生索更加结实可靠。本文将带你快速上手Selenium WebDriver,从基础设置到实际操作,再到实战演练,让你的开发之旅更加平稳顺畅。
|
3月前
|
Web App开发 编解码 Linux
使用Selenium自动化测试解决报告生成失败问题及Linux部署指南
这篇文章介绍了使用Selenium自动化测试解决报告生成失败问题的方法,包括Linux环境下的部署指南和代码实现。
44 1
使用Selenium自动化测试解决报告生成失败问题及Linux部署指南
|
3月前
|
Web App开发 测试技术 API
自动化测试之美:使用Selenium和Python进行Web应用测试
【8月更文挑战第31天】在软件开发的快节奏世界中,自动化测试如同一束明灯,照亮了质量保证之路。本文将引导你通过Selenium和Python的强大组合,探索如何构建高效的Web应用测试框架。我们不仅会讨论理论,还会深入代码,从一个简单的示例开始,逐步扩展至更复杂的场景。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧。让我们一同揭开自动化测试的神秘面纱,体验它的魅力所在。
|
3月前
|
人工智能 Java 测试技术
自动化测试之美:如何用Selenium提升Web应用的质量保证
【8月更文挑战第24天】 在软件开发的海洋里,自动化测试如同一艘救生艇,帮助开发团队保持代码质量的同时,还能确保他们不会淹没在功能的迭代和bug修复中。Selenium,作为一个用于Web应用程序测试的工具,它的强大之处在于模拟真实用户操作的能力。本文将通过浅显易懂的语言和实际代码示例,引导读者理解Selenium的魅力所在,以及如何有效利用它来提升Web应用的测试效率和覆盖率。