JavaScript在web自动化测试中的作用示例详解

网络编程 2024/11/16 佚名

3 1 2

前言

JS的全称JavaScript，是一种运行在浏览器中的解释型脚本语言，通常用来实现web前端页面的基本功能，对于前端开发人员是不得不掌握的一门基本技能，但是对于做web自动化测试的人员来说，如果为了实施自动化测试专门研究JS的脚本语法不仅浪费时间，也偏离了我们的工作重心，所以今天就给大家总结一下，在web自动化测试中常用的一些JS脚本，只要掌握这些脚本的使用，无需再为专门学习js脚本而花费太多时间，优秀程序员的素质是什么？有现成的直接用，绝不浪费时间自己写！^_^ 开玩笑的，俗话说技多不压身，多掌握一门技能，只有好处没坏处。正文开始！

窗口滚动

用途：滑动web页面

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

参数说明

x：屏幕向右移动的距离

y：屏幕向下移动的距离

移除属性

用途：以下方法可以删除元素的任何属性，主要用来移除时间控件的readonly属性

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)

参数说明

css:：css表达式

index：索引值，默认0，标识第一个元素

attribute：元素的某个属性，比如readonly，value，name等

高亮元素

用途：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题

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)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

点击元素

用途：由于web自动化的最大问题就是稳定性比较差，有些时候使用selenium无法点击元素，因此我们可以使用JS实现元素的点击操作

def click(css, index=0):
 js = """var element = document.querySelectorAll("{css}")[{index}];
    element.click();""".format(css=css, index=index)
 driver.execute_script(js)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

清除输入框内容

用途：用来清除输入框的内容

def clear(css, index=0):
 js = """var element = document.querySelectorAll("{css}")[{index}];
    element.value = "";""".format(css=css, index=index)
 driver.execute_script(js)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

输入内容

用途：输入框中输入内容

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)

参数说明

css：css表达式

value：待输入的数据

index：索引值，默认0，标识第一个元素

说明

以上所有的JS操作，还可以结合selenium中的WebElement按照以下方式实现，因为JS中查找元素的方法有限，比如xpath定位，在js中不存在

如滚动页面

def scrollTo(self, element, x, y):
 js = """
 arguments[0].scrollTo("{}", "{}")
 """.format(x, y)
 driver.execute_script(js, element)

参数说明

element：通过selenium中的定位方法查找到的WebElement元素对象

arguments[0]：代表execute_script（）方法的第二个参数

测试代码

我们简单的写个测试脚本来测试一下以上JS脚本是否能够顺利执行

js_element.py

"""
------------------------------------
@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[0].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[0].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[0].style.border="2px solid red";
  """
  driver.execute_script(js, element)


if __name__ == '__main__':
 pass

用例

test_js.py

"""
------------------------------------
@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()

执行效果及输出

总结

以上所有的操作仅支持CSS表达式，当然你可以修改替换querySelectorAll方法为getElementById, getElementByClassName等，但是需要注意使用getElementById时，不需要index参数；

Js相对于selenium的控制页面元素，执行速度更快，而且当遇到selenium比较难处理的操纵时，可以考虑使用js代码来实现，当然还是需要你懂点Js代码，不懂也没关系，掌握以上代码完全够你解决实际问题

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

web自动化测试方法,web自动化测试

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript在web自动化测试中的作用示例详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JavaScript在web自动化测试中的作用示例详解

javascript导出csv文件（excel）的方法示例

angularjs自定义过滤器demo示例

评论“JavaScript在web自动化测试中的作用示例详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JavaScript在web自动化测试中的作用示例详解

javascript导出csv文件（excel）的方法示例

angularjs自定义过滤器demo示例

评论“JavaScript在web自动化测试中的作用示例详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存