《手把手教你》系列技巧篇(五十二)-java+ selenium自动化测试-处理面包屑(详细教程)

简介: 【5月更文挑战第16天】本文介绍了网页面包屑导航的概念、作用及其实现方式。面包屑导航是一种用户界面元素,帮助用户理解他们在网站中的位置并方便返回。通常形式为“首页>分类>子分类>内容页”,最多三层结构。在自动化测试中,处理面包屑涉及获取层级关系和当前层级,可以通过查找包含面包屑的div或ul元素,再提取其中的链接来实现。文中还提供了一个基于HTML和JavaScript的简单示例,并展示了相应的自动化测试代码设计和运行结果。

1.简介

  面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们在网站中的位置以及如何返回。,是在用户界面中的一种导航辅助。它是用户一个在程序或文件中确定和转移他们位置的一种方法。

2.什么是面包屑导航?

面包屑就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的方式,一种表达内容归属的界面元素,如下图所示:

为了浏览体验,一般情况只有3级,首页>栏目页>内容页,3层目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目的权重不至于太分散。

3.测试场景

  不仅在网页导航需要处理面包屑,在实际的测试脚本中,有可能需要处理面包屑。处理面包屑主要是获取其层级关系,以及获得当前的层级。一般来说当前层级都不会是链接,而父层级则基本是以链接,所以处理面包屑的思路就很明显了。找到面包屑所在的div或ul,然后再通过该div或ul找到下面的所有链接,这些链接就是父层级。最后不是链接的部分就应该是当前层级了。

4.项目实战

宏哥就参照网上的面包屑源码修改给一个小demo,进行自动化测试。

4.1demo页面的HTML代码

1.html代码:breadcrumb.html。如下:

DOCTYPE html>

<html>

   <head>

       <meta http-equiv="content-type" content="text/html;charset=utf-8" />

       <title>breadcrumbtitle>        

       <script type="text/javascript" async="" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">script>

       <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />        

       <script type="text/javascript">

           $(document).ready(

               function(){

                       

               }

           );

       script>

   head>

   <body>

       <h3>北京宏哥h3>

       <div class="row-fluid">

           <div class="span3">        

               <ul class="breadcrumb">

                   <li><a href="#">首页a> <span class="divider">>span>li>

                   <li><a href="#">北京a> <span class="divider">>span>li>

                   <li class="active">宏哥li>

               ul>

           div>        

       div>        

   body>

   <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">script>

html>

4.2代码设计

4.3参考代码

package lessons;



import java.util.List;


import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;


/**

* @author 北京-宏哥

*

* @公众号:北京宏哥

*

* 《手把手教你》系列技巧篇(五十二)-java+ selenium自动化测试-处理面包屑(详细教程)

*

* 2021年12月7日

*/

public class Breadcrumb {

   

   public static void main(String[] args) throws InterruptedException {

       

       System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe");

       

       WebDriver driver = new ChromeDriver();

       

       driver.get("file:///C:/Users/DELL/Desktop/test/breadcrumb.html");

       Thread.sleep(1000);

       

//        获得其父层级

       List ancestors = driver.findElement(By.className("breadcrumb")).findElements(By.tagName("a"));

       for(WebElement link : ancestors){

           System.out.println(link.getText());

       }

       

//        获取当前层级

//        由于页面上可能有很多class为active的元素

//        所以使用层级定位最为保险

       WebElement current = driver.findElement(By.className("breadcrumb")).findElement(By.className("active"));

       System.out.println(current.getText());

       

       Thread.sleep(1000);

       System.out.println("browser will be close");

       driver.quit();    

   }


}

4.4运行代码

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

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

5.小结

因为现在这个导航比较流行,所以宏哥特地的拿出一篇文章的篇幅对其进行单独讲解一下,好了,时间不早了,今天就分享到这里!感谢您耐心的阅读。


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

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


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

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

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

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

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

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

Pycharm工具基础使用教程

相关文章
|
3天前
|
Java 测试技术 Python
《手把手教你》系列基础篇(七十九)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-下篇(详解教程)
【6月更文挑战第20天】TestNG是一个Java测试框架,提供两种测试方法依赖机制:强依赖(所有前置方法成功后才运行)和弱依赖(即使前置方法失败,后置方法仍运行)。文中通过代码示例展示了这两种依赖如何实现,并解释了当依赖方法失败时,如何影响后续方法的执行。文章还包含了TestNG Suite的运行结果截图来辅助说明。
22 8
|
2天前
|
Java 测试技术 Python
《手把手教你》系列基础篇(八十)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-番外篇(详解教程)
【6月更文挑战第21天】本文介绍了TestNG中测试方法的依赖执行顺序。作者通过一个实际的自动化测试场景展示了如何设计测试用例:依次打开百度、搜索“selenium”、再搜索“selenium+java”。代码示例中,`@Test`注解的`dependsOnMethods`属性用于指定方法间的依赖,确保执行顺序。如果不设置依赖,TestNG会按方法名首字母排序执行。通过运行代码,验证了依赖关系的正确性。
19 4
|
4天前
|
XML Web App开发 测试技术
《手把手教你》系列基础篇(七十八)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 中篇(详解教程)
【6月更文挑战第19天】本文介绍了使用TestNG框架配置XML文件来管理测试用例的分组和依赖关系。
16 2
|
1天前
|
XML 存储 自然语言处理
基于Java+HttpClient+TestNG的接口自动化测试框架(四)-------参数存取处理
基于Java+HttpClient+TestNG的接口自动化测试框架(四)-------参数存取处理
|
1月前
|
测试技术 数据安全/隐私保护
通过抓包能否做好接口测试
通过抓包能否做好接口测试
20 0
|
1月前
|
数据可视化 前端开发 测试技术
接口测试这么玩才明白
接口测试这么玩才明白
54 0
|
3天前
|
JSON Java Maven
使用`MockMvc`来测试带有单个和多个请求参数的`GET`和`POST`接口
使用`MockMvc`来测试带有单个和多个请求参数的`GET`和`POST`接口
15 3
|
1月前
|
NoSQL 安全 测试技术
接口测试用例设计的关键步骤与技巧解析
该文介绍了接口测试的设计和实施,包括测试流程、质量目标和用例设计方法。接口测试在需求分析后进行,关注功能、性能、安全等六项质量目标。流程包括网络监听(如TcpDump, WireShark)和代理工具(Charles, BurpSuite, mitmproxy, Fiddler, AnyProxy)。设计用例时,需考虑基本功能流程、输入域测试(如边界值、特殊字符、参数类型、组合参数、幂等性)、线程安全(并发和分布式测试)以及故障注入。接口测试用例要素包括模块、标题、优先级、前置条件、请求方法等。文章强调了保证接口的幂等性和系统健壮性的测试重要性。
52 5
|
4天前
|
监控 前端开发 测试技术
postman接口测试工具详解
postman接口测试工具详解
31 7
|
5天前
|
监控 JavaScript 前端开发
postman接口测试工具详解
postman接口测试工具详解
20 6

热门文章

最新文章