在做selenium web自动化的时候，有时通过selenium定位不到，或无法操作元素，这个时候就需要通过js来

定位/操作元素，然后通过selenium自带的execute_script()方法去执行js语句。下面介绍几种js的定位方法。

一.ID

id的值都是唯一的，所以当存在id字段时可优先使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        alert(document.getElementById("button_id").style.display='block')  //id定位

    }

</script>

<body>

<button style="display: none" id="button_id">隐藏</button>

<button onclick="a()">点击</button>

</body>

</html>

二.NAME

name值定位元素的话返回的为list，用下标取值即可。如下通过name定位并执行点击事件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        document.getElementsByName("button_name")[0].click()  //name定位

    }

    function b(){

        alert("word")

    }

</script>

<body>

<span name="button_name" onclick="b()">隐藏</span>

<button onclick="a()">点击</button>

</body>

</html>

三.TAG_NAME

tag_name对应的便是标签名称，返回的也是list集合。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        document.getElementsByTagName("input")[0].value="请输入内容"  //输入内容

    }

</script>

<body>

<input>

<button onclick="a()">点击</button>

</body>

</html>

四.CLASS_NAME

class_name对应的值是class，返回list集合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        alert(document.getElementsByClassName("h2_class")[0].style.backgroundImage)  //classname定位

    }

</script>

<body>

<h2 class="h2_class" style="display: block; background-image: url('https://static.geetest.com/captcha_v3/batch/v3/25173/2023-01-3')"></h2>

<button onclick="a()">点击</button>

</body>

</html>

五.CSS

css定位有两个方法，下面一一演示看下。

1.querySelectorAll()：返回所有匹配的结果，list集合。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        document.querySelectorAll("input[name='2']")[1].value="123"  //返回全部

    }

</script>

<body>

<div class="liming">

    <div>

        <input name="2">

    </div>

    <div>

        <input name="2">

    </div>

</div>

<button onclick="a()">点击</button>

</body>

</html>

2.querySelector()：不管匹配结果有多少个，只返回第一个。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        alert(document.querySelector("div[class='liming']>div:nth-child(2)>input").getAttribute("name"))

    }

</script>

<body>

<div class="liming">

    <div>

        <input name="1">

    </div>

    <div>

        <input name="2">

    </div>

</div>

<button onclick="a()">点击</button>

</body>

</html>
文章来源：https://www.cnblogs.com/lihongtaoya/ ，请勿转载

聊一聊js中元素定位的方法的更多相关文章

  1. 【基础】selenium中元素定位的常用方法（三）

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  2. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  3. 【测试方法】Web测试中bug定位基本方法

    知识总结:Web测试中bug定位基本方法 涉及知识点:测试方法 在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出 ...

  4. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  5. selenium8中元素定位方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  6. 聊一聊js中的null、undefined与NaN

    零.寒暄 翻翻自己的博客,上一篇竟然是六月26号的,说好的更新呢?回顾刚刚过去的这个七月,整天都是公司的入职培训加上自己的小论文,每天奋战到凌晨1点多,这是要挂的节奏啊!但是不论怎么说,自己的时间管理 ...

  7. js中push和join方法使用介绍

    push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用.代码: <script type="text/javascript"& ...

  8. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  9. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

  10. Webdriver元素定位的方法

    webdriver提供了8种元素定位方法: 1.id 2.name 3.tag name 4.class name 5.link text 6.partial link text 7.xpath 8. ...

随机推荐

  1. Android 跨进程渲染

    本项目用于验证 Android 是否能够跨进程渲染 View,最终实现了在子进程创建WebView,主进程显示的功能. 一.跨进程渲染的意义 有一些组件比如 WebView 如果在主进程初始化,会大大 ...

  2. Codeforces Round #805 (Div. 3)G2. Passable Paths

    题目大意: 给出一个无向无环连通图(树),n个点n-1条边,m次查询,每次询问给出一个集合,问集合里的树是否都在同一条链上(即能否不重复的走一条边而遍历整个点集) 思路:通过求lca,若有三个点x,y ...

  3. SpringCloudAlibaba 微服务组件 Nacos 之配置中心源码深度解析

    大家好,这篇文章跟大家聊下 SpringCloudAlibaba 中的微服务组件 Nacos.Nacos 既能做注册中心,又能做配置中心,这篇文章主要来聊下做配置中心时 client 端的一些设计,主 ...

  4. RocketMQ 在物流行业的应用与运维

    本文作者:丁威 - 中通快递资深架构师,<RocketMQ技术内幕>作者,Apache RocketMQ社区首席布道师,公众号「中间件兴趣圈」维护者. 01 物流行业的业务特点 物流行业有 ...

  5. K8Snode节点管理集群资源方法

    1.1 方法1 1.将master的admin.conf 文件拷贝到 node节点 [root@k8s-m ~]#scp /etc/kubernetes/admin.conf root@192.168 ...

  6. php统一的gocheck方法

    这半个月断断续续在学习用PHP的ThinkPHP框架开发后端API.现在总结记录一下开发一个接口需要做好哪些事,以此提高开发效率,并且也有不错的扩展性. 一.流程概要 基本是这么一个流程,略过环境搭建 ...

  7. java集合类 collection接口，List集合

    java集合类:collection接口,List集合 在java.util包中提供了一些集合类,集合类又被称为容器,常用的有List集合,Set集合,Map集合.下面将介绍collection接口和 ...

  8. RNN的PyTorch实现

    官方实现 PyTorch已经实现了一个RNN类,就在torch.nn工具包中,通过torch.nn.RNN调用. 使用步骤: 实例化类: 将输入层向量和隐藏层向量初始状态值传给实例化后的对象,获得RN ...

  9. 【实习项目介绍】XXXXX大数据平台介绍

    一.技术架构 1.整体介绍及架构 (1)概述 Odeon大数据平台以全图形化Web操作的形式为用户提供一站式的大数据能力:包括数据采集.任务编排.调度及处理.数据展现(BI)等:同时提供完善的权限管理 ...

  10. 【CDH数仓】Day01：概念、环境搭建、CDH数仓搭建、用户行为数仓搭建

    一.数仓之Cloudera Manager 1.CM简介 拥有集群自动化安装.中心化管理.集群监控.报警功能的一个工具 快速安装,快速运维,提高集群的效率 CM架构 2.阿里云服务器准备 注册账号 购 ...