vue框架,input相同标签如何定位-label定位

vue,框架,input,相同,标签,如何,定位,label · 浏览次数 : 24

小编点评

**一、问题提出:** 后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:  ```html     ``` **二、问题思考过程1:** 为什么以前的版本可以定位成功,而现在的就定位不了啦? 查阅之前版本的这部分定位代码,发现原来的框架是用xpath定位,并且每个元素有自己的id做区分,所以我们可以做分别定位 **三、问题解决过程1:** 通过查阅资料,发现可以使用label定位label标签,我们看下图发现,input标签是一样的,并且有一个div和input标签平级,然后外边包着一层div,然后外边又包着一层div,然后外边也有一层div,这个div平级中有一个label标签,两者平级外还有一层div。通过发现两者包裹着的div只有label标签是不同的,根据for属性做了区分,比如for=\"cover\",和for=\"image\",我们可以从这里入手,先根据label属性定位,然后定位到他的兄弟div,然后再往里定位两层div,然后就可以定位到input标签就可以了定位代码: ```javascript //label[@for="cover"]/following-sibling::div/div/div/input ``` **四、总结1:** 遇到问题不要慌刚开始定位不到的时候,试了很多种方法,一度想放弃使用ui自动化,后来隔段时间在思考,或许就会豁然开朗,解决之后,发现很简单嘛

正文

一、问题提出:

后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:

二、问题思考过程

1.为什么以前的版本可以定位成功,而现在的就定位不了啦
查阅之前版本的这部分定位代码,发现原来的框架是用xpath定位,并且每个元素有自己的id做区分,所以我们可以做分别定位
2.改版后,使用xpath定位,为什么只能定位上传第一个图片
因为两个标签是一样的,如果使用input标签定位是做不了区分的,当定位到第一个完成后,第二个定位方式与第一个一致,还是继续会定位到第一个标签,然后操作

三、问题解决过程

1.通过查阅资料,发现可以使用label定位label标签,我们看下图发现,input标签是一样的,并且有一个div和input标签平级,然后外边包着一层div,然后外边又包着一层div,然后外边也有一层div,这个div平级中有一个label标签,两者平级外还有一层div。
通过发现两者包裹着的div只有label标签是不同的,根据for属性做了区分,比如for="cover",和for="image",我们可以从这里入手,先根据label属性定位,然后定位到他的兄弟div,然后再往里定位两层div,然后就可以定位到input标签就可以了
定位代码:
//label[@for="cover"]/following-sibling::div/div/div/input
定位语法:
获取兄弟元素标签名:following-sibling::兄弟元素标签名
获取父级元素标签名:parent::父元素标签名

四、总结

1.遇到问题不要慌
刚开始定位不到的时候,试了很多种方法,一度想放弃使用ui自动化,后来隔段时间在思考,或许就会豁然开朗,解决之后,发现很简单嘛
2.善于使用搜索
当不知道怎么解决后,使用搜索之后,看了很多解决方式都解决不了自己的问题
我们如果输入"web自动化元素定位不到",会发现乱七八糟的答案,根本找不到我们想要的,所以我们需要优化下问题:"vue 相同标签 定位不到 ",发现第一个就是我们想要的答案
 
 
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=odd0a3xo3606

与vue框架,input相同标签如何定位-label定位相似的内容:

vue框架,input相同标签如何定位-label定位

一、问题提出: 后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图: 二、问题思考过程 1.为什么以前的版本可以定位成功,而现在的就定位不了啦 查阅之前版本的这部分定位代码,发现原来的框

Vue 框架下提升加载速度的一些实战经验分享

现在前端的框架有很多,甚至两只手已经数不过来,当然也完全没必要全部都学,还是应该深入的学习一两个被广泛使用的就好。其实我和大部分同学的想法一致,认为最值得我们深究的还是主流的 Vue 和 React。我们通过深入的学习了解这些框架的思维,也让自己使用这些框架能够更加得心应手。

Vue框架快速上手

Vue基础 vue指令 内容绑定 v-text 设置标签的内容一般通过双大括号的表达式{{ }}去替换内容 {{ hello }} v-html 与v-text类似区别在于html中的结构会被解析为标签设置元素的innerHTML,v-text只会解析文本 事件绑定 v-on 可以简写为@,绑定的方

前端如何用一个函数防止用户使用F12看控制台(超简单一学就会)

#### 先分享一下自己的搭的免费的chatGPT网站 https://www.hangyejingling.cn/ ## 正文 #### 1、如果是VUE框架开发,在生产环境中。在入口文件APP.vue中添加如下代码,其他框架同理 ```javascript if (process.env.mod

BS系统的登录鉴权流程演变

登录鉴权方式是随着前后端架构的变化而变化的。早期的系统是前后端不分离的。通常前端是freemaker/velocity/jsp+html。后端是SSH或SSM。后来Vue等前端框架的兴起,使得前后端得以分离。前端是Vue+nodejs,后端是SSM或SpirngBoot。SpringBoot大大简化...

京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q

一、前言:我全都要 面对当今前端界两座大山一样的主流框架,React和Vue,相信很多小伙伴都或多或少都产生过这样疑问,而这样的问题也往往很让人头疼和犹豫不决: 业务场景中是不是团队用什么我就用什么? 如果选择了其中一个使用,那为什么不用另一个? 这两个框架各有什么优点和无法解决的问题? 最新版本的

基于Admin.NET框架的前端的一些改进和代码生成处理(1)

Admin.NET 是一套基于Furion/.NET 6实现的通用管理平台,模块插件式开发,框架包含了常规的权限管理、字典等管理模块,以及一些Vue3的Demo案例,框架前后端分离。后端基于基于Furion/.NET 6实现,底层集成SqlSugar;前端则是采用Vue-Next-Admin的前端框架,整体是一套非常不错的框架。本人比较喜欢研究一些技术框架,最近对该框架进行了一些研究分析,结合我自

基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

在之前的SqlSugar系列随笔中,介绍了很多我们关于SqlSugar的开发框架的内容,SqlSugar的开发框架的目的是多前端应用场景,因此其中会包含各种不同的前端应用,前面介绍了基于DevExpress的Winform的前端应用,以及基于Vue3+TypeScript+ElementPlus的BS前端应用,本篇随笔继续介绍SqlSugar的开发框架的另一个前端应用,基于UniApp+Vue+T

基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件查询处理类似的处理过程,因此本篇随笔探讨两种不同查询在前端界面上的展示效果,以及后端基于.netCore的Web API端的基类进行的统一封装处理。

2023年Vue开发中的8个最佳工具

前言 Vue.js,一款当今非常流行的基于JavaScript的开源框架,旨在构建动态的可交互应用。 Vue.js以其直观的语法和灵活的架构而广受全球开发者的欢迎和赞誉。随着时间的推移,Vue不断进化,为开发者提供更多优秀的工具,以提高他们的效率,构建卓越的应用。 在本文中,小编将为大家介绍八款适用