UI自动化定位元素之js操作

前言

在UI自动化测试中,元素定位是一个至关重要的步骤。准确地定位到页面上的元素,是实现自动化测试的前提和保障。本文将介绍使用JavaScript进行元素定位的常见方法,并分析页面的组成,帮助读者更好地理解和应用元素定位技术。

页面组成 在进行元素定位之前,我们需要了解页面的基本组成。一个网页通常由HTML、CSS和JavaScript三部分组成。HTML负责页面的结构,CSS负责页面的样式,而JavaScript则负责页面的交互。在UI自动化测试中,我们主要关注的是HTML元素,因为这些元素是用户可以交互的对象。

使用JavaScript进行元素定位的常见方法:

// 1.getElementById:通过元素的ID来定位元素。

var element = document.getElementById("myElementId");

// 2.getElementsByClassName:通过元素的类名来定位元素。返回的是一个HTMLCollection,包含了所有匹配的元素。

var elements = document.getElementsByClassName("myClassName");

// 3.getElementsByTagName:通过元素的标签名来定位元素。返回的是一个HTMLCollection,包含了所有匹配的元素。

var elements = document.getElementsByTagName("div");

// 4.querySelector:通过CSS选择器来定位元素。返回的是匹配到的第一个元素。

var element = document.querySelector(".myClassName");

// 5.querySelectorAll:通过CSS选择器来定位元素。返回的是一个NodeList,包含了所有匹配的元素。

var elements = document.querySelectorAll(".myClassName");

// 6.getAttribute:通过元素的特定属性来定位元素。比如,可以通过href属性来定位链接元素。

var element = document.querySelector("[href='http://example.com']");

// 7.getElementsByName:通过元素的name属性来定位元素。返回的是一个NodeList,包含了所有匹配的元素。

var elements = document.getElementsByName("myInputName");

// 8.Xpath:通过XPath表达式来定位元素。XPath是一种在XML文档中查找信息的语言,也适用于HTML。
 

var element = document.evaluate("//div[@id='myElementId']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

// 9.CSS选择器:通过CSS选择器来定位元素,与querySelector和querySelectorAll配合使用。例如,.className选择类名为"className"的所有元素,#id选择ID为"id"的元素等。


// 10.链接文本:通过链接文本来定位元素,这在web页面的测试中很有用。比如,你想找到包含特定文本的链接。

var element = document.querySelector("a:contains('My Link Text')");

// 部分链接文本:与上面的方法类似,但是它查找包含部分指定文本的链接。

var element = document.querySelector("a:contains-part('My Link Text')");

js操作
// 设置元素不可见

element = document.getElementsByClassName('el-input__inner')[0];
element.style.display = 'none'; 


// 给文本框赋值

var textbox = document.getElementsByClassName('el-input__inner')[0];
textbox.value = "这是一个文本框哎!";


//设置背景色

var inputColor = document.getElementsByClassName('el-input__inner')[0];
inputColor.style.backgroundColor = 'red';


//设置字体颜色
 

var inputColor = document.getElementsByClassName('el-input__inner')[0];
inputColor.style.color = 'red';


// 设置不可点击状态

document.getElementsByClassName('el-input__inner')[0].disabled = true;

// js滑动条:在JavaScript中,你可以使用window.scrollTo()函数来控制滚动条的位置。这个函数接受两个参数,一个是x坐标(水平位置),一个是y坐标(垂直位置)
    //滚动条滚动到页面的顶部
   

 window.scrollTo(0, 0);


    //滚动条滚动到页面的底部、(拖动一半位置)
   

window.scrollTo(0, document.body.scrollHeight);window.scrollTo(0, document.body.scrollHeight/2);


    //页面中任意位置进行滚动,你可以使用element.scrollIntoView()方法。这个方法接受一个参数,表示滚动到的位置。例如,如果你想让一个元素(例如id为"myElement"的元素)滚动到视口中,你可以使用以下代码:
   

document.getElementById("myElement").scrollIntoView();


    //元素内部进行滚动,你可以使用element.scrollTop和element.scrollLeft属性。例如,如果你想让一个元素(例如id为"myElement"的元素)向上滚动100px,你可以使用以下代码:
   

 var element = document.getElementById("myElement");element.scrollTop += 100;

以上方法可以帮助我们在JavaScript中定位到页面上的元素。需要注意的是,在实际应用中,可能需要结合多种方法进行定位,以确保准确性和稳定性。

总结: 本文介绍了使用JavaScript进行UI自动化测试元素定位的常见方法,包括通过id、name、class和标签名进行定位。了解这些方法并熟练掌握它们的使用,将有助于我们在UI自动化测试中更加高效地进行元素定位,提高测试效率和准确性。

    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Educational Codeforces Round 159 (Rated for Div. 2)

Educational Codeforces Round 159 (Rated for Div. 2) A 贪心&#xff0c;看1和3的位置即可 #include <bits/stdc.h>using namespace std;void solve() {string s;cin >> s;int a s.find(1) , b s.find(3);if(a > b)cout << "31\n";else …

MongoDB系列之一文总结索引

概述 分类 索引的分类&#xff1a; 按照索引包含的字段数量&#xff0c;可分为单键索引&#xff08;单字段索引&#xff09;和组合索引&#xff08;联合索引、复合索引&#xff09;按照索引字段的类型&#xff0c;可以分为主键索引和非主键索引按照索引节点与物理记录的对应…

NQA网络质量分析

概念 网络质量分析是设备上集成网络测试功能,不仅可以实现对网络运行情况的准确测试,还可以输出统计信息,有效的节约成本。 NQA可以检测网络上运行的各种协议的性能,使运营商能够实时采集到各种网络运行指标。 例如:HTTP的总时延、TCP连接时延、DNS解析时延、文件传输速…

面试springcloud知识点

SpringCloud是一系列框架的有序集合&#xff0c;它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用Spring Boot的开发风格做到一键启动和部署。Spring Cl…

行测-判断:2.类比推理

行测-判断&#xff1a;2.类比推理 给出一组相关的词&#xff0c;要求通过观察分析&#xff0c;在备选答案中找出一组与之在逻辑关系上最为贴近或相似的词。 1. 语义关系★★ 1.1 近义关系&#xff0c;反义关系 C&#xff0c;反义词 B&#xff0c;BD 都是近义词&#xff0c;考…

如何用Python常用魔术方法阅读源码?13组代码轻松了解!

在看 python 源码的过程中我们会经常看到一些特殊方法&#xff0c;也就是双下划线方法。其实双下划线方法是特殊方法&#xff0c;是由 python 解释器提供的具有特殊意义的方法&#xff0c;主要是 python 源码程序员使用的&#xff0c;我们在开发中尽量不要使用双下方法&#xf…

Element中的el-input-number+SpringBoot+mysql

1、编写模板 <el-form ref"form" label-width"100px"><el-form-item label"商品id&#xff1a;"><el-input v-model"id" disabled></el-input></el-form-item><el-form-item label"商品名称&a…

java抽象工厂实战与总结

文章目录 一、工厂模式&#xff08;三种&#xff09;1.简单工厂模式1.1 概念&#xff1a;1.2 使用场景&#xff1a;1.3 模型图解&#xff1a;1.4 伪代码&#xff1a; 2.工厂方法模式2.1 概念&#xff1a;2.2 使用场景&#xff1a;2.3 模型图解&#xff1a;2.4 伪代码 3.抽象工厂…

用户反映在浏览器中使用AI工具 Copilot 遇到严重卡顿问题,微软官方给出初步解释

近日&#xff0c;多位用户反馈在使用Edge和Chrome浏览器中的Copilot时出现卡顿问题&#xff0c;甚至需要重启浏览器才能解决。对此&#xff0c;微软广告和网络服务部门CEO米哈伊尔帕拉欣表示&#xff0c;问题可能与Edge浏览器的“效率模式”有关。 微软中国官方网址链接&#x…

黑马——Java学生管理系统

一、学生管理系统 学生管理系统 需求&#xff1a; 采取控制台的方式去书写学生管理系统。 loop:while(true){ for(){ break loop;//给while循环取名loop&#xff0c;break loop;可以跳出while循环 } } 或者使用System.exit(0);停止虚拟机运行&#xff0c;相当于让所有代码停…

【表情识别阅读笔记】Towards Semi-Supervised Deep FER with An Adaptive Confidence Margin

论文名&#xff1a; Towards Semi-Supervised Deep Facial Expression Recognition with An Adaptive Confidence Margin 论文来源&#xff1a; CVPR 发表时间&#xff1a; 2022-04 研究背景&#xff1a; 对大量图片或视频进行手工标注表情是一件极其繁琐的事情&#xff0c;因此…

NumPy基础之array创建ndarray多维数组

1 NumPy基础之array创建ndarray多维数组 NumPy(Numerical Python)是一个python库&#xff0c;提供多维数组对象及其派生对象&#xff0c;以及用于数组快速操作的各种API。它运行速度快&#xff0c;用于数值计算&#xff0c;是python中科学计算的基础包。 1.1 安装numpy D:\p…

Python 自动化办公:一键批量生成 PPT

Stata and Python 数据分析 一、导读 在实际工作中&#xff0c;经常需要批量处理Office文件&#xff0c;比如需要制作一个几十页的PPT进行产品介绍时&#xff0c;一页一页地制作不仅麻烦而且格式可能不统一。那么有什么办法可以一键生成PPT呢&#xff1f;Python提供的pptx 包…

05章【面向对象(下)】

文章目录 继承继承的基本概念继承的限制继承小结子类的实例化过程方法的重写super关键字继承的应用示例final关键字 抽象类接口多态性instanceof关键字抽象类和接口的应用抽象类应用—模板方法模式接口应用—策略模式 Object类模式简单工厂模式静态代理模式适配器模式 内部类数…

策略模式【结合Spring框架实践】

Hello!~大家好啊,很高兴我们又见面了,今天我们一起学习设计模式–【策略模式】 初次对此模式不懂的,或者想偷懒的,我强烈建议大家跟着我的一起把概念和代码一起敲一遍!~为啥子??因为我就是这样学会的,哈哈哈! 1.首先我们看下此模式的整体UML图 selector:选择器又叫做上下文co…

Netty篇章(1)—— 核心原理介绍

终于进入到Netty框架的环节了&#xff0c;前面介绍了大量的Java-NIO的内容&#xff0c;核心的内容Selector、Channel、Buffer、Reactor掌握了&#xff0c;那么学起来Netty也是水到渠成的事情。如果没有掌握前面的内容那么学Netty会非常吃力&#xff0c;下面讲解Netty核心原理与…

关于 LLM,你了解多少?

LLM定义 大语言模型&#xff08;LLM&#xff09;是一种基于大量文本数据训练的深度学习模型。它的主要功能是生成自然语言文本或理解语言文本的含义。这些模型可以处理多种自然语言任务&#xff0c;如文本分类、问答、对话等&#xff0c;是通向人工智能的一条重要途径。 LLM发…

Vue3当中通过script和defineOptions两种方式指定组件的name

在vue2当中我们可以通过name属性来指定组件的名称&#xff0c;这个name会显示在vue调试工具当中&#xff0c;方便我们进行调试&#xff1b;当我们想实现一个无限递归的菜单组件时&#xff0c;也需要用到这个name属性&#xff0c;没有name属性的组件是无法递归的。 在vue3当中&…

vue中使用锚点定位

vue中不能使用a标签来使用锚点定位&#xff0c;可以使用自带的scrollIntoView方法 1、首先获取对应的需要定位的盒子ID 2、然后添加scrollIntoView方法&#xff0c;定义效果 属性及其含义&#xff1a; block: "start",// 定义垂直方向的对齐&#xff0c;默认为 &q…

C++类的入门

C类 一&#xff1a;类的简介&#xff1a; C的类是一种用户定义的数据类型&#xff0c;用于封装数据和方法。它是面向对象编程的基本概念&#xff0c;允许程序员将数据和操作数据的方法组合在一起。类可以包含成员变量和成员函数&#xff0c;用于描述对象的属性和行为。通过类…