Section Outline
Ø Introduction to H5 and applets
Ø Hybrid App element positioning environment deployment
Ø Mixed App element operation
Ø Airtest test App
01. Introduction to H5 and Mini Programs
H5 Overview
H5 refers to the fifth generation of HTML, and also refers to all digital products made in H5 language.
The so-called HTML is the abbreviation of "Hypertext Markup Language". Most of the web pages we see on the Internet are written in HTML.
"Hypertext" means that a page can contain non-text elements such as pictures, links, and even music and programs. And "markup" means that
these hypertexts must be marked by the beginning and end signs that contain attributes. By decoding HTML, the browser can
display the content of the web page, which also constitutes the basis for the rise of the Internet.
The reason why H5 can cause such a wide range of effects is that it is no longer just a markup language. It provides a
new framework and platform for the next generation of the Internet, including providing plug-in-free audio and video, image animation, ontology storage and more Cool and important features
, and standardize and open these applications, so that the Internet can easily achieve a desktop-like application experience.
H5 features
The most significant advantage of H5 lies in its cross-platform nature. Sites and applications built with H5 are compatible with PC and mobile, Windows and Linux, Android and IOS.
The local storage feature of H5 also brings more convenience to users. The light application developed based on H5 has shorter startup time and faster networking speed than the local APP, and does not need to download and occupy storage space, which is especially suitable for mobile media such as mobile phones.
And H5 allows developers to create advanced graphics, layouts, animations, and transition effects without relying on third-party browser plug-ins, which also allows
users to enjoy cool visual and auditory effects with less traffic.
Mini Program Overview
A mini program is an application that can be used without downloading and installing. It realizes the dream of an application "at your fingertips". Users
can open the application by scanning or searching. It also embodies the concept of "go away after use", users do not need to care about whether to install too many applications.
Apps will be ubiquitous and available at any time, but there is no need to install or uninstall.
With the saturation of the APP market, most users have developed usage habits, and it is difficult to develop new APPs to survive in the market. In addition, it is an indisputable fact that APP development and promotion costs are high. According to the survey: the download cost of mobile e-commerce APP is as high as 120-200 yuan, and these later stages may not be able to form conversions. The cost of new customers for Internet finance and second-hand car e-commerce apps can easily reach thousands of yuan.
For developers, the development threshold of small programs is relatively low, and the difficulty is not as difficult as that of APPs. It can satisfy simple basic applications, and is suitable for the conversion of life service offline stores and low-frequency applications that are not rigidly needed. For users, it can save time cost and mobile phone memory space; for developers, it can also save development and promotion costs.
Relationship between H5 and Mini Programs
To put it simply, a small program is an application, and the running environment is WeChat (App); H5 is a technology, and the attached shell
is a browser.
The operating environment of H5 is a browser, including WebView, while the operating environment of WeChat applets is not a complete browser, because only
a part of H5 technology is used in the development process of applets.
The window object and document object commonly used in browsers cannot be used in applets, and H5 can be used at will.
02. Hybrid App element positioning environment deployment
How to distinguish between native App and hybrid app
Web app is the easiest to distinguish, open and access it with a browser must be web app
How to distinguish navicat app and hybrid app 1. Turn on the display layout boundary in the
developer options
Each control is framed by each frame, which is the navicat app
3. If each control in some interface in the APP is framed by each frame, and many elements of other individual interfaces are in the middle of a large frame, then this is a hybrid app up.
Hybrid App Environment Preparation
1. uc-devtools.msi
is mainly used to obtain H5 element information of Web app and hybrid app
2. XposedInstaller_V3.1.5.apk
Xposed is a framework that can inherit many functional modules, and these functional modules can be installed without modifying APK Next,
modify the running mode of the APP.
3. webviewdebughook_v5_a5ff1e.apk
enables the webview debug mode of the APP
UC developer tool installation
UC developer tools are installed on the PC (computer)
Installation: Double-click to open uc-devtools.msi, the default fool-style installation
Open: After the installation is complete, search for 'uc' in the start menu, open uc-devtools and
click Settings-->Select Local Devtools.... options
UC developers obtain web app element information
switch to home
Open the browser on the emulator, and you can see the obtained webpage information in the home
UC developers obtain web app element information
Click to get the inspect of the page, and you can view each element in the page in the developer tools tool.
This is the interface we are familiar with for locating elements in web applications
Xposed installation and configuration
Xposed is installed on the device (simulator, real machine) and is mainly used to activate the simulator framework.
Installation: Drag XposedInstaller_V3.1.5.apk to the simulator for installation. After installation, there will be a shortcut on the desktop. Configuration
:
1. Open the installation Ok Xposed, click OK for the prompt message
2. Click Version 89 under Install/Update, select instal, and wait for the download
Xposed configuration
3. After the download is complete, the prompt message requested by the super user, choose to remember forever, click Allow
4. Select restart device in the lower right corner, wait for the simulator to restart
5. After the simulator restarts, enter xposed again, if the xposed frame 89 is displayed version has been activated, the environment is OK
webview installation and configuration
webview is installed on the device (simulator, real machine), and is mainly used to open the webview debug mode of the APP.
Installation: Drag webviewdebughook_v5_a5ff1e.apk to the emulator to install. There is no shortcut on the desktop after installation. Configuration
:
1. Open xposed , click the settings in the upper left corner, select the module
2. At this time, the webviewdebughook we installed in the first step will be displayed under the module, check the webviewdebughook
3. Restart the emulator, this step is very important. After restarting, enter xposed again to check whether the xposed framework version 89 is activated, if not, download, install and restart the emulator again.
03. Mix App element operation
Mixed App element information acquisition
1. Open uc-devtools tool, click Home
2. Open 58.com on the emulator, click Home Economics interface
3. Check if it is recognized in uc-devtools tool, if it is recognized, then OK
4. uc-devtools tool Click the inspect that recognizes the interface
5. Jump to the developer tools tool interface, you can get all the element information
Appium automates process operations for hybrid apps
Case flow:
Click Housekeeping on the homepage of 58.com, click Disinfection on the Housekeeping interface, press the return button twice to return to the homepage, and then click Local Services on the homepage Problem
: The homepage is the original interface, Housekeeping is the H5 interface, and the operation process involves different How to deal with page switching?
Solution:
The App interface has an identifier called context (context), and the context of the native interface is consistent.
Appium provides methods to manipulate context
1. driver.current_context to get the context of the current interface,
2. driver.contexts to get all the contexts and store them in a list
3. driver.switch_to.context(context)
Appium script implementation
context switch error
How to display the H5 interface information obtained by uc tools on the browser, the reason is that Appium has a built-in Google driver, through which the H5 interface element information can be displayed on Google Chrome.
The number behind the uc tools package name shows the version number of Google Chrome, so if the built-in Google driver is inconsistent with the browser version behind the package name, an error will occur.
Built-in driver storage location:
C:\Users\wxy\AppData\Local\Programs\Appium\resources\app\node_modules\appium\node_modules\ap pium
-chromedriver\chromedriver\win
Solution
Just make sure that the built-in Google Drive is consistent with the browser version operating the hybrid App H5 interface.
Google Drive download address: https://npm.taobao.org/mirrors/chromedriver/
04. Airtest test App
AirtestIDETools
Airtest is a UI automation testing tool based on image recognition and poco control recognition produced by Netease.
AirtestIDE is a cross-platform, multi-terminal (Windows, web, android, ios, game) UI automation test editor that supports automated script recording, one-click playback, and report viewing.
Download address: http://airtest.netease.com/
Installation: Unzip and open, find the AirtestIDE.exe file, double-click to open it (including all components)
AirtestIDE tests WeChat applet
Summarize:
Finally, I would like to thank everyone who has read my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, you can take it away if you need it:
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, and I hope it can help you! Partners can click the small card below to receive