javascript返回页面顶部_RobotFramework: 执行JavaScript语句

场景

在做web项目时，通常需要开发一些自动化用例，自动化用例执行可以设置触发条件，也可以定时执行，在每次代码发生变更的情况下，自动触发自动化用例执行，可以及时检测修改代码是否引入新的问题，提高产品的自信度。在开发web端自动化用例代码时，目前大多采用主流的selenium测试框架，selenium框架中的webdriver驱动浏览器模拟人的行为对页面进行操作，开发过程主要可以拆分为以下几个阶段：

web页面加载
定位页面元素
操作页面元素，主要包括文本框输入、鼠标移动、鼠标点击等
判断返回结果

其中最主要的就是 2、3两步，首先要定位到对应的元素，然后才能对元素进行操作。在selenium中提供了8中元素定位方式，可以通过元素ID号、标签名称、元素name属性、标签文本内容、cssselector、xpath等方式进行定位，这8中定位方式基本可以满足所有的元标签元素定位需求。

但是，在实际使用中会发现，使用如上方式进行元素操作经常会遇到如下两个问题：

代码执行较慢
代码执行稳定性不高，待操作的元素明明存在，但可能是由于窗口大小发生变化导致元素位置发生变化，甚至元素重叠的情况，导致代码报错“元素不存在”，或者“元素不在所点击的位置（点击操作有可能被另一个元素所接受）”等莫名其妙的错误，降低了自动化用例执行的稳定性。

针对这种情况，对于自动化代码中不稳定的部分，经常出错的部分，可以将这部分对网页元素进行操作的代码换成对应的JavaScript脚本，由于浏览器原生的支持JavaScript，JavaScript代码直接在浏览器内核中执行，就不会出现元素不在所点击的位置等错误，可以大大提高自动化用例执行的稳定性和执行效率。

下面总结了一些常用的JS语句, 以做参考.

常用查找元素方法

document.getElementsByClassName("classname")
document.getElementsByTagName("tagname")
document.getElementsByClassName("classname")[0].children[0]

返回某元素个数

${num}    Execute Javascript    return document.getElementsByClassName("code")[1].getElementsByTagName("tr").length

返回某元素标签

${value}    Execute Javascript    return document.getElementsByClassName("classname")[0].children[1].textContent

返回子元素个数

${num}    Execute Javascript    return document.getElementsByClassName("classname")[0].children[0].childElementCount

返回元素rgb值

return window.getComputedStyle(document.getElementsByClassName("detailOuter")[1].getElementsByTagName("tr")[${i}].children[${j}], "").color

将元素显示到页面

arguments[0].scrollIntoView();
arguments[0].scrollIntoView(true);  #注意是小写，元素顶端与窗口顶部对齐
arguments[0].scrollIntoView(false);  #注意是小写，元素低端与当前窗口底部对齐

滑动页面到顶端、低端、指定位置

window.scrollTo(0, 0)   #页面滑动到顶端
window.scrollTo(0, document.body.scrollHeight)   #页面滑动到底端
window.scrollTo(0, 1600)    #页面滑动到纵坐标1600位置

点击元素（若执行用例过程中出现元素click interrupted，元素不可点击的报错，用这个方法会很稳定）

arguments[0].click()

对获取到的文字进行处理，去除首尾空格(trim())，替换换行符(replace(/s/g,’’)表示全局将所有特殊字符替换为’’)，split(’/’)可以用split分割返回数组

document.getElementsByClassName("classname")[0].trim().replace(/s/g,'').split('/')

获取浏览器可见区域高度、宽度

document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

代码

select.html

<html><body><form><select value="selector"><option>1997</option><option>1996</option><option value="valuedemo">1995</option><option>1994</option></select>年</form></body>
</html>

获取option元素的个数

*** Settings ***
Library           SeleniumLibrary13 JSdemoOpen Browser    file:///C:/Temp/ele_demo.html${num}    Execute Javascript    return document.getElementsByTagName("option").length    #获取标签为optioan的个数

javascript返回页面顶部_RobotFramework: 执行JavaScript语句相关推荐

如何通过HTML标记或JS代码实现跳转返回页面顶部
本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用JavaScript Scroll函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即 ...
返回页面顶部最简单方法
返回页面顶部最简单方法 <a href="#">返回页面顶部</a>
迅速返回页面顶部代码
<迅速返回页面顶部代码> <DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: p ...
点击返回页面顶部（h5、js、jQuery 三种方式）
当页面过长时,通常会在滚动条到一定位置时设置按钮,点击可以快速返回顶部或者指定的位置处. 参考文档:jQuery中页面返回顶部的方法总结方法一:锚点定位当点击a标签,会直接返回到顶部:如果p标签有 ...
Javascript代码用YC_jsRun()函数执行Javascript文件
在c/c++中也有个YC_jsRun()函数,它们都是执行Javascript代码的函数,但执行环境不同,参数和返回值也不同. var t1 = new Date(); document.wr ...
js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
js 返回页面顶部的实现( layui)
js代码 // 点击按钮,返回顶部 function topFunction() {document.getElementsByClassName('layui-body')[0].scrollTop ...
jquery返回页面顶部
本文转载自: https://www.cnblogs.com/eczhou/archive/2013/01/09/2852708.html 作者:eczhou 转载请注明该声明. 1.此博文图片样式引 ...
用jQuery实现返回页面顶部的功能
页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能: css代码如下: *{ margin:0; paddin ...

javascript返回页面顶部_RobotFramework: 执行JavaScript语句

场景

代码

javascript返回页面顶部_RobotFramework: 执行JavaScript语句相关推荐

最新文章

热门文章