I wrote an automated testing tool for the front-end who was not doing my job properly.

Hello friends, everyone must have been attracted by such a weird title and clicked in. Now that you are here, read on with me and make sure you don’t waste these few minutes (even if you waste it, it will make a difference to you) idea), without further ado, everyone, sit tight, fasten your seat belts, and let’s start the train! ! !

Source of inspiration

First of all, let me briefly introduce myself. I am actually a relatively bad front-end developer, or I am not satisfied with the status quo (web development). I usually like to develop some weird development tools, or learn some cross-end development (electron). , develop a chrome plug-in, and like to learn skills other than development, automated testing, etc. After a while of messing around, I am still doing nothing, with no great achievements, and I continue to do the work to support myself. All for these few taels of broken silver,

Suddenly one day I suddenly had the idea to do ete testing. Although it can ensure the stability of the project, its disadvantage is that it requires learning costs to get started, and the maintenance cost is relatively high. Every time the ID of a page is modified during development, it may cause the entire automation The script needs to be rewritten, which is why automated testing is so difficult. Automation can only be afforded by big manufacturers (the funder’s father). It would be great if small factories can have enough development (more Or even develop and test it yourself). (Disclaimer: the above is just my personal opinion, any errors are purely the author’s misjudgment)

Record test script

I just thought why can’t the recording script be automated? I checked the automated testing tools on the market and found that Selenium can automatically record scripts, but Selenium cannot make assertions. You still need to understand the code and add assertions manually. Although this is available, it still cannot satisfy code-free customization. The cost of testing scenarios is quite high. I thought about whether the chrome plug-in can record the operation scenarios of each step. As for assertions, you can select assertion conditions through the right-click menu of the mouse. If this is the case, will there be no need to modify the test cases? Based on this idea, I started to verify, globally monitor mouse operation events through js injection, obtain user operations, and then generate a simpler json file from the recorded script. You only need to understand the meaning of each key to modify the script. Isn’t it super simple! If you still don’t understand the code, it doesn’t matter. Just delete the previous test script and record it again. It won’t waste too much time. So easy!

Code snippet

[
{
"active": true,
"audible": false,
"autoDiscardable": true,
"discarded": false,
"favIconUrl": "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg",
"groupId": -1,
"height": 750,
"highlighted": true,
"id": 83924930,
"incognito": true,
"index": 0,
"mutedInfo": {
"muted": false
},
"pinned": false,
"selected": true,
"status": "complete",
"title": "Just search on Baidu and you will know",
"url": "https://www.baidu.com/",
"width": 1511,
"windowId": 83924929,
"action": "start",
"indexNum": 0,
"date": 1683204259189,
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
"isMobile": false,
"hasTouch": false,
"deviceScaleFactor": 2,
"type": "start"
},
{
"x": 428.5,
"y": 188.3984375,
"url": "https://www.baidu.com/",
"date": 1683204265653,
"height": 44,
"xpath": "//*[@id="kw"]",
"width": 550,
"value": "",
"clientX": 767,
"clientY": 204,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 1,
"innerHtml": "",
"localName": "input",
"localNameType": "text",
"type": "click"
},
{
"x": 135,
"y": 17,
"url": "https://www.baidu.com/",
"date": 1683204275609,
"height": 38,
"xpath": "//*[@id="kw"]",
"width": 471,
"value": "Hello",
"clientX": 533,
"clientY": 38,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 3,
"innerHtml": "",
"localName": "input",
"localNameType": "text",
"type": "change"
},
{
"x": 725,
"y": 15,
"url": "https://www.baidu.com/",
"date": 1683204275760,
"height": 40,
"xpath": "//*[@id="su"]",
"width": 112,
"value": "Baidu",
"clientX": 799,
"clientY": 23,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 4,
"innerHtml": "",
"localName": "input",
"localNameType": "submit",
"type": "click"
}
]

key

td>

key	Description
url	Currently opened URL address information
x	Get the X-axis coordinate of the dom position of the current operation
y	Get the Y-axis coordinate of the dom position of the current operation
width	The width of the currently recorded browser or get the current The width of the dom being operated
height	The height of the currently recorded browser or getting the height of the dom currently being operated
xpath	Get the unique address of the DOM currently operated on
selector	Get the DOM currently operated on Path information
clientX	Get the X-axis distance between the currently operated dom and the browser viewport
clientY	Get the Y-axis distance between the DOM of the current operation and the browser viewport
type	Get the Y-axis distance of the current operation DOM operation types click, change, scrollWin, load, dbclick
date	DOM operation entry time of the current operation
iframe	Whether the current webpage has an iframe address embedded
indexNum	The index of the current test case
scrollTop	If the type is triggered as scrollWin, the up and down position of the scroll needs to be recorded
scrollLeft	If the type is triggered as scrollWin, the left and right positions of the scroll need to be recorded

Did you suddenly feel that it was very simple and you could implement an automated testing tool yourself? I was deceived by this illusion. It is not difficult to implement the script recording function. What is difficult is how to implement the customized test playback function? How to make it work out of the box (cross-terminal)? How to solve the problem of nested iframe search in DOM? How to store the script? How are test results generated? A series of big questions. . . . In order to realize this naive idea, I also went crazy. As long as it is not business development, I like to specialize in research. Who said that I am a front-end developer who is not doing my job properly?

Automated testing

Now that the test script has been recorded, how to run automated testing? This is a problem. Although it is not difficult, we don’t want to use a too troublesome startup method. In order to meet this condition, we need to develop a tool that can be used out of the box and supports cross-terminal support. Speaking of which, electron seems to be a good choice. My previous idle work seems to have come in handy, so let’s develop an automated testing tool based on electron. Just import the test script into the tool and click a button to run the test automation. Do you feel that automated testing is so simple, and the generated tests are The report allows you to see the test results at a glance. In order to facilitate the maintenance of test case scripts, the tool supports drag and drop, grouping, radio selection and other functions to facilitate you to test as you like. If you still want to push messages, it does not matter, you can pass Configure Feishu and DingTalk message push to ensure that you can grasp the test status anytime and anywhere. Even if your online projects are running normally, you can also run automation through scheduled tasks. It is also good as an online project monitoring platform! ! !

Test playback flow chart

Through the test script traversal operation, the type type of each test case is simulated to play back ‘click’, ‘change of text box’, ‘mouse scroll’, ‘and browser advancement’, Back’, ‘refresh’, ‘tap page switching’ and other operations can achieve the results of test automation. Finally, the collected test result information is summarized to generate a test report, and the automated test results are achieved. It seems that it is easy to implement. Quite interesting

Automation tool interface

If there was a beautiful test interface, would it be more pleasing to the eye when testing? I still have to find a beautiful UI girl to help design one (have I had the opportunity to communicate with the girl), and I have the prototype of a test automation tool. The ugly interface is not the UI girl’s fault, but the development and implementation. Not good.

Summary

An automated testing tool was implemented in this way. It seemed simple and easy to implement. I worked on it for two years (the technology was still too bad). In order to achieve more perfect functions, I worked overtime and stayed up all night. I’ve seen Shanghai at 4 o’clock in the morning, heard the early bird chirping, and the skills I’ve learned over the years that are not about doing my job have finally been fully reflected in a project. For the first time, I feel a sense of accomplishment other than development, and I don’t feel overwhelmed by the skills. , it will be reflected one day. If the front end can’t sit anymore that day, I believe I can still grab a bite to eat in terms of testing, right

Take action, it’s better to be on the road than to wait and see. In the future, you will definitely thank yourself for working hard now! If you want to learn and improve but can’t find the information and there is no one to answer your questions, please join the group in time: 786229024. There are various test and development materials and technologies in which you can communicate together.

Finally: The complete software testing video tutorial below has been compiled and uploaded. Friends who need it can get it by themselves[Guaranteed 100% Free]

Software testing interview document

We must study to find a high-paying job. The following interview questions are the latest interview materials from first-tier Internet companies such as Alibaba, Tencent, Byte, etc., and some Byte bosses have given authoritative answers. After finishing this set I believe everyone can find a satisfactory job based on the interview information.

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Python entry skill treeHomepageOverview 386,678 people are learning the system