Charles Mock Test Summary

Reprint: http://www.jianshu.com/p/03081c9d15591, background

The test has a problem:
1, the test environment interface is not stable
2, the business system does not exist in isolation, too many related parties, and the associated systems often appear unstable situation
3. No mock server tools available at the moment
4, the interface does not mention the completion of the test, front-end testing early intervention
Effect:
Test dependency data, dependency interface blocking leads to test deferral, dry time cost labor costs
Solution:
The mock test is introduced, and the test child shoe can begin to test the data by the interface document when the backend interface is not ready, and the test will not wait for the development, and it can also develop the tune-up and test. In this way, the development self-test stage can be carried out early, so that the timing of the discovery of defects in advance, to facilitate the entire product app test coverage and product project Progress Assurance

2, environment configuration and preparation 2.1, installation of Charles and some configuration item description

Go to Charles's official website (http://www.charlesproxy.com) to download the latest version of the Charles installation package, which is a dmg suffix file. When opened, drag Charles to the application directory to complete the installation.

• 2.1.1 Set Charles as a system Agent

Charles did the marshaling by setting himself up as a proxy server, so the first step to using Charles was to set it up as a proxy server for the system.

After you start Charles, the first time Charles asks you to give it permission to set up the system agent. You can enter the login password to grant Charles this permission. You can also ignore the request, and then, when you need to set up Charles as a system agent, choose "Proxy", "Mac OS X Proxy" in the menu to set up Charles as a system agent. The steps are as follows:

1、打开Charles程序* 2、Mac连接上网络paictest,查看Mac电脑的IP地址：系统偏好设置->网络就可以查看到了，比如我的ip地址是：172.16.0.238* 3、将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。* 4、要截取 iPhone 上的网络请求：进入当前wifi连接paictest(Mac在一个局域网内)，设置HTTP代理Group，将服务器填为上一步中获得的IP，即172.16.0.238，端口填8888.* 5、打开 iPhone 上的任意需要网络通讯的程序，就可以看到 Charles 弹出 iPhone 请求连接的确认菜单（如所示），点击 “Allow” 即可完成设置。

After that, you can see a steady stream of Web requests appearing in Charles's interface as shown (because of the part of the business involved, mosaic).

NET grab packets. jpeg

• 2.1.2 Installation Certificate

If you need to intercept the analysis of HTTPS protocol related content. Then you need to install Charles's CA certificate. The following steps are described.

1, first we need to install the certificate on the MAC computer. Click on the top of Charles menu, select "Help", "SSL proxying", "Install Charles Root Certificate", then enter the system's account password, you can see the added certificate in KeyChain 。

Note that even after the certificate is installed, Charles does not intercept HTTPS network traffic by default, and if you want to intercept all HTTPS network requests on a site, you can right-click on the request and select SSL Proxy as shown in:

SSL Proxy Setting.png

In this way, all SSL requests for the Host can be intercepted.

2. Interception of Https communication information in mobile devices

If we need to intercept the HTTPS protocol communication on IOS or Android, we also need to install the appropriate certificate on the phone. Click on the top of the Charles menu and select "Help", "SSL proxying", "Install Charles Root Certificate on a Mobile Device or Remote brows Er "and then you can see the simple installation tutorial that Charles pops up. After setting up Charles as Agent on the device, access the address in the mobile browser: HTTP://CHARLESPROXY.COM/GETSSL
You can open the interface of the certificate installation, after the installation of the certificate, you will be able to intercept the phone HTTPS communication content. However, it is also important to note that Charles does not intercept by default, and you also need to right-click on the network request you want to intercept and select the SSL proxy menu item.

3. Component Mock test: EG:XX App Login Service 3.1 Edit network request data Learn more

Based on the specific requirements, Charles provides MAP functionality, Rewrite functionality, and breakpoints functionality, all of which can be used to modify the server's return content. The functional differences between the three are:
The MAP feature is suitable for long-term redirection of some requests to another network address or local file.
The Rewrite feature is suitable for some regular substitution of network requests.
breakpoints function is suitable for making some temporary changes.

3.1.1 Debugging network requests for different URLs

In order to debug the interface of the server, we need to repeatedly try different parameters of the network request. Charles makes it easy to provide modification and re-sending of network requests. Simply right-click on a previous network request and select "Edit" to create an editable network request. As shown below:

We can modify any information about the request, including the URL address, port, parameters, etc., and then click "Execute" to send the modified network request (as shown).

Edit network request. png

Charles supported us to modify and send the request several times, which is very convenient for us and the server-side debugging interface

3.1.2 Overwrite the different exception conditions returned by the server interface

For example: There is an order status interface Order_state, has expired, has lapsed, has been paid, to pay, canceled, to be audited, and so on 10 states return, if there is no mock, we need to actually build 10 state of the order data, Even to modify the database Order field status to see the front-end order display. Using the mock method, we can use some tools such as the Charles break point, intercept the response JSON data returned by the interface, and do some simulations:
The order interface has a server error or the app crashes when the system is busy;
The various states of the order interface are displayed on the front of the overlay test;
Order status empty when the front end how to display the coverage test;
When the order data is abnormal, how the front end displays the overlay test,
The order interface request timed out and so on and so on anyway want to return on what to simulate what to return.

3.2 Simple Small example: XX app login login mock Test 3.2.1 Install test Package

Open the phone, connect the computer to install the account opening Components app success, click the app to launch success, login success, moudle name input module name (Xxbanklogin into the XX app login process, using Charles Grab bag, as follows

Log in. jpeg3.2.2 login test Mock most basic practice breakpoints method Practice process:

Right click on the URL of the charless to mock data, pop-up list selected breakpoint, to click two times Excute to complete an HTTP request, because Charles's breakpoint feature provides the ability to modify HTTP request and Response opportunity to map local files

First understand the login interface definition:

• Login interface usually has logon time-out, operation time-out, login is pushed off the line, login system busy, account and password errors, account lockout, account decryption failure and other situations

The response request JSON record for each interface (editable modification):

There are generally two ways to handle this option:
One is to set the breakpoint directly in the Charels, request the corresponding interface when the edit response inside the JSON format of the relevant data, click Excute Perform a mock request submission
Second, the JSON data of all the interfaces is saved in JSON format in a sublime text, data management, finally using the import and export function of Charles Map rules, by clicking the menu Tools→map Local, click Export in the Popup interface

The Log on login interface returns a JSON record as follows:

• 1. Successful Login

  {"code": "000000","data": {由于涉及到业务信息，部分data信息隐藏"status": "0"},"msg": "成功"}

• 2. Operation Timeout

{    "code": "030801",    "msg": "操作超时"}

• 3. The log-in system is busy

{"code": "000001","msg": "系统繁忙，请稍后再试！"}

• 4. Login timeout

{"code": "000002","msg": "登录超时！"}

• 5. Log out of the line

{"code": "000004","msg": "账户在另一台设备已登录，当前登录被挤下线！"}

Charles Mock Test Summary