UI自动化需要了解的前端知识:javascript操作html dom(2)

153 阅读2分钟

接着上一篇

上一篇链接

UI自动化需要了解的前端知识:javascript操作html dom(1)

上一篇讲了,我们在做自动化过程中,可以用js 来定位到元素来修改元素的属性,最常见的就是使其可见可操作,今天我们接着延申一下,有些在自动化过程中估计用不到,了解一下也是好的

添加、删除元素

这一部分,在自动化测试过程中不常用,毕竟对于被测系统,对于测试人员来说,不需要对页面上的各种控件和元素进行添加和删除,但是如果你要模拟一个被测系统,自己写个页面,添加删除控件,可以试试看

方法描述
document.createElement(element)创建 HTML 元素
document.removeChild(element)删除 HTML 元素
document.appendChild(element)添加 HTML 元素
document.replaceChild(element)替换 HTML 元素
document.write(text)写入 HTML 输出流

这一块就不详细举例说明了

自动化中常用遇到的事件

元素的点击事件(按钮,输入框,弹窗,下拉框,链接等可以点击的元素)

RF脚本例子

execute javascript ocument.evaluate('${locator}', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0).click()

浏览器中的实例 定位到这个链接,并点击,看页面是否跳转 image.png 页面成功进行了跳转 image.png

页面内部滚动条元素

这个跟页面窗口的滚动条不一样,页面窗口滚动条的操作方法我们用的是window对象的scrollTo()方法,例如 window.scrollTo(0,1000)

RF脚本例子,定位到页面滚动条元素,然后让其滚动到合适的位置

execute javascript    document.getElementsByClassName('${ele_class_locator}')[0].scrollTop=${scroll_number}

鼠标事件

例如移动到元素上方,会显示出一些提示信息,其他的鼠标事件

image.png

还有键盘事件

这个用的也不是很多,后面用到再来补充,这个python selenium库里已经封装好了press key方法,模拟键盘的回车,换行等 例如RF中 Examples:

Press Keystext_fieldAAAAA# Sends string "AAAAA" to element.
Press KeysNoneBBBBB# Sends string "BBBBB" to currently active browser.
Press Keystext_fieldE+N+D# Sends string "END" to element.
Press Keystext_fieldXXXYY# Sends strings "XXX" and "YY" to element.
Press Keystext_fieldXXX+YY# Same as above.
Press Keystext_fieldALT+ARROW_DOWN# Pressing "ALT" key down, then pressing ARROW_DOWN and then releasing both keys.
Press Keystext_fieldALTARROW_DOWN# Pressing "ALT" key and then pressing ARROW_DOWN.
Press Keystext_fieldCTRL+c# Pressing CTRL key down, sends string "c" and then releases CTRL key.
Press KeysbuttonRETURN# Pressing "ENTER" key to element.

其他

其他复杂的,例如写一段js代码去执行,或是去一个js文件,大部分不会遇到这种情况,最多向我前面介绍的,执行一行定位到元素然后去点击