在做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. MyBatis笔记03------XXXMapper.xml文件解析

    SQL映射文件的配置解析 当我们写好mapper(dao)层接口时,然后在对应的XXXMapper.xml文件中写业务逻辑对应的SQL映射语句,通过这个文件中可以实现CRU操作,那么下面说明如何编写这 ...

  2. hwlog--limiter.go

    // Copyright(C) 2021. Huawei Technologies Co.,Ltd. All rights reserved.// Package limiter implement ...

  3. Bugku md5 collision

    题目名字都叫md5碰撞,那就肯定和md5碰撞脱不了关系了 打开题目,首先让我们输入a 行吧,随意post一个a=1进去 结果提示flase 这里应该是有特殊值,我们找找看 查看源码,抓包 没找到 试试 ...

  4. (GDB) GDB调试技巧，调试命令

    调试时查看依赖DSO pidof tvm_rpc_server cat /proc/<pid_of_tvm_rpc_server>/maps 子进程调试 1.vscode -- launc ...

  5. linux deb系 apache 配置解析php文件

    安装apache服务器和php服务 sudo apt-get install apache2 php 然后其实一般来说什么也不用安装了就可以成功解析php文件了 制作一个测试文件,test.php放到 ...

  6. Excel二维码图片生成器

    Excel二维码图片生成器 它可以将excel文件的数据,每行数据生成一张二维码图片,并保存到电脑.软件无需安装,解压后即可直接使用,无需联网,操作简便快捷. 软件下载地址:点此下载 步骤1:导入事先 ...

  7. MyBatis03:连接池及事务控制、xml动态SQL语句、多表操作

    今日内容: mybatis中的连接池.事务控制[原理了解,应用会用] mybatis中连接池的使用及分析 mybatis中事务控制的分析 mybatis中基于xml配置的动态SQL语句使用[会用即可] ...

  8. Node.js躬行记（25）——Web自动化测试

    网页在提测流转给 QA 后,如何能帮他们更有效而准确的完成测试,是我一直在思考的一个问题. QA 他们会对网页编写测试用例,在提测之前会让我们将优先级最高的用例跑通,这在一定程度上能够避免频繁的返工, ...

  9. MSTN CE和MSTN SDK安装经验及技巧

    MSTN CE和MSTN SDK安装经验及技巧 本文介绍了MSTN CE及MSTN CE SDK安装的流程以及在安装时可能会遇到的问题 一.MSTN CE安装 1.MSTN CE即Microstati ...

  10. MySQL的安装与配置，图形化软件安装，以及IDEA上的配置操作

    1. MySQL安装详细教程 注意:本次安装例为随笔发布时最新的8.0.31版本教程,由于您所希望安装的版本不同可能会导致一些问题,请谅解. 进入官网下载界面 https://www.mysql.co ...