前言

做UI自动化，需要和前端页面元素打交道，需要定位到前端元素，写出一些脚本来实现某些功能，但是有时候我们用其他方式并不能够达到理想预期，例如我用python的selenium库去定位操作一个按钮，但是总是返回定位不到等错误（排除定位不对），这时候一般直接会在python代码中直接调用js代码，通过js来操作html dom

先看RF中的一个实例

 # 因为上传文件input控件display属性是none，导致无法定位上传，先执行js,使之可见
 execute javascript    document.querySelector("${upload_file_locator}").style.display = "block"
 choose file    ${upload_file_locator}    ${file_name}

通过这个例子，我们可以看到js可以更改元素的属性

先复习一下基础知识

HTML DOM（文档对象模型）

当网页被加载的时侯，浏览器会创建页面的文档对象模型Document Object Model，这个对象的模型结构是一棵树,先看一个简单的树

实际页面的树要比这个复杂得多，例如看一个百度页面

展开

转一个专业的说法：

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
Jahttps://juejin.cn/post/7067430544891936782vaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

html dom 方法

我们可以通过浏览器的开发者工具里的console,来简单验证html dom方法

访问html 元素方法举例

document.getElementById(id)方法，使用元素的id属性来定位元素
document.getElementsByTagName(name), 使用标签名来定位元素
document.getElementsByClassName(name)，使用类名来定位元素使用以上方法的前提是id, tagname,classname属性是唯一的，如果不唯一的，可以通过xpath, css来定位
document.querySelector(css表达式）
document.evaluate('xpath表达式', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0) 关于这部分的详细，可以参考我这篇文章