Hello everyone, everyone should be attracted to click in by such a wonderful title. Now that you are here, please read on with me. Make sure you don’t waste these few minutes (even if it is wasted, it will give you something different. thoughts), let’s not talk nonsense, everyone, sit tight, fasten your seat belts, and start the car! ! !
Source of inspiration
First of all, let me briefly introduce myself. I am actually a relatively good 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, like to learn skills other than development, automated testing, etc. After a while of tossing around, I still do nothing, have no major achievements, and continue to do my job to support myself. It’s all for these taels of silver,
Suddenly one day, I had a flash of inspiration and did the ete test. Although it can guarantee 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, it may lead to the entire automation. The script needs to be rewritten, which is why it is difficult to do automated testing. Automation can only be played by a large factory (the father of the gold master). It is good that a small factory can have enough development (more Or even develop and test by yourself). (Disclaimer: The above is just a personal opinion, if there is any mistake, it is purely the author’s misjudgment)
Record test script
I just thought why can’t we automate the recording of scripts? 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 there are, it still cannot satisfy the customization without code. The cost of testing scenarios is still quite high, so I wondered whether the chrome plug-in can record the operation scenarios of each step. As for the assertion, you can select the assertion condition through the right-click menu of the mouse. If this is the case, is there no need to modify the test case? Based on this idea, I started to verify, through js injection to monitor mouse operation events globally, 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 easy! If you still don’t understand the code, it’s okay, 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": "Baidu, 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 look",
"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"
}
]
Copy Code
key
| key | description |
|---|---|
| url | Currently opened URL address information |
| x | Get the X-axis coordinates of the dom position of the current operation |
| y | Get the Y-axis coordinates of the dom position of the current operation |
| width | The width of the currently recorded browser or get the current The width of the operating dom |
| height | The height of the currently recorded browser or the height of the currently operating dom |
| xpath | Get the unique address of the currently operating dom |
| selector | Get the current operating dom address 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 current operation dom operation type click, change, scrollWin, load, dbclick |
| date | Dom operation input time of the current operation |
| iframe | Whether the current web page has an iframe address |
| indexNum | The index of the current test case |
| scrollTop | If the trigger type is scrollWin need to record the scrolling position |
| scrollLeft | If the trigger type is scrollWin need to record the left and right position of the scroll |
Did you suddenly feel that it is very simple, and you can implement an automated testing tool yourself? I was deceived by this illusion. It is not difficult to realize the script recording function. The difficult thing is how to realize the customized test playback function? How to do it out of the box (cross-end)? How to solve the problem of nested iframe search 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 made me a front-end developer who is not doing business properly?
Automated testing
After the test script is recorded, how to run the automated test? This is a problem. Although it is not difficult, we don’t want to use too much troublesome startup method. In order to meet this condition, we need to develop an out-of-the-box tool that supports cross-end. Speaking of which, electron seems to be a good choice. Then My previous idleness 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 automated test. Do you feel that the automated test is so simple and the generated test? 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, single-selection and other functions, which is convenient for you to test as you like. If you still want to push messages, it doesn’t matter. You can pass Configure Feishu and DingTalk message push to ensure that you can grasp the test status anytime, anywhere. Even if your online project is running normally, you can also automate it through scheduled tasks. It is not bad 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 playback ‘click’, ‘change of text box’, ‘mouse scroll’, ‘and browser’s forward’,’ Back’, ‘refresh’, ‘tap page switching’ and other operations can achieve test automation results, and finally collect the test result information to generate a test report to achieve automated test results, which seems to be implemented. very interesting
Automation tool interface
If there is a beautiful test interface, is it more pleasing to test? I still have to find a beautiful UI lady to help design one (is there a chance to communicate with the lady), and there will be a prototype of the test automation tool. The ugly interface is not the fault of the UI lady, it is the development and implementation It’s not good.
Summary
An automated testing tool is realized in this way. It seems simple, but it is also simple to implement. It has been done for two years (the technology is still too bad). In order to achieve better functions, I worked overtime and stayed up overnight. I have seen Shanghai at 4 o’clock in the morning, and heard the birds chirping early in the morning. The skills I have learned for so many years without doing business are finally fully reflected in a project. For the first time, I feel a sense of accomplishment other than development. , will be reflected one day. If the front end can’t sit still that day, I believe that we should be able to grab a bite of food in terms of testing,
END’s humble strength
Finally, I would like to thank everyone who has read my article carefully. Seeing the fans’ growth and attention all the way, there is always a need for reciprocity. Although it is not a very valuable thing, if you need it, you can take it away: strong>
These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can help you too!
Join my software testing exchange group: 110685036 to get it for free~ (Academic exchanges with fellow leaders, and there will be live broadcasts to share technical knowledge points every night)
Software testing interview applet
The software test question bank maxed out by millions of people! ! ! Who is who knows! ! ! The most comprehensive quiz mini program on the whole network, you can use your mobile phone to do the quizzes, on the subway or on the bus, roll it up!
The following interview question sections are covered:
1. Basic theory of software testing, 2. web, app, interface function testing, 3. network, 4. database, 5. linux
6. web, app, interface automation, 7. performance testing, 8. programming basics, 9. hr interview questions, 10. open test questions, 11. security testing, 12. computer basics
How to get it:
