JavaScript在web自动化测试中的应用

豹子捣蛋鸡 發表於 2019-8-24 18:42:00

<h2>前言</h2>
JS的全称JavaScript，是一种运行在浏览器中的解释型脚本语言，通常用来实现web前端页面的基本功能，对于前端开发人员是不得不掌握的一门基本技能，但是对于做web自动化测试的人员来说，如果为了实施自动化测试专门研究JS的脚本语法不仅浪费时间，也偏离了我们的工作重心，所以今天就给大家总结一下，在web自动化测试中常用的一些JS脚本，只要掌握这些脚本的使用，无需再为专门学习js脚本而花费太多时间，优秀程序员的素质是什么？有现成的直接用，绝不浪费时间自己写！^_^ 开玩笑的，俗话说技多不压身，多掌握一门技能，只有好处没坏处。正文开始！
<h2>窗口滚动</h2>
用途：滑动web页面
<div class="cnblogs_code">
<pre>def scrollTo(x, y):
js = """
window.scrollTo("{x}", "{y}")
""".format(x=x, y=y)
driver.execute_script(js)</pre>
</div>
参数说明
x：屏幕向右移动的距离
y：屏幕向下移动的距离
<h2>移除属性</h2>
用途：以下方法可以删除元素的任何属性，主要用来移除时间控件的readonly属性
<div class="cnblogs_code">
<pre>def remove_attribute(css, attribute, index=0):
js = """
var element = document.querySelectorAll("{css}")[{index}];
 element.removeAttribute("{attr}");
""".format(css=css, index=index, attr=attribute)
driver.execute_script(js)</pre>
</div>
参数说明
css:：css表达式
index：索引值，默认0，标识第一个元素
attribute：元素的某个属性，比如readonly，value，name等
<h2>高亮元素</h2>
用途：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题
<div class="cnblogs_code">
<pre>def height_light(css, index=0):
js = """
var element = document.querySelectorAll("{css}")[{index}];
 element.style.border="2px solid red";
""".format(css=css, index=index)
driver.execute_script(js)</pre>
</div>
参数说明
css：css表达式
index：索引值，默认0，标识第一个元素
<h2>点击元素</h2>
用途：由于web自动化的最大问题就是稳定性比较差，有些时候使用selenium无法点击元素，因此我们可以使用JS实现元素的点击操作
<div class="cnblogs_code">
<pre>def click(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
 element.click();""".format(css=css, index=index)
driver.execute_script(js)</pre>
</div>
参数说明
css：css表达式
index：索引值，默认0，标识第一个元素
<h2>清除输入框内容</h2>
用途：用来清除输入框的内容
<div class="cnblogs_code">
<pre>def clear(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
 element.value = "";""".format(css=css, index=index)
driver.execute_script(js)</pre>
</div>
参数说明
css：css表达式
index：索引值，默认0，标识第一个元素
<h2>输入内容</h2>
用途：输入框中输入内容
<div class="cnblogs_code">
<pre>def input(self, css, value, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
 element.value = "{value}";""".format(css=css, index=index, value=value)
driver.execute_script(js)</pre>
</div>
参数说明
css：css表达式
value：待输入的数据
index：索引值，默认0，标识第一个元素
<h2>说明</h2>
以上所有的JS操作，还可以结合selenium中的WebElement按照以下方式实现，因为JS中查找元素的方法有限，比如xpath定位，在js中不存在
如滚动页面
<div class="cnblogs_code">
<pre>def scrollTo(self, element, x, y):
js = """
arguments.scrollTo("{}", "{}")
""".format(x, y)
driver.execute_script(js, element)</pre>
</div>
参数说明
element：通过selenium中的定位方法查找到的WebElement元素对象
arguments：代表execute_script（）方法的第二个参数
<h2>测试代码</h2>
我们简单的写个测试脚本来测试一下以上JS脚本是否能够顺利执行
js_element.py
<div class="cnblogs_code">
<pre>"""
------------------------------------
@Time : 2019/8/23 19:00
@Auth : linux超
@File : js_element.py
@IDE: PyCharm
@Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!
@QQ : 28174043@qq.com
@GROUP: 878565760
------------------------------------
"""

class CssElement(object):

driver = None

def __init__(self, css, index=None, describe=None):
 self.css = css
 if index is None:
 self.index = 0
 else:
 self.index = index
 self.desc = describe

def __get__(self, instance, owner):
 if instance is None:
 return None
 global driver
 driver = instance.driver
 return self

def clear(self):
 """
 清除内容
 """
 js = """var elm = document.querySelectorAll("{css}")[{index}];
 elm.style.border="2px solid red";
 elm.value = "";""".format(css=self.css, index=self.index)
 driver.execute_script(js)

def input(self, value):
 """
 输入内容
 """
 js = """var elm = document.querySelectorAll("{css}")[{index}];
 elm.style.border="2px solid red";
 elm.value = "{value}";""".format(css=self.css, index=self.index, value=value)
 driver.execute_script(js)

def click(self):
 """
 点击元素
 """
 js = """var elm = document.querySelectorAll("{css}")[{index}];
 elm.style.border="2px solid red";
 elm.click();""".format(css=self.css, index=self.index)
 driver.execute_script(js)

def remove_attribute(self, attribute):
 """
 删除某个元素的属性，比如日期空间的readonly属性
 """
 js = """
 var elm = document.querySelectorAll("{css}")[{index}];
 elm.removeAttribute("{attr}");
 """.format(css=self.css, index=self.index, attr=attribute)
 driver.execute_script(js)

@staticmethod
def remove_attr(element, attribute):
 js = """
 arguments.removeAttribute("{attr}");
 """.format(attr=attribute)
 driver.execute_script(js, element)

@staticmethod
def scrollTo(x, y):
 js = """
 window.scrollTo("{}", "{}")
 """.format(x, y)
 driver.execute_script(js)

@staticmethod
def window_scroll(element, x, y):
 js = """
 arguments.scrollTo("{}", "{}")
 """.format(x, y)
 driver.execute_script(js, element)

def height_light(self):
 js = """
 var element = document.querySelectorAll("{css}")[{index}];
 element.style.border="2px solid red";
 """.format(css=self.css, index=self.index)
 driver.execute_script(js)

@staticmethod
def height_lig(element):
 js = """
 arguments.style.border="2px solid red";
 """
 driver.execute_script(js, element)

if __name__ == '__main__':
pass</pre>
</div>
用例
test_js.py
<div class="cnblogs_code">
<pre>"""
------------------------------------
@Time : 2019/8/22 16:51
@Auth : linux超
@File : test_js.py
@IDE: PyCharm
@Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!
@QQ : 28174043@qq.com
@GROUP: 878565760
------------------------------------
"""
import time
from selenium.webdriver.remote.webdriver import WebDriver
import unittest
from selenium import webdriver

from javascript.js_element import CssElement

class Base(object):
window = CssElement

def __init__(self, driver: WebDriver):
 self.driver = driver

def load_url(self, url):
 return self.driver.get(url)

class BaiDuPage(Base):
search_input = CssElement("#kw", describe="百度搜索框")
search_button = CssElement("#su", describe="百度按钮")

def search(self):
 self.search_input.height_light()
 self.search_input.clear()
 time.sleep(2)# 为了看到效果
 self.search_input.input("linux超")
 time.sleep(2)
 self.search_button.height_light()
 self.search_button.click()
 time.sleep(2)
 self.window.scrollTo("0", "500")
 time.sleep(2)# 为了看到效果

class ChinaRailway(Base):
data_input = CssElement("#train_date", describe="日期控件")

def input_date(self, date):
 self.data_input.height_light()
 self.data_input.remove_attribute("readonly")
 self.data_input.input(date)
 time.sleep(2)# 为了看到效果

class TestJs(unittest.TestCase):

def setUp(self):
 self.driver = webdriver.Firefox()
 self.driver.maximize_window()
 self.driver.implicitly_wait(20)
 self.bai_du_page = BaiDuPage(self.driver)
 self.china_railway = ChinaRailway(self.driver)

def test_search(self):
 """百度搜索"""
 self.bai_du_page.load_url("https://www.baidu.com")
 self.bai_du_page.search()

def test_china_railway(self):
 """12306日期"""
 self.china_railway.load_url("https://www.12306.cn/index/")
 time.sleep(5)#
 self.china_railway.input_date("2021-01-01")

def tearDown(self):
 self.driver.quit()

if __name__ == '__main__':
unittest.main()</pre>
</div>
<h2>执行效果及输出</h2>
<img src="https://img2018.cnblogs.com/blog/1421063/201908/1421063-20190823203441507-681298540.gif" alt="" width="1202" height="603">
<h2>总结</h2>
以上所有的操作仅支持CSS表达式，当然你可以修改替换querySelectorAll方法为getElementById, getElementByClassName等，但是需要注意使用getElementById时，不需要index参数；
Js相对于selenium的控制页面元素，执行速度更快，而且当遇到selenium比较难处理的操纵时，可以考虑使用js代码来实现，当然还是需要你懂点Js代码，不懂也没关系，掌握以上代码完全够你解决实际问题

</div>
<div id="MySignature" role="contentinfo">
----------------------------真正的勇士，敢于直面惨淡的Warning、敢于正视淋漓的Error--------------------------

 版权声明


<hr style="color: red">

 出处:

 博客园Linux超的技术博客--https://www.cnblogs.com/linuxchao/



 您的支持是对博主最大的鼓励，感谢您的认真阅读


 
 本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，
 且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
 


 作者:
 Linux超
 
来源：https://www.cnblogs.com/linuxchao/p/linuxchao-js.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript在web自动化测试中的应用