JavaScript有什么用？Web自动化有话说

lsekfe

前言
　　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. 
    
13. 
    
14. class CssElement(object):
    
15. 
    
16.     driver = None
    
17. 
    
18.     def __init__(self, css, index=None, describe=None):
    
19.         self.css = css
    
20.         if index is None:
    
21.             self.index = 0
    
22.         else:
    
23.             self.index = index
    
24.         self.desc = describe
    
25. 
    
26.     def __get__(self, instance, owner):
    
27.         if instance is None:
    
28.             return None
    
29.         global driver
    
30.         driver = instance.driver
    
31.         return self
    
32. 
    
33.     def clear(self):
    
34.         """
    
35.         清除内容
    
36.         """
    
37.         js = """var elm = document.querySelectorAll("{css}")[{index}];
    
38.                     elm.style.border="2px solid red";
    
39.                     elm.value = "";""".format(css=self.css, index=self.index)
    
40.         driver.execute_script(js)
    
41. 
    
42.     def input(self, value):
    
43.         """
    
44.         输入内容
    
45.         """
    
46.         js = """var elm = document.querySelectorAll("{css}")[{index}];
    
47.                     elm.style.border="2px solid red";
    
48.                     elm.value = "{value}";""".format(css=self.css, index=self.index, value=value)
    
49.         driver.execute_script(js)
    
50. 
    
51.     def click(self):
    
52.         """
    
53.         点击元素
    
54.         """
    
55.         js = """var elm = document.querySelectorAll("{css}")[{index}];
    
56.                    elm.style.border="2px solid red";
    
57.                    elm.click();""".format(css=self.css, index=self.index)
    
58.         driver.execute_script(js)
    
59. 
    
60.     def remove_attribute(self, attribute):
    
61.         """
    
62.         删除某个元素的属性，比如日期空间的readonly属性
    
63.         """
    
64.         js = """
    
65.         var elm = document.querySelectorAll("{css}")[{index}];
    
66.             elm.removeAttribute("{attr}");
    
67.         """.format(css=self.css, index=self.index, attr=attribute)
    
68.         driver.execute_script(js)
    
69. 
    
70.     @staticmethod
    
71.     def remove_attr(element, attribute):
    
72.         js = """
    
73.         arguments[0].removeAttribute("{attr}");
    
74.         """.format(attr=attribute)
    
75.         driver.execute_script(js, element)
    
76. 
    
77.     @staticmethod
    
78.     def scrollTo(x, y):
    
79.         js = """
    
80.         window.scrollTo("{}", "{}")
    
81.         """.format(x, y)
    
82.         driver.execute_script(js)
    
83. 
    
84.     @staticmethod
    
85.     def window_scroll(element, x, y):
    
86.         js = """
    
87.         arguments[0].scrollTo("{}", "{}")
    
88.         """.format(x, y)
    
89.         driver.execute_script(js, element)
    
90. 
    
91.     def height_light(self):
    
92.         js = """
    
93.         var element = document.querySelectorAll("{css}")[{index}];
    
94.             element.style.border="2px solid red";
    
95.         """.format(css=self.css, index=self.index)
    
96.         driver.execute_script(js)
    
97. 
    
98.     @staticmethod
    
99.     def height_lig(element):
    
100.         js = """
     
101.         arguments[0].style.border="2px solid red";
     
102.         """
     
103.         driver.execute_script(js, element)
     
104. 
     
105. 
     
106. if __name__ == '__main__':
     
107.     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. 
    
17. from javascript.js_element import CssElement
    
18. 
    
19. 
    
20. class Base(object):
    
21.     window = CssElement
    
22. 
    
23.     def __init__(self, driver: WebDriver):
    
24.         self.driver = driver
    
25. 
    
26.     def load_url(self, url):
    
27.         return self.driver.get(url)
    
28. 
    
29. 
    
30. class BaiDuPage(Base):
    
31.     search_input = CssElement("#kw", describe="百度搜索框")
    
32.     search_button = CssElement("#su", describe="百度按钮")
    
33. 
    
34.     def search(self):
    
35.         self.search_input.height_light()
    
36.         self.search_input.clear()
    
37.         time.sleep(2)  # 为了看到效果
    
38.         self.search_input.input("linux超")
    
39.         time.sleep(2)
    
40.         self.search_button.height_light()
    
41.         self.search_button.click()
    
42.         time.sleep(2)
    
43.         self.window.scrollTo("0", "500")
    
44.         time.sleep(2)  # 为了看到效果
    
45. 
    
46. 
    
47. class ChinaRailway(Base):
    
48.     data_input = CssElement("#train_date", describe="日期控件")
    
49. 
    
50.     def input_date(self, date):
    
51.         self.data_input.height_light()
    
52.         self.data_input.remove_attribute("readonly")
    
53.         self.data_input.input(date)
    
54.         time.sleep(2)  # 为了看到效果
    
55. 
    
56. 
    
57. class TestJs(unittest.TestCase):
    
58. 
    
59.     def setUp(self):
    
60.         self.driver = webdriver.Firefox()
    
61.         self.driver.maximize_window()
    
62.         self.driver.implicitly_wait(20)
    
63.         self.bai_du_page = BaiDuPage(self.driver)
    
64.         self.china_railway = ChinaRailway(self.driver)
    
65. 
    
66.     def test_search(self):
    
67.         """百度搜索"""
    
68.         self.bai_du_page.load_url("https://www.baidu.com")
    
69.         self.bai_du_page.search()
    
70. 
    
71.     def test_china_railway(self):
    
72.         """12306日期"""
    
73.         self.china_railway.load_url("https://www.12306.cn/index/")
    
74.         time.sleep(5)  #
    
75.         self.china_railway.input_date("2021-01-01")
    
76. 
    
77.     def tearDown(self):
    
78.         self.driver.quit()
    
79. 
    
80. 
    
81. if __name__ == '__main__':
    
82.     unittest.main()

复制代码

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