在做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. Day3：学习Java的第一步：Hello World!

    HelloWorld 新建一个文件夹存放代码 新建一个JAVA文件 文件后缀名为.java Hello.java 打开文件扩展名,即可查看到文件类型 运行文件:右键Hello.java文件用notep ...

  2. Terminal(oh-my-zsh) 美化

    如果你使用Mac进行开发,那么Terminal.app应该是你使用非常频繁的app了.初体验Terminal时你可能觉得单调乏味,阅读密密麻麻的内容也很费劲.但是如果你跟着我一起配置它,就会发现你平时 ...

  3. vscode代码部署

    前言 在本地环境中开发代码时,经常需要将代码上传到服务器环境中,在环境中构建并调试程序.如果手动使用scp.ftp等文件传输程序将代码上传至环境,一次两次还好,反复多次操作则有些繁琐. 为了方便进行本 ...

  4. npm卸载"Tracker idealTree already exists"

    问题 使用npm卸载babel插件的时候执行命令npm uninstall babel...出现如下报错 npm ERR! Tracker "idealTree" already ...

  5. WeetCode3 暴力递归->记忆化搜索->动态规划

    笔者这里总结的是一种套路,这种套路笔者最先是从左程云的b站视频学习到的 本文进行简单总结 系列文章目录和关于我 一丶动态规划的思想 使用dp数组记录之前状态计算的最佳结果,找出当前状态和之前状态的关系 ...

  6. 【Spring系列】- Spring循环依赖

    Spring循环依赖 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Spring循 ...

  7. C#不提升自己程序的权限实现操作注册表

    1. 绪论 当我们编写了自己的C#程序,有程序自定义的文件类型时,通常希望它满足以下需求: 双击自定义文件打开自定义程序 自定义文件有着自己的图标 此时,在网上检索可以发现,大多数回答是使用Micro ...

  8. MongoDB 索引类型介绍

    转载请注明出处: 目录 1.单字段索引 2.复合索引 3.多key索引 4.其他类型索引 5.索引额外属性 6.MongoDB 索引相关的常用sql命令 MongoDB 支持多种类型的索引,包括单字段 ...

  9. java中继承的内存分析

    本文主要讲述java中继承的内存分析. 示例1,代码如下: public class EncapsulationTest { public static void main(String[] args ...

  10. 第四篇:前端之BOM与DOM

    前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...