《手把手教你》系列技巧篇(四十九)-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天前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
14 5
|
2天前
|
监控 Java 测试技术
《手把手教你》系列基础篇(七十二)-java+ selenium自动化测试-框架设计基础-TestNG简单介绍(详解教程)
【6月更文挑战第13天】本文介绍了TestNG单元测试框架,它是一个灵感来源于JUnit和NUnit的测试框架,支持多种级别的测试,如单元测试、集成测试等。TestNG的特点包括丰富的注解、数据驱动测试、变量支持、自动生成HTML测试报告等。与JUnit和NUnit相比,TestNG在某些功能上更为强大。文章还详细讲解了如何在Eclipse中安装TestNG插件,提供了在线安装、更新站点安装和离线安装三种方法,并展示了安装成功的验证步骤。最后,通过一个项目实战案例展示了如何使用TestNG编写和运行测试代码。
12 2
|
3天前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(七十一)-java+ selenium自动化测试-自定义类解决元素同步问题(详解教程)
【6月更文挑战第12天】本文介绍了如何创建一个自定义类库来解决自动化测试中的元素同步问题。作者指出,大部分错误源于元素因时间不同步而引发,为此提供了一种解决方案。在项目实践中,首先在`library`包下创建名为`MyWait`的类,包含一个方法`isElementPresent`,该方法通过循环尝试并等待指定元素出现,避免了直接使用时间等待可能导致的不准确性。之后,在测试类中调用此自定义方法,成功实现了元素同步。代码示例展示了如何在Java+Selenium自动化测试中应用这个自定义类。
27 2
|
4天前
|
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
|
5天前
|
存储 Java 测试技术
《手把手教你》系列技巧篇(六十九)-java+ selenium自动化测试 - 读取csv文件(详细教程)
【6月更文挑战第10天】本文介绍了如何在Java中读取CSV文件。首先解释了CSV是逗号分隔值的文本文件,常用于数据交换。接着,在项目实战部分,详细说明了如何通过下载并引入opencsv库来读取CSV文件:包括下载jar包、添加到Eclipse项目、创建CSV文件、编写Java代码读取文件内容,并展示了代码执行后的输出结果。文章以一个简单的代码示例展示了如何使用opencsv读取CSV文件中的数据。
10 0
|
6天前
|
数据采集 Web App开发 前端开发
Selenium:自动化Web浏览器操作的强大工具
**Selenium** 是一款用于自动化Web应用测试和模拟用户行为的工具,支持多种浏览器和编程语言。安装包括安装Selenium库和对应浏览器的WebDriver。基本用法包括导入库、启动浏览器、查找与操作页面元素、等待元素加载及关闭浏览器。在实际项目中,Selenium常用于Web测试、爬虫、自动化表单填写等,优点是跨平台、模拟真实用户行为,但性能较低且依赖浏览器。
24 9
|
6天前
|
Java 测试技术 Apache
《手把手教你》系列技巧篇(六十八)-java+ selenium自动化测试 - 读写excel文件 - 下篇(详细教程)
【6月更文挑战第9天】本文介绍了如何使用Java处理Excel文件中的不同数据类型,包括日期、数字、布尔值和标签(常规字符串)。文章提供了两个示例,分别使用JXL库和Apache POI库来读取Excel文件。
9 1
|
7天前
|
XML Java 测试技术
《手把手教你》系列技巧篇(六十七)-java+ selenium自动化测试 - 读写excel文件 - 中篇(详细教程)
【6月更文挑战第8天】本文介绍了Java中操作Excel的工具,包括POI和JXL。POI支持处理Office 2003及以下的OLE2格式(.xls)和2007以上的OOXML格式(.xlsx)。而JXL只能处理2003版本的Excel文件。文章详细讲解了如何下载和使用JXL库,并给出了一个简单的Java代码示例,展示如何读取2003版Excel文件中的数据。在实际项目中,由于JXL对新版本Excel的支持限制,通常推荐使用POI。
23 5
|
8天前
|
Java 测试技术 Apache
《手把手教你》系列技巧篇(六十六)-java+ selenium自动化测试 - 读写excel文件 - 上篇(详细教程)
【6月更文挑战第7天】本文介绍了在Java自动化测试中如何操作Excel数据。文章提到了当测试数据存储在Excel文件时,可以使用Apache的POI库来读写Excel。POI提供了对OLE2(.xls)和OOXML(.xlsx)格式的支持,比JXL库功能更全面。文章还详细讲解了如何下载和添加POI库到项目中,以及准备测试用的Excel文件。最后,给出了一个简单的Java代码示例,演示如何读取Excel文件的内容。
13 1
|
9天前
|
前端开发
selenium自动化详解
selenium自动化详解

热门文章

最新文章