Shulou(Shulou.com)06/02 Report--

As Meituan Dianping has more and more business and a larger R & D team, the demand for test phones has increased significantly. This is a large expense for the company, but the existing test mobile phone resources are unevenly distributed and the utilization is very limited, which makes it difficult for each team to achieve multi-model coverage in the process of development and testing. How to make rational and efficient use of these test mobile phone resources is a difficult problem in front of us.

The existing scheme

In order to solve these problems, some tools or platforms for mobile phone management and online debugging have emerged in the industry. The more common ones are:

OpenSTF

Remote real machine debugging of Baidu MTC

Testin's Cloud reality Machine

Cloud telephony of Tencent WeTest

Remote real phone rental of Ali MQC

OpenSTF is an open source project, and most of the other platforms are based on the principle of OpenSTF. Therefore, we have conducted an in-depth study of the OpenSTF project.

Problems encountered

We first built it according to the official scheme of OpenSTF and applied it on a small scale, but gradually we found some problems with it:

There are too many modules and tightly coupled, so it is difficult to decouple. Each modification needs to update all modules, so it is difficult to develop iteratively quickly.

Some of the technical selection lags behind. Due to the early emergence of OpenSTF, some technologies have lagged behind the current mainstream. For example, OpenSTF front end chooses AngularJS 1.0 for development, which lags behind other popular frameworks in ecological chain. In database aspect, it chooses non-relational database RethinkDB, which is weaker than relational database such as MySQL in data calculation and performance, at the same time, RethinkDB data is less, so it is not easy to develop and maintain.

OpenSTF screen image transmission is carried out by means of single picture transmission, and the picture quality can not be adjusted by users. In practical applications, the bandwidth is very high, in the case of poor network, there will be serious stutter phenomenon, the experience is very poor.

Our plan

Architecture design

According to the needs of the business scenario and absorbing the advantages of OpenSTF structure, we adopt the modular design scheme of Agent/Server model. The functions of the main modules are described below:

Agent module. The Agent module is similar to the provider of OpenSTF, which is deployed on the server or on the user's computer. Agent connects the real mobile phone, and dynamically proxies the screen image of the phone to the Websocket server through Websocket, and then transmits the message through the message center.

Server module. Server is used to centrally manage and dispatch mobile phones. Different from OpenSTF structure, our Server side consists of Web server, Websocket server, dynamic proxy and message processing service. Server dynamically proxies users' access to the corresponding Web server and Websocket server, and delivers messages to the message center through the message processing module to realize the interaction between users and Websocket mobile phones.

Data storage module. The data storage module is used to save the data of the whole platform, such as the status of the mobile phone, user usage records and so on. The data storage module consists of a MySQL database and a RPC service. Server no longer reads and writes the database directly, but reads and writes data through a RPC service.

Message center. Similar to the triproxy function of OpenSTF, it is the hub for connecting the mobile phone and Server. The message center mainly deals with the operation of the screen and the status change of the mobile phone.

Through modular design, the project structure is clearer than OpenSTF. The following is the design of the whole system:

Advantages of Architecture

In the Agent module, we directly reuse most of the provider functions of OpenSTF, including minicap, minitouch and so on. On this basis, we also extend some of the missing features of OpenSTF, such as:

Secondary development is carried out on the basis of provider to support picture quality / frame rate adjustment (described in more detail below).

Join the health detection function to check whether the mobile phone network is normal, whether a network proxy is set up, and so on.

Add the Inspector function to facilitate access to the UI control tree (described in more detail below).

The version of Agent is distinguished so that it is convenient for the web side to show and hide the corresponding functions according to different versions of Agent.

In the Server module, we introduce the mechanism of dynamic agent, and redevelop the Web part, which is implemented by Vue 2.0 + iView, and the database uses MySQL.

Compared to the native OpenSTF architecture, it has the following advantages:

The degree of module coupling is low, and the development and deployment are more convenient. OpenSTF not only has a large number of functional modules, but also has a tight code coupling, so it is very difficult to carry out secondary development and deployment on this basis. The whole project is divided into four modules: Server, Agent, message center and data storage. The functions and code of the four modules are independent, basically no coupling relationship, support for rapid iterative development, deployment is also very convenient.

The front-end framework is more mainstream and has low development and maintenance costs. OpenSTF front-end is implemented using AngularJS 1.0, AngularJS 1.0 has been in the abandonment stage, a variety of third-party components have basically stopped supporting, the community and ecology of AngularJS 2.0 is not mature, but we have adopted the Vue 2.0 front-end framework, Vue 2.0 is relatively mature, and there have been a large number of applications on the Meituan side, which can quickly develop high-quality Web functions.

The database has the advantages of strong performance, flexible design and convenient maintenance. OpenSTF uses RethikDB as the database, RethikDB is a NoSQL database, it has many shortcomings, such as poor performance when dealing with a large amount of data, lack of data, troubleshooting and database maintenance are very difficult. However, we use MySQL database to solve these problems, and realize the separation of Server module and data reading and writing, so that when updating the database table structure, there is no need to modify the server code at the same time, as long as we ensure that the interface format of RPC service is consistent, it is more convenient to develop and maintain.

In addition to these basic functions, we have also developed some features, which we will describe in detail below.

Characteristic function

Combined with client automation

In order to make rational and efficient use of test mobile phone resources, we have combined with client automation, mainly in two aspects:

Deeply integrated with the cloud testing platform within the group. Deploy Agent code on the server node of the cloud testing platform to provide automation process display and remote debugging functions for the creators of the automation task of the cloud testing platform, and open the idle mobile phones of the cloud testing platform to more people to use.

Open API. We have opened some API to ordinary users for users to query mobile phone status, occupy mobile phones, connect adb debugging, and so on. Users can use scripts to call API, and then conduct automatic testing directly on the mobile phones of the platform.

Reservation function

When a mobile phone is busy, the user must wait for the mobile phone to be idle before using it. Because the idle time of the mobile phone is uncertain, it will bring great inconvenience to the user. In order to solve this problem, we have developed a mobile phone reservation function, in which users can book a busy phone, automatically take 15 minutes for the reservation user when the phone is idle, and notify the reservation person through instant messaging.

Picture quality adjustment

The core of the remote debugging platform is to obtain the screen image in real time. Because the screen transmission needs a large network bandwidth, the stutter phenomenon will occur in the case of poor network. Therefore, we have done some fluency optimization for different networks, here are some of the details.

The principle of screen capture is to take high-speed screenshots through minicap, up to 60 shots per second, and then display these screenshots on Web. Therefore, we consider to optimize the usage of network bandwidth from two aspects. The first is to adjust the quality of screenshots. Minicap itself supports adjusting image quality (OpenSTF has a fixed compression ratio of 80%). The key codes are as follows:

Var rate = Number (match [6])

If (rate > 2 & & rate

30) {

Options.screenJpegQuality = 80

} else if (rate > 15) {

Options.screenJpegQuality = 50

} else {

Options.screenJpegQuality = 20

}

FrameProducer.restart ()

Framerate = rate

}

The second is to adjust the number of pictures sent per second, that is, the frame rate. We can control the number of pictures sent on the Agent side. The key codes are as follows:

# first modify the frame rate sending part:

Function wsFrameNotifier (frame) {

If (latesenttime = = | | Date.now ()-latesenttime > 1000/framerate) {

Latesenttime = Date.now ()

Return send (frame, {

Binary: true

})

}

}

# add the code to adjust the frame rate:

Case 'rate':

Var rate = Number (match [6])

If (rate > 2 & & rate < 100) {

Framerate = rate

}

Break

So, how much can the frame rate and image compression ratio be adjusted to meet the needs of different network environments? Let's first look at a set of data:

Picture compression ratio picture size 100%69.82KB80%46.78KB50%41.87KB20%37.84KB10%35.84KB

In the table, the image compression experiment is done with minicap. From the data, we can see that when the image quality is reduced to 80%, the image size decreases significantly, but the picture quality does not decrease significantly. Continue to reduce the quality of the picture, and the reduction of picture size is limited. Let's take a look at another set of data:

Frame rate picture compression ratio actual traffic 60100%4.02M/S6080%2.74M/S6050%2.41M/S3080%1.43M/S3050%1.22M/S3020%1.10M/S1550%0.63M/S1520%0.55M/S1510%0.52M/S

The table shows the actual traffic data generated by various combinations of frame rates and compression ratios.

From the data, we can see that under the combination of the highest frame rate and compression ratio, the traffic reaches 4M/S, while when the compression ratio is 80%, the traffic decreases to 2.7M/S, which is very obvious. Taking into account the actual network situation, we take 60 frames, 80% compression as a high-quality option.

When the image quality is reduced from 80% to 50%, the picture size does not decrease significantly, so reducing the frame rate becomes a good choice. When the frame rate is reduced to 30 frames, the traffic of 1.2M/S is reduced by half, and the traffic of 30 frames can be used in most network conditions, and 30 frames can also ensure the fluency of operation, so 30 frames and 50% compression ratio become the choice of image quality.

Low picture quality is mainly to ensure normal use in a poor network environment, and the traffic of 500K/S is a red line. We use 15 frames and 20% compression ratio as the option of low image quality, which results in low image quality and frame rate, but ensures a basic user experience.

In addition to reducing the traffic of mobile phone screen image transmission by reducing picture quality and frame rate, compressing images into video transmission using H264 and other coding is also an effective way to reduce traffic, compared with pictures, the image compression ratio will be higher, and the user experience will be better. However, the principle of image compression coding is more complex, and the related technologies are still being studied.

App Mock

Package grabbing is often needed in the process of App testing. In general, we can do this by modifying the WiFi agent and then using the package grabbing tool. However, the efficiency of doing so is relatively low, and it is very inconvenient to switch multiple tools. With the help of the group's Mock platform, we have developed an one-button Mock function, which can quickly complete the Mock operation of the corresponding App. The advantage is that we can view the requests issued by App while operating App, which greatly improves the efficiency of testing.

App Inspector

The App Inspector function allows users to view the page control tree and page elements while using the real machine on the platform, and supports Xpath, which makes it more convenient and efficient to find page elements, which provides great convenience for UI automated testing.

We implement this function with Uiautomator. The basic principle is to write a Uiautomator use case to get the Hierarchy of the current page, and then package the use case into a JAR and put it on the agent side. When the acquisition control tree is triggered on the Web side, Agent pushes the JAR package to the phone and runs it, and a XML file is generated on the phone side. Then use the cat command to get the XML content and parse it at the front end. The use case core code is as follows:

Public class launch extends UiAutomatorTestCase {

Public void testDumpHierarchy () throws UiObjectNotFoundException {

File file = new File ("/ data/local/tmp/local/tmp/uidump.xml")

UiDevice uiDevice = getUiDevice ()

String filename = "uidump.xml"

UiDevice.dumpWindowHierarchy (filename)

}}

Of course, you can also use the adb command to get Hierarchy:

Adb shell uiautomator dump / data/local/tmp/uidump.xml

However, dynamic pages, such as video playback pages, cannot be obtained in this way.

Data report

In order to better understand the operation of the platform, we do detailed data statistics, mainly from the number of use, use time, number of equipment, use distribution and other aspects. At present, we manage nearly 300 mobile phones, with an average of more than 500 R & D personnel using our platform every month, using our platform 280 times a day for a total of more than 60 hours a day.

Other minor functions

In addition to the above major function points, we have also made some intimate small features, such as: checking whether the mobile phone network has set up a proxy, checking the installed application version and installation time of the phone, quickly installing the latest version of the test package, supporting Schema jump in App, and so on. These small functions save a lot of time for R & D personnel and improve their work efficiency.

Future planning

IOS mobile phone support

At present, the cloud phone platform only supports Android mobile phones, and the support for iOS mobile phones is under way. We have initially completed the development of the main functions and are expected to be online soon.

Product optimization

We plan to continue to expand the product features, such as support for Log log display and performance data collection. At present, the Yunzhen platform has been running smoothly in Meituan Dianping for more than two years, and we will continue to iterate the version and polish the products to provide a better experience.

A brief introduction to the author

At the beginning of the east, the person in charge of Dianping platform quality tool group. Seven years of testing and development experience in the Internet industry, and joined the former Dianping in 2015. Has led the development of Yunzhen machine platform, unit test platform, web security experimental platform and other projects, committed to using tools to improve the efficiency of the R & D team.

Li Shuai, Dianping Senior Test Development engineer. Joined Dianping in 2015, mainly responsible for the development of Yunzhen platform and the testing of the underlying components of the client. Keen to delve into the cutting-edge technologies in the field of testing, and promoted the landing of a number of new technologies.

[this article is reproduced from the official account of Wechat of Meituan's technical team. For reprint authorization, please contact the original author]

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.