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

简介: 【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。

1.简介

按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位、其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位)。

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使用ID属性值定位元素

使用ID属性值定位元素,以‘标签’开头,先指定一个 HTML 标签,然后加上一个“#”符号,跟上 id 的属性值。具体格式为:

xxx.By.cssSelector("标签#ID属性值")

具体例子:

xxx.By.cssSelector("input#btn")

具体步骤:

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

CSS表达式:

(1)input#kw


(2)input#su

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "input#kw" ));


(2)WebElement SearchButton = driver.findElement(By.cssSelector("input#su"));

3.2.1代码设计

3.2.1参考代码

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月12日

*/

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( "input#kw" ));

       

       SearchBox.sendKeys("北京宏哥");

       

       WebElement HotButton  = driver.findElement(By.cssSelector("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.2.1运行代码

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

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

3.3使用页面其他属性值定位元素

使用页面其他属性值定位元素,以‘标签’开头,具体格式为:

xxx.By.cssSelector("标签[属性=属性值]")

具体例子:

xxx.By.cssSelector("input[password=password]")

除了 class 和 id 属性,CSS 选择器也可以使用其他的元素属性来定位。例如使用中的 Name 属性。

WebElement userName =driver.findElement(By.cssSelector("input[name=username]"));

alt 属性来定位元素。

WebElement previousButton =driver.findElement(By.cssSelector("img[alt='Previous']"));

你可能会遇到一个属性不足以来定位到一个元素的情况,你需要联合使用其他的属性来达到精确匹配。下面的例子中,使用多个属性来定位元素。

WebElement previousButton =driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));

具体步骤:

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

CSS表达式:

(1)input[name=wd]


(2)input[value=百度一下]

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "input[name=wd]" ));


(2)WebElement SearchButton = driver.findElement(By.cssSelector("input[value=百度一下]"));

3.3.1代码设计

3.3.1参考代码

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月10日

*/

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( "input[name=wd]" ));

       

       SearchBox.sendKeys("北京宏哥");

       

       WebElement HotButton  = driver.findElement(By.cssSelector("input[value=百度一下]"));

       

       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.1运行代码

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

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

3.4使用属性值的一部分内容定位元素

  此方法宏哥感觉和前边介绍的模糊定位差不多,具体语法和例子以及描述,如下表所示:

语法

     例子      

描述

^=

input[id^= ' ctrl']     

以 XXX 开始,例如,如果一个元素的ID是ctrl_12,就可以定位到此元素,匹配到 id 的头部 ctrl

$=

input[id$='_username']

以 XXX 结尾,例如,如果一个元素的 ID 是a_1_userName,返将会匹配到 id 的尾部_userName。

*=

input[id*='username']

包含。例如,如果一个元素的 ID 是 panel_login_userName_textfield,返将会匹配到此 id 值的_userName,从而定位到元素

具体步骤:

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

CSS表达式:

(1)input[id ^= 'k']


(2)input[id *='su']

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "input[id ^= 'k'] " ));


(2)WebElement SearchButton = driver.findElement(By.cssSelector("input[id *='su']"));

3.3.1代码设计

3.3.1参考代码

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月10日

*/

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( "input[id^='k']" ));

       

       SearchBox.sendKeys("北京宏哥");

       

       WebElement HotButton  = driver.findElement(By.cssSelector("input[id*='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.3.1运行代码

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

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

4.小结

这篇文章中的第一和第二种方法其实就是用:标签和属性组合进行定位的,那么单单用属性可以定位吗?宏哥试一下。

4.1属性定位

可以通过元素的id,class,tag标签这三个属性直接定位

(1)# 表示id属性,如:#kw

(2). 表示class属性,如:.s_ipt

(3)直接用标签名称,如:input

4.1.1参考代码

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月12日

*/

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 class定位

       WebElement SearchBox = driver.findElement(By.cssSelector( ".s_ipt" ));

       

       SearchBox.sendKeys("北京宏哥");

       

       //By css id定位

       WebElement HotButton  = driver.findElement(By.cssSelector("#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();

   }


}

4.2其它属性定位

通过其它属性定位时,直接写属性名和属性值

4.2.1参考代码

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月12日

*/

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 class定位

       WebElement SearchBox = driver.findElement(By.cssSelector( "[name='wd']" ));

       

       SearchBox.sendKeys("北京宏哥");

       

       //By css id定位

       WebElement HotButton  = driver.findElement(By.cssSelector("[value='百度一下']"));

       

       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();

   }


}

以上代码宏哥都运行了,可以正常运行和定位。好了今天时间也不早了就分享到这里吧!




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

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

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

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

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

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

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

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

Pycharm工具基础使用教程

相关文章
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
632 5
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
412 31
Selenium IDE:Web自动化测试的得力助手
|
Java 测试技术 C#
自动化测试之美:从Selenium到Appium
【10月更文挑战第3天】在软件开发的海洋中,自动化测试如同一艘航船,引领着质量保证的方向。本文将带你领略自动化测试的魅力,从Web端的Selenium到移动端的Appium,我们将一探究竟,看看这些工具如何帮助我们高效地进行软件测试。你将了解到,自动化测试不仅仅是技术的展示,更是一种提升开发效率和产品质量的智慧选择。让我们一起启航,探索自动化测试的世界!
|
JavaScript 前端开发 测试技术
精通Selenium:从基础到高级的网页自动化测试策略
【10月更文挑战第6天】随着Web应用变得越来越复杂,手动进行功能和兼容性测试变得既耗时又容易出错。自动化测试因此成为了现代软件开发不可或缺的一部分。Selenium是一个强大的工具集,它支持多种编程语言(包括Python),允许开发者编写脚本来模拟用户与Web页面的交互。本文将带领读者从Selenium的基础知识出发,逐步深入到高级的应用场景,通过丰富的代码示例来展示如何高效地进行网页自动化测试。
2197 5
|
Web App开发 缓存 Linux
高效Selenium测试技巧:轻松控制已开启的浏览器
【10月更文挑战第13天】在进行Selenium测试时,通常会启动新浏览器实例,但有时需要控制已开启的浏览器,以节省时间并更真实地模拟用户行为。这可通过设置Chrome为可远程控制并使用`Remote WebDriver`连接实现。需在启动Chrome时添加`--remote-debugging-port`参数,并通过Python脚本中的`webdriver.Remote`连接至指定端口。此外,还可利用会话ID(Session ID)重新连接浏览器,提高测试灵活性。需要注意浏览器版本兼容性及元素定位稳定性等问题,确保测试准确性和一致性。
1236 1
|
Web App开发 JavaScript Java
自动化测试的利剑:Selenium WebDriver入门与实践
【9月更文挑战第21天】在软件开发的海洋中,自动化测试犹如一艘船,帮助开发者们快速航行至质量保证的彼岸。本文将作为你的罗盘,指引你了解和掌握Selenium WebDriver这一强大的自动化测试工具。通过深入浅出的方式,我们将探索Selenium WebDriver的基本概念、安装过程以及编写简单测试脚本的方法。无论你是刚接触自动化测试的新手,还是希望提升测试技能的开发者,这篇文章都将为你提供有价值的指导。
|
Web App开发 Java 测试技术
自动化测试的利器:Selenium WebDriver入门与实践
【9月更文挑战第8天】在软件开发的海洋中,测试是确保我们不会溺水的那根救生索。Selenium WebDriver,作为自动化测试的明星工具,让这根救生索更加结实可靠。本文将带你快速上手Selenium WebDriver,从基础设置到实际操作,再到实战演练,让你的开发之旅更加平稳顺畅。
|
敏捷开发 Java 测试技术
探索自动化测试的奥秘:从Selenium到Appium
【9月更文挑战第14天】软件测试,这个看似枯燥乏味却至关重要的领域,正经历着一场革命。随着技术的进步,自动化测试工具如Selenium和Appium已成为质量保证的利器。本文将带你一探这些工具的神秘面纱,了解它们如何简化测试流程、提升效率,并确保软件产品的质量。准备好,我们将深入自动化测试的世界,解锁其背后的原理和实践技巧。
|
Web App开发 设计模式 JavaScript
自动化测试之美:如何利用Selenium实现Web应用的高效测试
【10月更文挑战第29天】在软件开发的世界中,测试是确保产品质量的关键步骤。本文将带你了解如何使用Selenium这一强大的自动化测试工具,提高Web应用测试的效率和准确性。通过实际案例,我们将探索Selenium的核心功能及其在现代软件开发中的应用,旨在帮助读者掌握自动化测试的精髓,从而提升软件测试工作的整体效能。
252 0
|
Web App开发 测试技术 API
自动化测试之美:使用Selenium和Python进行Web应用测试
【8月更文挑战第31天】在软件开发的快节奏世界中,自动化测试如同一束明灯,照亮了质量保证之路。本文将引导你通过Selenium和Python的强大组合,探索如何构建高效的Web应用测试框架。我们不仅会讨论理论,还会深入代码,从一个简单的示例开始,逐步扩展至更复杂的场景。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧。让我们一同揭开自动化测试的神秘面纱,体验它的魅力所在。