html dom元素定位自动化,App自动化之dom结构和元素定位方式

最新推荐文章于 2022-04-19 15:13:56 发布
最新推荐文章于 2022-04-19 15:13:56 发布
阅读量409 收藏
点赞数
文章标签： html dom元素定位自动化

1、认识DOM结构

先来看几个名词和解释：

dom: Document Object Model 文档对象模型

dom应用: 最早应用于html和js的交互。界面的结构化描述， 常见的格式为html、xml。核心元素为节点和属性

xpath: xml路径语言，用于xml 中的节点定位，XPath 可在 xml 文档中对元素和属性进行遍历

如下我们再来看一个App的dom:

6c1555302777729326ca3efa0910d9ec.png

控件的基础知识和selenium一样，appium为移动端抽象出了一个控件模型，称为dom结构；会把所有的控件都理解为xml文件，在xml文件里，每个控件都有自己的类型和属性；

既然有了类型和属性，自然就可以根据这些来定位元素，又因为整个模型是xml，也就同样可以通过xpath的方法来定位各个控件的信息了，是不是似曾相识？在Web端自动化时候也介绍过相关元素定位方式，具体可参考文章：

推开Web自动化的大门到达“犯罪现象”-侦破selenium架构、环境安装及常用元素定位方法

2、控件定位

UI自动化测试的步骤三要素是：

定位

交互

断言

那么第一步便是要对元素进行定位，下面就来看看移动端如何进行元素定位

2.1 控件属性

通过uiautomatorviewer对徐诶求App首页的解析得到如下图结果：

6c1555302777729326ca3efa0910d9ec.png

通过解析结果我们可以看到元素的属性和类型有：

node

attribute

clickable

content-desc

resource-id

text

bounds

IOS和Android在控件属性和上稍微有些不同(这里先说个概括，后续单独出IOS的文章加以说明，欢迎关注)：

dom属性和节点结构类似

名字和属性的命名不同

2.2 定位方式

Appium 支持 WebDriver 定位策略的子集：

2.21 通过 “class” 查找 (例如， UI 组件的类型)-一般不推荐

这种就是通过判断控件类型来查找，例如`TextView`、`ImageView`等，

6c1555302777729326ca3efa0910d9ec.png

在实际工作中，这种定位方式几乎不用，因为一个页面中可能会有很多的TextView、ImageView等；

注： 几乎不用，那么就是有可能用?是的，有一种场景使用class方式定位很实用：

有时候我们进行某个操作后会弹出消息提示，例如点击某个按钮或下拉刷新后可能会出现类似"刷新成功"的提示语，然后几秒后消失;

6c1555302777729326ca3efa0910d9ec.png

弹出的消息很可能是Android系统自带的Toast，Toast在弹出的时候会在当前界面出现节点android.widget.Toast，随着消息的消失而消失；这个时候我们如果需要定位这个弹出消息，对其进行测试的话，就可以使用定位class方式了。

appiumdriver.findElementByClassName("android.widget.Toast");

2.22 通过 “xpath” 查找 (例如， 一个元素的路径以抽象的方式去表达，具有一定的约束)-重要

如上所述，xpath是不仅可以在移动端进行元素定位，并且是我们最常用的定位方式之一，在web端自动化我们会首推CSS定位，而在移动端定位我们会首推xpath定位，良好的xpath定位语法会给我们定位带来准确度和便利度，对速度的影响也完全会在我们的接受范围以内

如下dom结构中，一个界面上有多同类型控件,这些控件有相同的id或属性,不具备唯一性,所以无法直接进行指定控件的定位操作，这个时候就该xpath大显身手了

6c1555302777729326ca3efa0910d9ec.png

上图可以看到,所有勾选控件的结构是一样的,相对位置是固定的,而勾选控件相对它们的"哥哥"节点的TextView是不同的，这样就可以先定位至"哥哥"节点,在根据相对位置,定位到指定的控件节点

在xpath中提供了多种轴方法,其中following-sibling可实现此功能

6c1555302777729326ca3efa0910d9ec.png

如我们要定位"画好一个封闭的圆"后面跟着的第二个RelativeLayout,具体写法如下:

//下面两种写法均可实现

By.xpath("((//*[@text='画好一个封闭的圆'])[2]/following-sibling::android.widget.RelativeLayout)[2]")

By.xpath("((//*[@text='画好一个封闭的圆'])[2]/following-sibling::*[@class='android.widget.RelativeLayout'])[2]")

很多控件都是有text属性的，但是appium是不支持直接对text进行定位的，而在实际工作中，我们经常会拿text进行定位，这就要归功于xpath了，通过对xpath语法的封装，我们就可以自定义一个根据text定位元素的方法来：

6c1555302777729326ca3efa0910d9ec.png

public By ByText(String text){

return By.xpath("//*[@text='"+ text + "']");

}

appiumdriver.findElement(ByText("关注"));

另外，在第一种class定位中，也可以通过xpath的方式来实现：

By.XPath("//*[@class='android.widget.Toast']")

更多xpath介绍可参考博客：

推开Web自动化的大门到达“犯罪现象”-侦破selenium架构、环境安装及常用元素定位方法

或W3C：

https://www.w3school.com.cn/xpath/xpath_syntax.asp

2.23 通过id定位(每个元素原则上都有自己的唯一id值)-重要

学过web自动化的同学知道，在HTML中元素是有自己的id的，在移动端，元素依然有自己的id值，只不过名字叫做resource-id，如下：

6c1555302777729326ca3efa0910d9ec.png

注： 我们看到id的值很长，其实实际使用只需要取斜杠/后面的部分就可以了，如下：

By.id("statusTitle")

2.24 通过accessibilityId定位(实则就是android的content-desc)-偶尔用到

在移动端自动化中有个特殊的定位方式就是根据accessibilityId定位，在dom中表现就是属性content-desc的值，如果Android中的content-desc中写入了值，便可以通过其进行定位：

6c1555302777729326ca3efa0910d9ec.png

这里比较尴尬。。。由于研发经常偷懒不写，找了半天也没能找到例子，大家知道用法就好~

appiumdriver.findElementByAccessibilityId("AccessibilityId");

2.25 通过android uiautomator定位(相当于使用 UiAutomator Api 去递归地搜索元素(Android 专属))-高级用法

有时候我们需要对界面进行一定的操作方式后才能找到我们想要的元素，比如滑动列表进行查找等，这个时候就可以借助于android uiautomator了

这里利用模拟器中的API Demo做演示，进入APIDemo中Views，然后滑屏寻找“Popup Menu”进行点击操作

6c1555302777729326ca3efa0910d9ec.png

6c1555302777729326ca3efa0910d9ec.png

6c1555302777729326ca3efa0910d9ec.png

可以利用Android的UIAutomator进行滑屏操作，这时候需要使用AndroidDriver，另外定位元素可以使用UiScrollable：

6c1555302777729326ca3efa0910d9ec.png

在官网的uiautomator UiSelector中有用ruby写的实例，不过定位方式是一致的，可以直接借鉴至java代码中

6c1555302777729326ca3efa0910d9ec.png

这里大概定位的方法就是，先用new UiSelector().scrollable(true).instance(0)判断是否可以滑动，找到ListView，然后用scrollIntoView(new UiSelector().text(“WebView”).instance(0)滑动找到对应定位属性的元素。

java代码

driver.findElementByXPath("//*[@text='Views']").click();

((AndroidDriver)driver).

findElementByAndroidUIAutomator

("new UiScrollable(new UiSelector().scrollable(true).instance(0)).scrollIntoView(new UiSelector().text(\"Popup Menu\").instance(0))")

.click();

在实际运行中,AndroidUIAutomator偶尔有定位失败的情况,可能在定位元素是位置会产生一点偏差,这里稍加改造避免这种偶发性失败;

改造方法:滑屏寻找元素时会先滑屏至待查元素的附近,这时元素已处于页面可见范围内,对元素操作可以重新定位操作,例如点击操作可以利用Xpath的方法重新定位后再click().

By departmentName = MobileBy.AndroidUIAutomator(

"new UiScrollable(new UiSelector().scrollable(true).instance(0))." +

"scrollIntoView(new UiSelector().text(\""+ departName +"\").instance(0))");

find(departmentName);

// click(departmentName); 原来直接操作滑动查找的元素结果

click(ByText(departName));//现在利用xpath重新定位确认后再操作,成功率大大提升

运行效果演示：

6c1555302777729326ca3efa0910d9ec.png

参考文档：

appium官方说明文档：

http://appium.io/docs/en/writing-running-appium/finding-elements/

http://appium.io/docs/en/commands/element/find-elements/

发现厨房
关注
App自动化测试中的DOM结构和元素定位方式
QndCoffeescript的博客
09-23 59
在进行App自动化测试时，理解并正确使用DOM结构和元素定位方式是非常重要的。元素定位是指通过选择器或其他方式准确定位到DOM中的特定元素，以便在自动化测试中对其进行操作和验证。XPath提供了丰富的定位方式，可以根据元素的属性、层级关系、文本内容等进行定位。在测试代码中，可以通过查找标签名等于特定值的元素来定位到目标元素。CSS选择器是一种通过选择元素的属性、层级关系、类名等来定位元素的方式。以上是一些常用的DOM结构和元素定位方式，根据实际情况选择最合适的方式来定位和操作目标元素。
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 2094
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
dom-element-path:获取指定元素的唯一dom元素路径
03-14
dom-元素路径 获取指定元素的唯一dom元素路径。 安装 npm： npm install dom-element-path 纱： yarn add dom-element-path 用法 import domElementPath from 'dom-element-path' ; const body = domElementPath ( document . body ) ; console . log ( body ) ; 输出： html > body 一种常见的用例是，您在某种事件处理程序中具有事件，并且想要获取触发该事件的元素的路径： import domElementPath from 'dom-element-path' ; const onClick = event => { const clickedElementPath = domElement
[转]关于DOM元素定位属性的深入学习
diandi5157的博客
03-29 153
关于DOM元素定位属性的深入学习 Published by sansan at 2:56 pm under 前端|Front-End 以前写JS程序的时候，经常碰到了定位的问题。但每次都看到一半，找到需要的属性就了事了。 今天下了狠心，要花点时间，彻底地弄明白他。 以下内容看着有点眼熟也不用奇怪，因为是参考了多篇前辈的文章汇总而成，嘿嘿。 宽度、高度 jQuery(’#elem...
html中定位页面元素,【EASYDOM系列教程】之定位页面元素
weixin_42514540的博客
06-03 293
Element 对象提供了属性和方法实现定位页面元素功能。该对象与 Document 对象提供的属性和方法实现定位页面元素功能的区别在于，Document 对象定位的是 HTML 页面中所有指定元素，而 Element 对象定位的是指定元素内所有指定元素。定位页面元素方法目前 Document 对象提供实现定位页面元素的方法具有如下几种:getElementsByTagName()方法：通过页面元...
利用DOM Inspecter协助进行Web自动化测试
软件质量优化
02-01 5797
对于DOM查看器，Mozilla firefox中有DOM Inspector，前提是安装firefox时要把Develpoer Tools的组件选上；而在IE浏览器则找到一个IE DOM Inspector ，不过是收费的。HTML DOM（Document Object Model）是一个HTML文档的编程接口，HTML DOM定义了HTML的标准对象集合，并且定义了标准的访问和操纵HTM
html dom元素定位自动化,加快 WEB 自动化定位工具
weixin_33946999的博客
07-15 307
想法自动化中，有很大一部分时间，是用来增加和维护元素定位的工作。比如，增加一个信的页面，需要抓取页面元素的定位信息，写一个元素定位的 POJO 类。如果要元素界面变了，还需要找出那些元素定位更改失效了，需要重新编写 POJO。这是一件很麻烦的事情。基于上述问题，我想加快和优化 WEB 自动化的进程，有一个简单的想法，分享给大家。利用火狐的插件，记录元素的定位信息，将信息发送给服务端，自动生成 PO...
python做自动化如何定位动态元素_28、Selenium + Python 实现 UI 自动化测试-定位动态ID...
weixin_31482671的博客
01-29 2225
是否还记得mail.163.com这个网址的登录名定位问题，我们第一次提到他的时候，发现一个问题，就是登录框元素有个id，这个id每次会变化，当时我们只是绕开了这个问题，采取通过name定位(很幸运有个唯一name)。今天了解一下如何定位动态id。1、什么是动态id？你应该会问我这个问题？变化的id，没错。但是我们总不能定位元素的时候，每次都要刷新下页面，看看id是否变化吧？有没有什么规律可...
自动化测试-XPath元素定位
热门推荐
分享软件测试技术和学习方法
02-08 1万+
xpath 篇。 如果没有元素定位，ui 自动化测试将寸步难行。如果元素定位不精准，自动化测试就很难稳定运行。也许你经常听前辈们讲解如何提高自动化程序运行的稳定性，我得说，一个精准的元素定位表达式，是一切自动化测试程序正常执行的基础。 什么是元素定位呢？无论自动化程序想要操作网页的任何按钮、连接或者输入框，都必须先找到要操作的网页元素，这个过程就是元素定位。 现如今，我们会运用机器学习等智能化手段提高元素定位的精准性，但不是每个公司和测试员有精力研究机器学习。实际上，你只需要编写一个良好的 xpath 表达
做web自动化时，定位元素常用方法有哪些？
weixin_46635091的博客
01-04 698
本文节选自霍格沃兹测试学院内部教材 在做 Web 自动化时，最根本的就是操作页面上的元素，首先要能找到这些元素，然后才能操作这些元素。工具或代码无法像测试人员一样用肉眼来分辨页面上的元素。那么要怎么来定位到这些元素，本章会介绍各种定位元素的方法。 id Selenium 自带 id 定位，可以通过元素的 id 属性进行定位，比如下面的代码： driver.find_element_by_id('site-logo') name Selenium 自带 name 定位，可以通过元素.
HTML开发与应用：准确快速定位获取元素方法HTML DOM。
qq_42802111的博客
08-06 2662
HTML开发与应用：准确快速定位获取元素方法HTML DOM。 HTML DOM 简介： 根据ID查找元素：根据ID来获取一个元素，并且得到该元素对象 根据name属性查找元素：根据name属性来获取元素，得到符合条件的所有元素（数组） 。 根据标签名查找元素：根据标签名来获取，并且得到符合标签名的所有元素（数组）。 什么是DOM： 1.整个文档是一个文档节点。 2.每个 HTML ...
html自动识别循环列表元素,JavaScript遍历DOM元素的常见方式示例
weixin_33971453的博客
05-31 229
本文实例讲述了JavaScript遍历DOM元素的常见方式。分享给大家供大家参考，具体如下：对于元素之间的空格，IE9以及之前的版本不会返回文本节点，，其他的浏览器会返回文本节点，所以我们在使用firstChild,lastChild时会导致行为不一致。DOM中为元素新增了下面几个属性：childElementCount：返回子元素(不包括文本节点和注释)的数量；firstElementChild...
id为动态，定位DOM元素
litoujkl的专栏
12-20 789
var id = "caseid_" + caseId; jQuey('#'+id).xxx()
通过DOM方式去定位 几种查找元素的方法
mz_身边的专栏
03-06 4960
//先定义DOMDocument对象  $doc = new DOMDocument('1.0','utf-8');  $doc ->load('config.xml');  //我们定位元素是通过DOM方式去定位的？  $DOMXPath = new DOMXPath($doc);  //怎么找?其实就是定义查找规则  //1,通过元素名查找    $rule = "//pass"
html 按元素中心定位,使用三种方式定位html中的元素
weixin_39692254的博客
06-04 270
1)使用三种方式定位html中的元素a)通过ID$("#ID")b)通过标签名$("标签名")c)通过样式名$(".样式名")2)dom中，需要判段查找到的元素是否为null，而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">...
html一般用那种方式定位,使用三种方式定位html中的元素
weixin_42522817的博客
06-07 469
使用三种方式定位html中的元素发布时间：2020-06-06 14:46:00来源：51CTO阅读：687作者：知止内明1)使用三种方式定位html中的元素a)通过ID$("#ID")b)通过标签名$("标签名")c)通过样式名$(".样式名")2)dom中，需要判段查找到的元素是否为null，而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回"undefine...
锚点定位及页面滑动到指定dom
陈景夏
04-19 787
先介绍下API及参数： document.querySelector('#需要定位的ID').scrollIntoView({ behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start" inline: "nearest" // 定义水平方向的对齐， "start"
点击事件然后页面跳转到指定DOM元素的位置
weixin_30325793的博客
03-04 836
设置一个函数，执行函数滚动条自动拖动，页面跳转到指定DOM元素的位置。 实现方式很简单，首先引入animatescroll.js文件（要先引入JQuery），然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置。 为方便可以编写一个函数，传入DOM元素的ID function jumpTo(id){ $("#"+id).ani...
JavaScript操作DOM对象概图及随机点名系统
weixin_47655184的博客
07-09 253
随机点名系统（省略html文件和style属性）： //定义匿名函数，onload（页面加载）优先于其他函数执行 window.οnlοad=function () { setInterval("time()",1000);//循环调用现在时间函数（1s/次） //定义随机的数值，放入数组 var name= ["张三 ", "李四 ", "王五 ", "赵六", "田七 ", "将八 ", "国九 ", "任十 ", "朵法拉 ", "绿婆娘 ","舞法天女"]; //通过i.
python wujie-app shadow-root如何定位元素用selenium
最新发布
09-30
Wujie-App是一个针对微信小程序开发的自动化测试框架，它结合了Python语言和Selenium库来操作微信小程序页面。当你需要在Shadow DOM（阴影根DOM）中定位元素时，由于Shadow DOM隐藏了部分真实DOM结构，常规的`find_element_by_*`方法可能无法直接找到目标元素。 在Wujie-App中定位Shadow DOM下的元素通常需要利用WebDriver的特殊功能，比如`execute_script`方法。这里是一个基本的例子： ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 初始化 WebDriver，这里假设你已经设置了微信小程序的模拟环境 driver = webdriver.Remote(command_executor='your_wujie_app_driver', desired_capabilities={...}) # 等待 ShadowRoot 出现 element_to_shadow_root = driver.find_element(By.CSS_SELECTOR, 'selector_of_the_host_element') # 根据实际页面选择对应的元素 shadow_root = WebDriverWait(driver, timeout=10).until(EC.presence_of_element_located((By.XPATH, '(.//*[contains(@class, "wx-shadroot")])[1]'))) # 使用 execute_script 进入 Shadow DOM 并定位目标元素 target_xpath_in_shadow = 'descendant-or-self::element[@data-role="your_target_role"]' # 替换为实际的XPath路径 element_in_shadow = driver.execute_script('return arguments[0].shadowRoot.querySelector(arguments[1])', shadow_root, target_xpath_in_shadow) # 现在你可以对 element_in_shadow 进行进一步的操作，如点击、填写等 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值