CN112241371A - Method for improving testing efficiency of Web application interface - Google Patents
Method for improving testing efficiency of Web application interface Download PDFInfo
- Publication number
- CN112241371A CN112241371A CN202011132382.5A CN202011132382A CN112241371A CN 112241371 A CN112241371 A CN 112241371A CN 202011132382 A CN202011132382 A CN 202011132382A CN 112241371 A CN112241371 A CN 112241371A
- Authority
- CN
- China
- Prior art keywords
- web application
- data
- testing
- network requests
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 238000012360 testing method Methods 0.000 title claims abstract description 36
- 238000013515 script Methods 0.000 claims abstract description 26
- 238000005516 engineering process Methods 0.000 claims abstract description 3
- 238000009877 rendering Methods 0.000 claims description 13
- 238000013480 data collection Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 5
- 238000012986 modification Methods 0.000 abstract description 3
- 230000004048 modification Effects 0.000 abstract description 3
- 238000004891 communication Methods 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 10
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 7
- 229910052804 chromium Inorganic materials 0.000 description 3
- 239000011651 chromium Substances 0.000 description 3
- 230000036316 preload Effects 0.000 description 3
- 239000008186 active pharmaceutical agent Substances 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 239000003795 chemical substances by application Substances 0.000 description 1
- 210000000349 chromosome Anatomy 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3684—Test management for test design, e.g. generating new test cases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention relates to the field of Web communication, in particular to a method for improving the testing efficiency of a Web application interface, which realizes the automatic output of corresponding testing scripts aiming at different Web applications, saves the time of manual modification operation of a large number of testers and greatly improves the development and testing efficiency. The method for improving the testing efficiency of the Web application interface is applied to desktop application developed based on an Electron technology, and the access link at the front end of the Web application is input and an access page is opened in the Electron desktop application; injecting Javascript script into the access page; intercepting network requests and data of an Http or Http protocol of a front-end page of a web application through a Javascript; and collecting and storing the intercepted network requests and data, and exporting the stored network requests and data according to the corresponding interface test script format. The invention is suitable for Web application interface testing.
Description
Technical Field
The invention relates to the field of Web communication, in particular to a method for improving the testing efficiency of a Web application interface.
Background
At present, in the field of interface testing of web application, a manual interface test script is mainly used, and interface verification is performed by assisting similar interface agent application programs such as a Network panel of a browser console, Postman and the like. The mode can reuse the previous interface test script in each development period of the project, and the efficiency of the interface test is improved.
However, in the above mode, the tester is required to maintain the interface test script and the corresponding test data, and keep communicating with the application developer in real time, and modify the interface according to the latest interface. A great deal of time is consumed by testing personnel in the working process, and the developing and testing efficiency is reduced.
Disclosure of Invention
The invention aims to provide a method for improving the testing efficiency of a Web application interface, which can automatically generate the latest interface statistics, corresponding data storage and testing scripts by directly operating a front-end interface of a Web application, and greatly improve the efficiency of development and testing.
The invention adopts the following technical scheme to realize the purpose, and the method for improving the testing efficiency of the Web application interface comprises the following steps:
step (1), inputting an access link at the front end of a web application in an Electron desktop application and opening an access page;
step (2), injecting Javascript script in the access page;
step (3), intercepting network requests and data of Http or Http protocol of a web application front-end page through Javascript;
and (4) collecting and storing the intercepted network requests and data, and exporting the stored network requests and data according to the corresponding interface test script format.
Further, in the step (2), the function of the Javascript script includes: encapsulating the XMLHttpRequest request, collating and saving the intercepted request, and controlling page rendering.
Further, in step (4), collecting and saving the intercepted network request and the data includes collecting and saving the data of the asynchronous network request.
Further, the specific method for collecting and storing the data of the asynchronous network request includes: the data collection of asynchronous network requests is realized by realizing the send method of the XMLHttpRequest object again and adding a listening function of readystate.
Further, in step (3), after the Javascript script is injected, the Electron application automatically implements page rendering and sends an Http or Http request to the backend.
According to the desktop application based on the Electron, the related access link of the front end of the web is input in the Electron desktop application, the access page is opened, the Javascript is directly injected into the access page, the network request and data of the Http or Http protocol of the front end page of the web application are intercepted through the Javascript, the intercepted network request and data are stored and exported according to the corresponding test script format, the corresponding test scripts are automatically output aiming at different web applications, the time of manual modification operation of a large number of testers is saved, and the development and test efficiency is greatly improved.
Drawings
Fig. 1 is a simple schematic diagram of the architecture of the invention adopting Electron technology.
FIG. 2 is a schematic diagram of the operation of the Electron application developed by the present invention.
FIG. 3 is a schematic diagram of the web application network request interception script operation of the present invention.
FIG. 4 is a schematic diagram of the internal structure of Electron application developed by the present invention.
Detailed Description
The invention discloses a method for improving the testing efficiency of a Web application interface, which comprises the following steps:
step (1), inputting an access link at the front end of a web application in an Electron desktop application and opening an access page;
step (2), injecting Javascript script in the access page;
step (3), intercepting network requests and data of Http or Http protocol of a web application front-end page through Javascript;
and (4) collecting and storing the intercepted network requests and data, and exporting the stored network requests and data according to the corresponding interface test script format.
In the step (2), the function of the Javascript script includes: encapsulating the XMLHttpRequest request, collating and saving the intercepted request, and controlling page rendering.
In the step (3), after the Javascript script is injected, the Electron application can automatically realize page rendering and send an Http or Http request to the back end.
In the step (4), the step of collecting and storing the intercepted network request and the data comprises the step of collecting and storing the data of the asynchronous network request.
The specific method for collecting and storing the data of the asynchronous network request comprises the following steps: the data collection of asynchronous network requests is realized by realizing the send method of the XMLHttpRequest object again and adding a listening function of readystate.
FIG. 1 is a simple schematic diagram of the overall technical architecture of the Electron of the present invention, which is a simple schematic diagram of the overall technical architecture of the Electron, and mainly includes Main Process 101, NodeJs runtime 102, Chromium runtime103, and multiple Render Process 104;
electron does not integrate all of the chrome browser, integrating the WebContent component of chrome, a subset of the rendering functionality.
The Main Process 101 mainly comprises NodeJs runtime 102 and Chromium runtime 103. The message loop of NodeJs is associated with the chrome so that the Javascript can be used to control the display of the entire UI.
The NodeJs runtime 102 supports not only native Node APIs, but also the introduction of third party Node modules. On the basis of the above, the Electron also provides a series of extended APIs, including functions of controlling native menus, notification and the like.
The Chromium runtime 102 is primarily implemented to manage multiple Render processes 104.
The Render Process 104 is consistent with the Render Process of chrome in function, and realizes UI rendering of each page. The difference is that the Electron is expanded on the basis of the chromosome, so that the method is compatible with the traditional Web page, and a developer can also select whether to use the Node or not.
Fig. 2 is a schematic diagram of the operation of the Electron application of the present invention, which is a schematic diagram of the overall operation of the Electron application 201. Mainly comprising a Web application URL 202, a Web application page 203, an Http/Http request 204, a Web application backend 205, Javascript scripts 206, intercepted and saved network requests 209, and actions "inject" 207 and "intercept" 208.
The Web application URL 202 is the front end page access link for the desired test item.
The Web application page 203 is a page rendered by the Electron application after the URL is input.
The Web application backend 205 is the backend interface address of the item to be tested.
The Javascript script 206 is a core implementation of the application, and the responsible functions include encapsulating an XMLHttpRequest request, sorting and storing the intercepted request, controlling page rendering, and the like.
The intercepted and saved network request 209 is the target value that the application needs to obtain.
The "inject" 207 and "intercept" 208 are two examples of actions.
And the whole workflow comprises the steps of opening the Electron application, inputting an access link of a project to be tested, and then normally operating in a page rendered by the application. The Electron application can automatically realize page rendering, send Http/Http requests to the back end, intercept request parameters and return, and sort, store and output the acquired request data.
Fig. 3 is a working diagram of web application network request interception script, which mainly includes an XMLHttpRequest object 302, a new send method 304, readystatechange 305 event interception, a saved send method 303 of the XMLHttpRequest itself, and a Main Process 30.
The XMLHttpRequest 302 is used by the Web application to interact with the server. Through which data can be retrieved by requesting a specific URL without refreshing the page. This allows the web page to update the local content of the page without affecting the user's operation. Is heavily used in AJAX programming of web page front ends.
The new send 304 is an implementation method, and is used for replacing the send method of the XMLHttpRequest object. The origin send 303 is the send method before replacement.
The readystatechange 305 is a method called by a change of a readystate attribute of the XMLHttpRequest object, and the readystate attribute indicates the state of the current request through different values, as follows:
0 indicates UNSENT, i.e. the proxy is created, but the open method has not been called.
1 indicates OPENED, i.e., the open method has been called.
2 indicates that HEADER _ RECEIVED, i.e., send method, has been called and header and status are already available.
3 denotes LOADING, i.e., download, where the responseText attribute already contains part of the data.
4 indicates DONE, i.e. the request operation has completed, which means that the data transfer has either completely completed or failed, at which point the returned data can be taken.
The sending 306 and Main Process 307 mean that the data requested to be returned has been taken and then sent to the host Process through IPC.
Fig. 3 is an implementation of the core of the application, and data collection of asynchronous network requests is realized by re-implementing the send method of the XMLHttpRequest object and adding a listening function of readystate.
Fig. 4 is a schematic diagram of an internal structure of Electron application developed by the present invention, which mainly includes: js 401, preloads 402, index html 403, panel.js 404.
The preloads 405 and loadFile406 indicate how Main Process loads preloads.js and index.html.
The ipcRenderers 407 and 409 indicate that each sub-Process performs data transfer with the Main Process through an inter-Process peer.
In operation, start from index. And then, respectively presenting the interface of the Web application to be tested and the statistical panel interface on the html rendering page. Js is responsible for intercepting Http/Http requests and passing the results to Main Process through IPC. And the Main Process sorts the received data and transmits the sorted data to index.
In conclusion, the invention realizes the automatic output of the corresponding test scripts aiming at different web applications, saves the time for a large number of testers to carry out manual modification operation, and greatly improves the development and test efficiency.
Claims (5)
1. The method for improving the testing efficiency of the Web application interface is applied to desktop application developed based on Electron technology, and is characterized by comprising the following steps:
step (1), inputting an access link at the front end of a web application in an Electron desktop application and opening an access page;
step (2), injecting Javascript script in the access page;
step (3), intercepting network requests and data of Http or Http protocol of a web application front-end page through Javascript;
and (4) collecting and storing the intercepted network requests and data, and exporting the stored network requests and data according to the corresponding interface test script format.
2. The method for improving the efficiency of testing the Web application interface according to claim 1, wherein in the step (2), the Javascript script functions in: encapsulating the XMLHttpRequest request, collating and saving the intercepted request, and controlling page rendering.
3. The method for improving efficiency of testing Web application interfaces of claim 2, wherein in step (4), the collecting and saving the intercepted network requests and the data comprises collecting and saving the data of the asynchronous network requests.
4. The method for improving the efficiency of testing the Web application interface according to claim 3, wherein the specific method for collecting and saving the data of the asynchronous network request comprises: the data collection of asynchronous network requests is realized by realizing the send method of the XMLHttpRequest object again and adding a listening function of readystate.
5. The method for improving the efficiency of testing the Web application interface according to claim 1, wherein in the step (3), after the Javascript script is injected, the Electron application automatically implements page rendering and sends an Http or Http request to the backend.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011132382.5A CN112241371A (en) | 2020-10-21 | 2020-10-21 | Method for improving testing efficiency of Web application interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011132382.5A CN112241371A (en) | 2020-10-21 | 2020-10-21 | Method for improving testing efficiency of Web application interface |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112241371A true CN112241371A (en) | 2021-01-19 |
Family
ID=74169542
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011132382.5A Pending CN112241371A (en) | 2020-10-21 | 2020-10-21 | Method for improving testing efficiency of Web application interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112241371A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113220571A (en) * | 2021-05-11 | 2021-08-06 | 北京百度网讯科技有限公司 | Debugging method, system, equipment and storage medium of mobile webpage |
| WO2023225801A1 (en) * | 2022-05-23 | 2023-11-30 | 北京小米移动软件有限公司 | Automated testing method and apparatus for application |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140282464A1 (en) * | 2013-03-18 | 2014-09-18 | Cloudmask | Systems and methods for intercepting, processing, and protecting user data through web application pattern detection |
| CN108255730A (en) * | 2018-01-23 | 2018-07-06 | 平安普惠企业管理有限公司 | Software interface test approach, test equipment, storage medium and device |
| CN109614318A (en) * | 2018-11-14 | 2019-04-12 | 金色熊猫有限公司 | Automated testing method, device, electronic equipment and computer-readable medium |
| CN109688202A (en) * | 2018-12-04 | 2019-04-26 | 北京腾云天下科技有限公司 | A kind of processing method of interface data, calculates equipment and storage medium at device |
| CN110149423A (en) * | 2019-07-04 | 2019-08-20 | 深圳市珍爱捷云信息技术有限公司 | Domain name processing method, device, readable storage medium storing program for executing and electronic equipment |
| CN110427331A (en) * | 2019-09-03 | 2019-11-08 | 四川长虹电器股份有限公司 | The method for automatically generating performance test script based on interface testing tool |
| CN110493318A (en) * | 2019-07-23 | 2019-11-22 | 北京字节跳动网络技术有限公司 | Processing method, device, medium and the equipment of HTTP request information |
| CN111625473A (en) * | 2020-07-01 | 2020-09-04 | 北京字节跳动网络技术有限公司 | Interface test case generation method and device, storage medium and electronic equipment |
-
2020
- 2020-10-21 CN CN202011132382.5A patent/CN112241371A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140282464A1 (en) * | 2013-03-18 | 2014-09-18 | Cloudmask | Systems and methods for intercepting, processing, and protecting user data through web application pattern detection |
| CN108255730A (en) * | 2018-01-23 | 2018-07-06 | 平安普惠企业管理有限公司 | Software interface test approach, test equipment, storage medium and device |
| CN109614318A (en) * | 2018-11-14 | 2019-04-12 | 金色熊猫有限公司 | Automated testing method, device, electronic equipment and computer-readable medium |
| CN109688202A (en) * | 2018-12-04 | 2019-04-26 | 北京腾云天下科技有限公司 | A kind of processing method of interface data, calculates equipment and storage medium at device |
| CN110149423A (en) * | 2019-07-04 | 2019-08-20 | 深圳市珍爱捷云信息技术有限公司 | Domain name processing method, device, readable storage medium storing program for executing and electronic equipment |
| CN110493318A (en) * | 2019-07-23 | 2019-11-22 | 北京字节跳动网络技术有限公司 | Processing method, device, medium and the equipment of HTTP request information |
| CN110427331A (en) * | 2019-09-03 | 2019-11-08 | 四川长虹电器股份有限公司 | The method for automatically generating performance test script based on interface testing tool |
| CN111625473A (en) * | 2020-07-01 | 2020-09-04 | 北京字节跳动网络技术有限公司 | Interface test case generation method and device, storage medium and electronic equipment |
Non-Patent Citations (2)
| Title |
|---|
| BINARYFIRE: "Electron获取webview中ajax请求内容的方法", 《HTTPS://BLOG.CSDN.NET/TINDER1024/ARTICLE/DETAILS/86487567》 * |
| 想哥找茬: "XMLHTTPRequest拦截处理", 《HTTPS://BLOG.CSDN.NET/WEIXIN_36508680/ARTICLE/DETAILS/108633092》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113220571A (en) * | 2021-05-11 | 2021-08-06 | 北京百度网讯科技有限公司 | Debugging method, system, equipment and storage medium of mobile webpage |
| CN113220571B (en) * | 2021-05-11 | 2024-04-19 | 北京百度网讯科技有限公司 | Method, system, equipment and storage medium for debugging mobile webpage |
| WO2023225801A1 (en) * | 2022-05-23 | 2023-11-30 | 北京小米移动软件有限公司 | Automated testing method and apparatus for application |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8839107B2 (en) | Context based script generation | |
| CN110334021B (en) | Interface test case generation method, device, equipment and storage medium | |
| CN111930635A (en) | Swagger-based rapid automatic testing method and system | |
| CN102866944B (en) | Pressure testing system and method | |
| US20110047415A1 (en) | Debugging of business flows deployed in production servers | |
| US11436066B2 (en) | System for offline object based storage and mocking of rest responses | |
| US20080005747A1 (en) | System and method for object state management | |
| CN110020278A (en) | Displaying, providing method, client and the server of page data | |
| CN106648682B (en) | A kind of dynamic data general framework of embedded system exploitation | |
| CN112241371A (en) | Method for improving testing efficiency of Web application interface | |
| CN111444088B (en) | Test case calling method and device for interface test | |
| CN103176892A (en) | Page monitoring method and system | |
| CN110377583A (en) | Database script executes method, apparatus, computer equipment and storage medium | |
| CN111831191A (en) | Workflow configuration method and device, computer equipment and storage medium | |
| CN109117127A (en) | Program code generation method, device and computer readable storage medium | |
| CN113900896B (en) | Method, device, equipment and storage medium for monitoring code operation | |
| CN114697232B (en) | System and method for acquiring index data of Skywalk probe and electronic equipment | |
| CN107526619B (en) | The loading method of format data stream file | |
| CN109840156A (en) | A kind of data cache method and its equipment, storage medium, terminal | |
| US10909019B2 (en) | Runtime performance introspection | |
| CN117441157A (en) | Software updater | |
| CN115617319A (en) | Information processing method and device | |
| CN113923146A (en) | Visual block chain consensus algorithm performance test method | |
| CN117234512B (en) | Method, system, electronic equipment and storage medium for rapidly developing business | |
| CN112346979A (en) | Software performance testing method, system and readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210119 |