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



相关文章
|
16天前
|
安全 Java 编译器
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
|
16天前
|
Java 开发工具 Android开发
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
|
16天前
|
Java 编译器 Android开发
Kotlin教程笔记(28) -Kotlin 与 Java 混编
Kotlin教程笔记(28) -Kotlin 与 Java 混编
|
25天前
|
JSON Java Maven
实现Java Spring Boot FCM推送教程
本指南介绍了如何在Spring Boot项目中集成Firebase云消息服务(FCM),包括创建项目、添加依赖、配置服务账户密钥、编写推送服务类以及发送消息等步骤,帮助开发者快速实现推送通知功能。
61 2
|
16天前
|
Web App开发 设计模式 JavaScript
自动化测试之美:如何利用Selenium实现Web应用的高效测试
【10月更文挑战第29天】在软件开发的世界中,测试是确保产品质量的关键步骤。本文将带你了解如何使用Selenium这一强大的自动化测试工具,提高Web应用测试的效率和准确性。通过实际案例,我们将探索Selenium的核心功能及其在现代软件开发中的应用,旨在帮助读者掌握自动化测试的精髓,从而提升软件测试工作的整体效能。
13 0
|
1月前
|
Java 测试技术 C#
自动化测试之美:从Selenium到Appium
【10月更文挑战第3天】在软件开发的海洋中,自动化测试如同一艘航船,引领着质量保证的方向。本文将带你领略自动化测试的魅力,从Web端的Selenium到移动端的Appium,我们将一探究竟,看看这些工具如何帮助我们高效地进行软件测试。你将了解到,自动化测试不仅仅是技术的展示,更是一种提升开发效率和产品质量的智慧选择。让我们一起启航,探索自动化测试的世界!
|
1月前
|
Web App开发 IDE 测试技术
自动化测试的利器:Selenium 框架深度解析
【10月更文挑战第2天】在软件开发的海洋中,自动化测试犹如一艘救生艇,让质量保证的过程更加高效与精准。本文将深入探索Selenium这一强大的自动化测试框架,从其架构到实际应用,带领读者领略自动化测试的魅力和力量。通过直观的示例和清晰的步骤,我们将一起学习如何利用Selenium来提升软件测试的效率和覆盖率。
|
1月前
|
测试技术 数据安全/隐私保护 开发者
自动化测试的奥秘:如何用Selenium和Python提升软件质量
【9月更文挑战第35天】在软件开发的海洋中,自动化测试是那艘能引领我们穿越波涛的帆船。本文将揭开自动化测试的神秘面纱,以Selenium和Python为工具,展示如何构建一个简单而强大的自动化测试框架。我们将从基础出发,逐步深入到高级应用,让读者能够理解并实现自动化测试脚本,从而提升软件的质量与可靠性。
|
2月前
|
Web App开发 JavaScript Java
自动化测试的利剑:Selenium WebDriver入门与实践
【9月更文挑战第21天】在软件开发的海洋中,自动化测试犹如一艘船,帮助开发者们快速航行至质量保证的彼岸。本文将作为你的罗盘,指引你了解和掌握Selenium WebDriver这一强大的自动化测试工具。通过深入浅出的方式,我们将探索Selenium WebDriver的基本概念、安装过程以及编写简单测试脚本的方法。无论你是刚接触自动化测试的新手,还是希望提升测试技能的开发者,这篇文章都将为你提供有价值的指导。
|
2月前
|
Web App开发 测试技术 持续交付
自动化测试的利器:Selenium与Python的完美结合
【9月更文挑战第21天】在软件开发的世界里,测试是确保产品质量的关键步骤。随着敏捷开发和持续集成的流行,自动化测试工具变得尤为重要。本文将介绍如何使用Selenium和Python进行高效的自动化测试,不仅提供代码示例,还深入探讨如何设计测试用例、选择正确的测试框架、以及如何整合到CI/CD流程中。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧。
46 3