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

简介: 【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。

1.简介

CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式。CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性。下面详细介绍CSS定位方式的使用方法。xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对CSS来说,具有语法简单,定位速度快等优点。

2.CSS定位优势

CSS定位是平常使用过程中非常重要的一种方式。它与xpath定位有诸多类似的地方,但是无论从性能还是语法上来说CSS都是比较有优势的。

1、一般情况下定位速度要比xpath快

2、语法比xpath要简洁

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

(1)id

(2)name

(3)class name

(4)tag name

(5)link text

(6)partial link text

(7)xpath

(8)css selector(今天讲解)

4.自动测试实战

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

4.1大致步骤

1.访问度娘首页。

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

4.2绝对路径定位方式

顾名思义,将 CSS 表达式从 html 的最外层节点,逐层填写,最后定位到操作元素,此方法最为简单,具体格式为:

xxx.By.cssSelector("绝对路径")

具体例子:

xxx.By.cssSelector("html > body > div >input[value="查询"]")

CSS定位表达式使用绝对路径定位属性value的值为“查询”的页面元素。从CSS定位表达式可以看出,步间通过“>"分割,区别于CSS路径中的正”/“,并且也不再使用@符号选择属性。

具体步骤:

在被测试百度网页中,

(1)打开Chrome浏览器,输入百度网址访问百度首页,F12打开开发者工具,然后Ctrl+F调出输入框,在输入框中输入绝对路径的css表达式(html>body>div>div>div>div>div>form>span>input),回车。查找输入框并输入“北京宏哥”,如下图所示:

(2)按照同样的方法,查找“百度一下”按钮,如下图所示:

(3)点击“百度一下”按钮。

CSS表达式:

①用大于号(>)

(1)html>body>div>div>div>div>div>form>span>input


(2)html>body>div>div>div>div>div>form>span>input[value='百度一下']

②用空格

(1)html body div div div div div form span input


(2)html body div div div div div form span input[value='百度一下']

java定位语句:

(1)WebElement searchBox = driver.findElement(By.cssSelector( "html>body>div>div>div>div>div>form>span>input" ));

(2)WebElement SearchButton = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>input[value='百度一下']"));

4.2.1绝对路径的缺点

此方法缺点显而易见,当页面元素位置发生改变时,都需要修改,因此,并不推荐使用绝对路径的写法。

4.2.2代码设计

4.2.3参考代码

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

*/

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( "html>body>div>div>div>div>div>form>span>input" ));

       

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

       

       WebElement HotButton  = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>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();

   }


}

4.2.4运行代码

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

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

4.3相对路径定位方式

相对路径,以‘标签’开头,具体格式为:

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

具体例子:

xxx.By.cssSelector("input[value='查询']")

具体步骤:

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

CSS表达式:

(1)*[id="kw"]


(2)*[id="su"]

java定位语句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" ));


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

4.3.1代码设计

4.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月9日

*/

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( "*[id='kw']" ));

       

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

       

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

   }


}

4.3.3运行代码

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

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

4.4使用class名称定位元素

class名称定为元素,以‘标签’开头,具体格式为:

xxx.By.cssSelector("标签.class名称")

具体例子:

xxx.By.cssSelector("input.sprend")

具体步骤:

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

CSS表达式:

(1)input.s_ipt


(2)input.btn

java定位语句:

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


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

4.4.1代码设计

4.4.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.s_ipt" ));

       

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

       

       WebElement HotButton  = driver.findElement(By.cssSelector("input.btn"));

       

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

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

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

从上边的控制台可以清楚地看到报错了,从视频中可以看到浏览器卡住不动了。

虽然选择一个可以按宏哥说的那种方法定位到按钮,但是在运行代码的时候还是会报错的。如下图所示:

5.小结

5.1绝对路径和相对路径的区别

绝对路径: 让CSS 从文档的根节点开始解析

相对路径:让CSS 从文档的任何元素节点开始解析

细心地小伙伴或者童鞋们会发现“百度一下”按钮的class是一串值“btn self-btn bg s_btn”,宏哥这里选择了第一个“btn”,无论是选择一个还是选择一串都会报错(Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"input.btn self-btn bg s_btn"}),以后尽量避免用这种一串的定位。如下图所示:

6.拓展

6.1使用浏览器调试工具,可以直接获取CSS语句

这个主要是针对不会或者不熟悉CSS语法的小伙伴或者童鞋们宏哥提供的一种方法,其实CSS的语法很简单的,几个小时就可以搞定的。

  好了,今天就分享和讲解到这里,下一篇和宏哥继续看CSS的其他定位方法。



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

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

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

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

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

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

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

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

Pycharm工具基础使用教程

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