Introduction to front-end testing tools

js_test_framework

This tool is mainly used for web front-end unit testing. By calling js methods directly in the browser, on-site testing on the interface is achieved

git address:

Process

1. Record the required requests on site through testLive. testLive will record all requests during the period and can be re-run at the same time

2. Output the request recorded by testLive to the console through the output method, write the output data into the RequestData of the custom module, and register it into the requestFactory after defining the data

3. Write Test.js of the custom module, by calling the network request in the requestFactory, and writing assertions that need to be judged, and register the unit test and process test of each module to the testManager

4. Run the test case in testManager, view the results during test execution, and analyze the results at the same time

File directory structure example

basic: Core module

testLive
requestFactory
testManager

module: external module, sample only

user

userRequestData
userTest

##product

productRequestData

productTest
...

Three major modules

The modules are all independent and can be customized and replaced individually

---

testLive

    前端录制现场,通过调用回调接口,记录下用户在前端界面的所有操作记录

External interface

• startRecord starts recording, name is the name of the video

• stopRecord End recording

• output Output the result set of all recordings

• runRecord Run recording

• shouRequest View the directory structure and details of all videos

• callback External callback function, the external function can be called in the method, call this callback

Extension method

• ajaxOverride rewrites the ajax request and adds all jquery ajax to the callback

---

requestFactory

    请求工厂,主要用于收集用户的所有请求记录

External interface

• registerMethod registration method, through this method external call can register the method in requestFactory

• registerData registration Data, this method is similar to registerMethod, except that the parameter structure is different

• getMethod obtains the method through the method name {name: custom method name, url: network request address, methodType: request method, run :Execution method}

• getMethod.run After passing getMethod, you can directly call the run function to execute the method and return the result {costTime: overhead time, requestData: request parameter, type: request method , url: network request address, responseData: server return result, success: whether the request was successful}

• showMethods displays all requests in requestFactory

---

testManager

    测试集成,用于管理测试,将测试模块化,以及结果的展示

External interface

• registerMethod registration method, through this method external call can register the method in testManager

• registerData registration data, this method Similar to registerMethod, except that the parameter structure is different

• run running method, the return value is the result details of this run
  The directory structure is {assertQueue: a collection of all assertion results, responseQueue: all Request result collection, errAssertQueue: collection of all assertion failures, errorResponseQueue: collection of all network request failures, spendTime: request time overhead, success: whether it is successful}

• showAll displays the directory structure of all modules tested

• showMethods Displays all test methods under the module through the module name

• Based on web page analysis tools:

• 1.      Ali Test

• 2.  Baidu Application Performance Testing Center

• 2.        Web PageTest

• 3.         PingDom Tools

• 4.        GTmetrix

• Browser-based Analysis tools:

• 1. Chrome’s own tool F12

• ##2. Firefox plug-in: YSlow (Yahoo tool)

• 3. Page Speed ​​(google)

Internal tool class

assertQueue This class is used to record and determine the user's goals Whether the result is consistent with the actual result, and output the result set

• result related data

• recordResponse is used to record the results of network requests

• assert User-set assertion

The above is the detailed content of Introduction to front-end testing tools. For more information, please follow other related articles on the PHP Chinese website!