51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 743|回复: 0
打印 上一主题 下一主题

[转贴] JavaScript有什么用?Web自动化有话说

[复制链接]
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 1042 天

    连续签到: 4 天

    [LV.10]测试总司令

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


    12. class CssElement(object):

    13.     driver = None

    14.     def __init__(self, css, index=None, describe=None):
    15.         self.css = css
    16.         if index is None:
    17.             self.index = 0
    18.         else:
    19.             self.index = index
    20.         self.desc = describe

    21.     def __get__(self, instance, owner):
    22.         if instance is None:
    23.             return None
    24.         global driver
    25.         driver = instance.driver
    26.         return self

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

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

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

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

    60.     @staticmethod
    61.     def remove_attr(element, attribute):
    62.         js = """
    63.         arguments[0].removeAttribute("{attr}");
    64.         """.format(attr=attribute)
    65.         driver.execute_script(js, element)

    66.     @staticmethod
    67.     def scrollTo(x, y):
    68.         js = """
    69.         window.scrollTo("{}", "{}")
    70.         """.format(x, y)
    71.         driver.execute_script(js)

    72.     @staticmethod
    73.     def window_scroll(element, x, y):
    74.         js = """
    75.         arguments[0].scrollTo("{}", "{}")
    76.         """.format(x, y)
    77.         driver.execute_script(js, element)

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

    84.     @staticmethod
    85.     def height_lig(element):
    86.         js = """
    87.         arguments[0].style.border="2px solid red";
    88.         """
    89.         driver.execute_script(js, element)


    90. if __name__ == '__main__':
    91.     pass
    复制代码
    用例
      test_js.py
    1. """
    2. ------------------------------------
    3. @Time : 2019/8/22 16:51
    4. @Auth : linux超
    5. @File : test_js.py
    6. @IDE  : PyCharm
    7. @Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!
    8. @QQ   : 28174043@qq.com
    9. @GROUP: 878565760
    10. ------------------------------------
    11. """
    12. import time
    13. from selenium.webdriver.remote.webdriver import WebDriver
    14. import unittest
    15. from selenium import webdriver

    16. from javascript.js_element import CssElement


    17. class Base(object):
    18.     window = CssElement

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

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


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

    26.     def search(self):
    27.         self.search_input.height_light()
    28.         self.search_input.clear()
    29.         time.sleep(2)  # 为了看到效果
    30.         self.search_input.input("linux超")
    31.         time.sleep(2)
    32.         self.search_button.height_light()
    33.         self.search_button.click()
    34.         time.sleep(2)
    35.         self.window.scrollTo("0", "500")
    36.         time.sleep(2)  # 为了看到效果


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

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


    44. class TestJs(unittest.TestCase):

    45.     def setUp(self):
    46.         self.driver = webdriver.Firefox()
    47.         self.driver.maximize_window()
    48.         self.driver.implicitly_wait(20)
    49.         self.bai_du_page = BaiDuPage(self.driver)
    50.         self.china_railway = ChinaRailway(self.driver)

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

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

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


    62. if __name__ == '__main__':
    63.     unittest.main()
    复制代码
    总结
      以上所有的操作仅支持CSS表达式, 当然你可以修改替换querySelectorAll方法为getElementById, getElementByClassName等,但是需要注意使用getElementById时,不需要index参数;
      Js相对于selenium的控制页面元素,执行速度更快,而且当遇到selenium比较难处理的操纵时,可以考虑使用js代码来实现,当然还是需要你懂点Js代码,不懂也没关系,掌握以上代码完全够你解决实际问题。









    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-10 22:57 , Processed in 0.067684 second(s), 24 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表