Using macaca for mobile hybrid automation testing (Part 2)

Macaca

macaca is an open-source automated testing tool developed by Alibaba based on Node.js. It supports native, hybrid, and mobile web. For more information about macaca, please refer to the official website macaca.

How does macaca drive automated testing? In fact, macaca and appium have many similarities in architecture and some application levels.

As a client, we can use different languages ​​to write test scripts. The test scripts follow the webdriver protocol. The client sends an http request to the server started by the test framework. Because the client and server communicate based on http, the client can support different programming languages. The server parses the HTTP request and then calls the UIAutomation library provided by IOS to simulate clicks and other operations. After the operation is completed, the mobile device will return the operation result to the server, and then the server returns the operation result to the client.

?The webdriver protocol was mentioned:

In fact, it is a basic protocol specification. It is precisely because of such a protocol that some automated testing frameworks can use multiple languages ​​to write test scripts. It provides relevant specifications for web page operations, such as element positioning, browser native event operations, and a series of methods for obtaining DOM element attributes. No matter what language you use to write test scripts, you should follow this protocol specification. WebDriver directly controls the browser through native browser support or browser extensions. WebDriver is developed for each browser and replaces JavaScript embedded in the web application under test. Tight integration with the browser supports the creation of more advanced tests and avoids the limitations caused by the JavaScript security model. In addition to support from browser manufacturers, WebDriver also uses operating system-level calls to simulate user input. WebDriver supports all major browsers, as well as mobile application testing for iPhone and Android.

Next, I will take you step by step to use macaca to perform automated testing:

step 1

Install macaca's cli globally. If you think it's slow, try Taobao's cnpm image.

 npm install macaca -g

After the installation is complete, you can enter

 // Check out other features provided by cli
 macaca -h 
 
 //To view the current environment configuration
 macaca doctor 
     
 //Used to start a webdriver server separately
 macaca server 
     
 //Start the test
 macaca run

Now type macaca doctor:

There are two red prompts in the Android checklist, indicating that these two options are not configured. I am taking IOS as an example, and I will ignore these two configurations related to Android. If you are not sure, you can google it. In the IOS checklist: Xcode and ios_webkit_debug_proxy appear.

First you need to install Xcode from the app store. Install the ios_webkit_debug_proxy package globally, which is used to test the webview of ios:

 brew install ios-webkit-debug-proxy

In addition, you need to install ios-driver globally:

 npm i macaca-ios -g

This prepares the basic test suite. Next, you can clone the official example provided by macaca, which includes an IOS app and related test scripts, and refer to the official document to experience the general process:

 git clone https://github.com/macacajs/macaca-test-sample.git --depth=1  

Next, do your own testing:

Because I am a front-end developer, I want to test the webview in native. First, I asked my iOS classmates to help me package an application in .app format and compress it into a zip file. PS: Use debug mode when packaging.

Now that we have prepared the raw materials, let's stop for a moment. To do UI testing, we need to simulate various user operations, so we must know the elements of different interfaces on the native application, just like getting the DOM nodes in HTML. Because macaca provides an API to get different element nodes on the native page through Xpath. Therefore, this method can be used.

macaca provides app-inspector, a tool that uses a tree state structure to view UI layout and automatically generates XPath.

 npm install app-inspector -g

After the installation is complete, start your iOS simulator through macaca-cli and run your application.

Then start the UI inspection tool through app-inspector,

 app-inspector -u YOUR-DEVICE-ID

How to get the UUID:

Command line input:

 xcrun simctl list

This command line will list all your simulator information. There will be codes like XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX, which is the simulator UDID. Select the one whose current simulator status is Booted.

After launching this tool through app-inspector, open the browser address prompted in the command line in Chrome, so that you can see the iOS page opened in native on the browser.

Because I want to test the webview page, all element nodes of the native page are obtained by Xpath through the app-inspector tool, and then a test script is written to simulate the user's operation and enter the webview page step by step.

In the application I tested, the test script from opening the app to entering the webview page to be tested became:

 .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[2]/XCUIElementTypeButton[1]' )
 .click()
 //Username input
    .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeTextfield[1]' )
 .sendKeys(username)
 // Password input
    .waitForElementByXPath( ' //
 .sendKeys( password )
 .sendKeys( '\n' )
 //Login button
    .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeButton[2]' )
 .click()
 //More buttons
    .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeImage[1]/XCUIElementTypeButton[2]' )
 .click()
 .sleep(1000)
    .swipe(200, 400, 200, 100, 500)
    .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1] /XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeCollectionView[1]/XCUIElementTypeCell[10]' )
 .click()
 .sleep(1000)
    .waitForElementByXPath( '//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeScrollView[1]/XCUIElementTypeOther[2]' )
 .click()
 .sleep(1000)

This completes all operations of native entering the webview page.

The next step is the simulation operation of webview. Let's talk about it in the next section.