《手把手教你》系列技巧篇(五十二)-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天前
|
XML 测试技术 数据格式
《手把手教你》系列基础篇(七十五)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇(详解教程)
【6月更文挑战第16天】本文介绍了TestNG中`@DataProvider`的两种使用方法。本文通过实例展示了TestNG如何利用`@DataProvider`结合方法名和`ITestContext`来灵活地为测试方法传递参数。
6 1
|
1天前
|
XML 存储 测试技术
《手把手教你》系列基础篇(七十四)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 上篇(详解教程)
【6月更文挑战第15天】本文介绍了TestNG的数据驱动测试(Data Driven Testing, DDT)概念和好处,并提供了两个实战示例。数据驱动测试允许使用不同的测试数据执行相同的测试用例,这些数据可以从外部文件或数据库获取。这种方法提高了测试效率,减少了冗余代码,并便于应对应用程序变更。
8 0
|
3天前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
14 5
|
2天前
|
缓存 NoSQL Java
Java高并发实战:利用线程池和Redis实现高效数据入库
Java高并发实战:利用线程池和Redis实现高效数据入库
12 0
|
4天前
|
安全 Java API
Java并发基础-启动和终止线程
Java并发基础-启动和终止线程
13 0
|
4天前
|
Java 调度
Java并发基础-线程简介(状态、常用方法)
Java并发基础-线程简介(状态、常用方法)
11 0
|
9天前
|
安全 Java 编译器
JAVA-多线程知识点总结(二)
JAVA-多线程知识点总结(二)
|
2天前
|
监控 Java API
Java 程序设计 第八章 线程
Java 程序设计 第八章 线程
|
2天前
|
存储 安全 Java
Java多线程编程--JUC
Java多线程编程
|
3天前
|
Java API
详细探究Java多线程的线程状态变化
Java多线程的线程状态主要有六种:新建(NEW)、可运行(RUNNABLE)、阻塞(BLOCKED)、等待(WAITING)、超时等待(TIMED_WAITING)和终止(TERMINATED)。线程创建后处于NEW状态,调用start()后进入RUNNABLE状态,表示准备好运行。当线程获得CPU资源,开始执行run()方法时,它处于运行状态。线程可以因等待锁或调用sleep()等方法进入BLOCKED或等待状态。线程完成任务或发生异常后,会进入TERMINATED状态。

热门文章

最新文章