在做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. 使用GitHub Actions实现自动化部署

    前言 大家在工作中想必都是通过自动化部署来进行前端项目的部署的,也就是我们在开发完某个需求时,我们只需要将代码推送到某个分支,然后就能自动完成部署,我们一般不用关心项目是如何build以及如何depl ...

  2. 如何重启kafka

    修改配置文件 ps -ef |grep kafka kill (kafka进程号) 启动kafka [root@lecode-dev-001 bin]# ./kafka-server-start.sh ...

  3. 随笔——安卓手机调试微信网页,x5错误页

    如果打开debugx5.qq.com提示您使用的不是x5内核 那么先打开debugmm.qq.com/?forcex5=true 再打开http://debugtbs.qq.com 将进入下面这个页面 ...

  4. Bigkey问题的解决思路与方式探索

    作者:vivo 互联网数据库团队- Du Ting 在Redis运维过程中,由于Bigkey 的存在,会影响业务程序的响应速度,严重的还会造成可用性损失,DBA也一直和业务开发方强调 Bigkey 的 ...

  5. 关于linux配置java环境变量问题

    前言 这几天一直在学java, 所以配置环境变量是必不可少的步骤,然后我简单的研究了一下,当然也只是皮毛而已 环境变量的就近原则 我电脑下载了oracle公司的jdk(手动配置环境变量), 和直接源里 ...

  6. Excel2010工作簿被锁定，无法复制或者新增加sheet表格。

    Sub 工作簿密码破解() ActiveWorkbook.Sheets.Copy For Each sh In ActiveWorkbook.Sheets sh.Visible = True Next ...

  7. 视频超分之BasicVSR-阅读笔记

    1.介绍 对于视频超分提出了很多方法,EDVR中采用了多尺度可变形对齐模块和多个注意层进行对齐和定位并且从不同的帧聚合特征,在RBPN中,多个投影模块用于顺序聚合多个帧中的特征.这样的设计是有效的,但 ...

  8. 【Java SE进阶】Day08 File类、递归

    一.File类 1.概述java.io.File 文件和路径的抽象表示 用于文件和目录的创建.查找和删除等 分类 file--文件 directory--文件夹/目录 path--路径 2.静态成员变 ...

  9. Vue GET xxxx/sockjs-node/info?t=1573626343344 net::ERR_CONNECTION

    看了很多资料,都说是关闭热更新要么注释掉代码完美解决.我寻思这不就没有热更新功能了吗. 不妨试试检查下项目端口是否一致,然后查看下请求地址是否是本地地址.有可能是因为被shadowsocket代理了 ...

  10. day35-JSON&Ajax03

    JSON&Ajax03 4.jQuery的Ajax请求 原生Ajax请求问题分析: 编写原生的Ajax要写很多的代码,还要考虑浏览器兼容问题,使用不方便 在实际工作中,一般使用JavaScri ...