《手把手教你》系列技巧篇(五十二)-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工具基础使用教程

相关文章
|
1天前
|
文字识别 Linux 数据安全/隐私保护
掌握计算机自动化:Pyperclip与CnOCR详细教程(最全使用方法,每行代码都有注释,帮你解决与之有关的所有问题)
掌握计算机自动化:Pyperclip与CnOCR详细教程(最全使用方法,每行代码都有注释,帮你解决与之有关的所有问题)
|
1天前
|
编解码 机器人 关系型数据库
掌握计算机自动化:PyAutoGUI库详细教程(最全使用方法,每行代码都有注释,帮你解决与之有关的所有问题)
掌握计算机自动化:PyAutoGUI库详细教程(最全使用方法,每行代码都有注释,帮你解决与之有关的所有问题)
|
1天前
|
Java 测试技术 Python
《手把手教你》系列基础篇(七十七)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇(详解教程)
【6月更文挑战第18天】TestNG是一个Java测试框架,它允许在测试方法间定义执行顺序和依赖关系。当不指定依赖时,TestNG默认按方法名首字母排序执行。`@Test`注解的`dependsOnMethods`属性用于指定方法依赖,如`test1`依赖`test4`,则实际执行顺序为`test4`、`test2`、`test3`、`test1`。如果依赖的方法失败,后续依赖的方法将被跳过。此外,`dependsOnGroups`属性通过组名指定依赖,方便管理多个相关测试方法。通过`groups`定义方法所属组,然后在其他方法中用`dependsOnGroups`引用这些组。
16 5
|
2天前
|
存储 测试技术 数据安全/隐私保护
《手把手教你》系列基础篇(七十六)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 下篇(详解教程)
【6月更文挑战第17天】本文是一篇关于使用Selenium和TestNG进行数据驱动测试的教程。作者宏哥通过实例展示了如何处理多个用户登录场景。
37 0
|
3天前
|
XML 测试技术 数据格式
《手把手教你》系列基础篇(七十五)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇(详解教程)
【6月更文挑战第16天】本文介绍了TestNG中`@DataProvider`的两种使用方法。本文通过实例展示了TestNG如何利用`@DataProvider`结合方法名和`ITestContext`来灵活地为测试方法传递参数。
9 1
|
4天前
|
XML 存储 测试技术
《手把手教你》系列基础篇(七十四)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 上篇(详解教程)
【6月更文挑战第15天】本文介绍了TestNG的数据驱动测试(Data Driven Testing, DDT)概念和好处,并提供了两个实战示例。数据驱动测试允许使用不同的测试数据执行相同的测试用例,这些数据可以从外部文件或数据库获取。这种方法提高了测试效率,减少了冗余代码,并便于应对应用程序变更。
15 0
|
5天前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
19 5
|
6天前
|
监控 Java 测试技术
《手把手教你》系列基础篇(七十二)-java+ selenium自动化测试-框架设计基础-TestNG简单介绍(详解教程)
【6月更文挑战第13天】本文介绍了TestNG单元测试框架,它是一个灵感来源于JUnit和NUnit的测试框架,支持多种级别的测试,如单元测试、集成测试等。TestNG的特点包括丰富的注解、数据驱动测试、变量支持、自动生成HTML测试报告等。与JUnit和NUnit相比,TestNG在某些功能上更为强大。文章还详细讲解了如何在Eclipse中安装TestNG插件,提供了在线安装、更新站点安装和离线安装三种方法,并展示了安装成功的验证步骤。最后,通过一个项目实战案例展示了如何使用TestNG编写和运行测试代码。
14 2
|
7天前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(七十一)-java+ selenium自动化测试-自定义类解决元素同步问题(详解教程)
【6月更文挑战第12天】本文介绍了如何创建一个自定义类库来解决自动化测试中的元素同步问题。作者指出,大部分错误源于元素因时间不同步而引发,为此提供了一种解决方案。在项目实践中,首先在`library`包下创建名为`MyWait`的类,包含一个方法`isElementPresent`,该方法通过循环尝试并等待指定元素出现,避免了直接使用时间等待可能导致的不准确性。之后,在测试类中调用此自定义方法,成功实现了元素同步。代码示例展示了如何在Java+Selenium自动化测试中应用这个自定义类。
27 2
|
8天前
|
XML Web App开发 Java
《手把手教你》系列技巧篇(七十)-java+ selenium自动化测试-Java中如何读取properties配置文件内容(详解教程)
【6月更文挑战第11天】本文介绍了Java自动化测试中读取properties配置文件的方法。文章首先说明了为何要将配置参数放在properties文件中,然后简述了properties文件的作用和常用的读取方式,包括通过`java.util.Properties`类和`java.util.ResourceBundle`类。接着详细列举了`Properties`类的主要方法,如`getProperty()`、`load()`、`setProperty()`和`store()`等。
14 1