JavaScript在web自動化測試中的應用

前言

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   : [email protected]
@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   : [email protected]
@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代碼，不懂也沒關係，掌握以上代碼完全夠你解決實際問題

JavaScript在web自動化測試中的應用

前言

窗口滾動

移除屬性

高亮元素

點擊元素

清除輸入框內容

輸入內容

說明

測試代碼

執行效果及輸出

總結

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

2022年第一篇博

JavaScript在web自動化測試中的應用

提效工具-python解析xmind文件及xmind用例統計

第二個python&selenium自動化測試實戰項目

第一個Pytest UI自動化測試實戰實例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結