《手把手教你》系列技巧篇(四十九)-java+ selenium自动化测试-隐藏元素定位与操作(详解教程)

简介: 【5月更文挑战第13天】本文主要讨论了在Selenium自动化测试中如何处理前端隐藏元素的问题。隐藏元素通常是通过`type="hidden"`或`style="display: none;"`属性实现的,它们在页面上不可见,但仍然存在于HTML代码中。Selenium可以定位到这些隐藏元素,但无法直接进行点击、输入等操作,会报错“ElementNotInteractableException”。

1.简介

对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误,可是这种隐藏的下拉菜单又没有办法避免,所以非常头痛,这一篇只为交流隐藏元素自动化定位处理方法以及宏哥自己的一点浅薄见解。

2.什么是隐藏元素

隐藏元素,熟悉前端的或者HTML的小伙伴或者童鞋们一定不陌生,元素的属性隐藏和显示,主要是 type="hidden"和style="display: none;"属性来控制的,当然了还有其他的方法控制,宏哥这里就不详细说明了,有兴趣的小伙伴或者童鞋们可以自己查一下资料。隐藏元素是什么,隐藏元素是通过属性值 hidden="hidden"  进行隐藏,如果前端代码中出现这个,就代表该元素已经被隐藏了,大家也知道,如果元素隐藏了,是没有办法进行操作的,所谓的操作就是输入,点击,以及清空这些基本元素操作。如果通过selenium中的点击进行操作元素的话,会报错误,没有找到元素信息,前面也介绍了,隐藏的元素只能定位到,但是没有办法进行操作。

1.有两个输入框和一个登录的按钮,本来是显示的,如下图所示:

2.接下来在登录的元素属性里面让它隐藏,代码如下所示:

DOCTYPE html>  

<html lang="en">  

<head>  

   <meta charset="UTF-8">  

   <title>Logintitle>  

   <link rel="stylesheet" type="text/css" href="Login.css"/>  

head>  

<body>  

   <div id="login">  

       <h1>北京宏哥h1>  

       <form method="post">  

           <input type="text" required="required" placeholder="用户名" name="u">input>  

           <input type="password" required="required" placeholder="密码" name="p">input>  

           <button id="bjhg" class="but" type="submit" style="display: none;" onclick="display_alert()">登录button>                

       form>          

   div>  

body>

<script type="text/javascript">

   function display_alert(){

     alert("请关注公众号:北京宏哥")

   }

script>  

html>

这样登录按钮就不会显示了,如下图所示:

3.定位隐藏元素

宏哥前边说了,定位隐藏元素和普通的元素没啥区别,接下来就来验证下,是不是能定位到呢?其实前边的文章中已经验证了,可能小伙伴或者童鞋们没有留意或者注意到,那么宏哥在这里就再次验证一下。

3.1参考代码

package lessons;


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年11月24日

*/

public class testHidden {

   

public static void main(String[] args) {

       

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

       

       WebDriver driver =null;

       try {

           driver = new ChromeDriver();

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

           driver.manage().window().maximize();

           //通过id定位隐藏元素

           WebElement loginButton = driver.findElement(By.id("bjhg"));

           System.out.println("打印元素信息:"+loginButton);

           //获取元素属性

           System.out.println(loginButton.getAttribute("name"));

           //判断元素是否隐藏

           System.out.println(loginButton.isDisplayed());

       } catch (Exception e) {

           e.printStackTrace();

       } finally{

           System.out.println("执行结束,关闭浏览器");

           driver.quit();

       }

   }

}

3.2运行结果

运行结果可以看出,隐藏元素用普通定位方法,事实上是定位到了,和普通元素的定位没有任何区别!不要觉得它有什么特殊之处,需特殊的定位方法。

4.操作隐藏元素

大家也都知道selenium操作方法是通过模拟人的操作方法进行的,那么元素都看不到了,就没有所谓的操作不操作了,如果真的想要操作,我们可以使用前边宏哥介绍的JS语法进行操作,因为JS语法属于直接对前端的代码进行操作,隐藏元素在HTML代码中是存在的,隐藏元素主要是对于前端页面来说是不可见的。

隐藏元素可以正常定位到,只是不能操作(定位元素和操作元素是两码事,很多初学者或者面试官有时候分不清楚),操作元素是click,clear,sendKeys这些方法。

//点击隐藏登录框

WebElement loginButton = driver.findElement(By.id("bjhg"));

loginButton.click();

隐藏元素用click()方法会抛异常“org.openqa.selenium.ElementNotInteractableException: element not interactable”这个报错是说元素不可见,不可以被操作,同样的对“登录”按钮上的输入框如果隐藏了,执行输入(Sendkeys)操作也是会报“ElementNotInteractableException”。

5.JS操作隐藏元素

  selenium是无法操作隐藏元素的(但是能正常定位到),本身这个框架就是设计如此,如果非要去操作隐藏元素,那就用js的方法去操作,selenium提供了一个入口可以执行js脚本。 js和selenium不同,只有页面上有的元素(在dom里面的),都能正常的操作,接下来用js试试吧!

那就继续完善上边可以定位到但是不能操作的代码。

5.1代码设计

5.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自动化测试-隐藏元素定位与操作(详解教程)

*

* 2021年11月24日

*/

public class testHidden {

   

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

       

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

       

       WebDriver driver =null;

       try {

           driver = new ChromeDriver();

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

           driver.manage().window().maximize();

           //通过id定位隐藏元素

           WebElement loginButton = driver.findElement(By.id("bjhg"));

           System.out.println("打印元素信息:"+loginButton);

           //获取元素属性

           System.out.println(loginButton.getAttribute("name"));

           //通过JavaScript点击hidden属性的登录按钮

           JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

           String js = "document.getElementById('bjhg').click()";

           jsExecutor.executeScript(js);

       } catch (Exception e) {

           e.printStackTrace();

       } finally{

           System.out.println("执行结束,关闭浏览器");

           Thread.sleep(5000);

           driver.quit();

       }

   }

}

5.3运行代码

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

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

运行完之后,会发现页面正常的点击,弹出到关注宏哥的公众号页面了。

6.小结

6.1简化代码

百度搜到的可能方法是先用js去掉hidden属性,再用selenium操作,这个有点多此一举,你既然都已经会用js了,何必不一次性到位直接click呢?而且宏哥发现之前讲解的也是这种方法,有点“脱了裤子排气”。在这里宏哥纠正一下,直接一步到位哈!

6.2面试提问

如果面试官想问的是定位后操作隐藏元素的话,本质上说这个问题就是毫无意义的,web自动化的目的是模拟人的正常行为去操作。 如果一个元素页面上都看不到了,你人工也是无法操作的是不是?人工都不能操作,那你自动化的意义又在哪呢?所以这个只是为了单纯的考察面试者处理问题的能力,没啥实用性!(面试造飞机,进去拧螺丝) 既然面试官这么问了,那就想办法回答上给个好印象吧!记住一定不要回怼面试官,否则你的这次面试就凉了啊!!!




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

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


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

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

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

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

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

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

Pycharm工具基础使用教程



相关文章
|
1天前
|
安全 Java 编译器
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
|
1天前
|
Java 开发工具 Android开发
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
|
1天前
|
Java 编译器 Android开发
Kotlin教程笔记(28) -Kotlin 与 Java 混编
Kotlin教程笔记(28) -Kotlin 与 Java 混编
|
10天前
|
JSON Java Maven
实现Java Spring Boot FCM推送教程
本指南介绍了如何在Spring Boot项目中集成Firebase云消息服务(FCM),包括创建项目、添加依赖、配置服务账户密钥、编写推送服务类以及发送消息等步骤,帮助开发者快速实现推送通知功能。
24 2
|
17天前
|
Java 数据库连接 编译器
Kotlin教程笔记(29) -Kotlin 兼容 Java 遇到的最大的“坑”
Kotlin教程笔记(29) -Kotlin 兼容 Java 遇到的最大的“坑”
|
21天前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
35 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
199 7
Jmeter实现WebSocket协议的接口测试方法
|
2月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
208 3
快速上手|HTTP 接口功能自动化测试
|
30天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
35 0
|
2月前
|
JavaScript 前端开发 测试技术
ChatGPT与接口测试
ChatGPT与接口测试,测试通过
41 5

热门文章

最新文章