H5 test app test page

H5 page Introduction

Page 1. H5 H5 that is HTML5, the latest version of the Web-side development language, most phones will use the APP page H5 implementations, including PC Web site will also use it to develop implementation. So common Web test points and basic methods can be applied to it. H5 is actually: end mobile Web page. H5 applied in many places, such as the activity of APP topic page, news page, micro-channel public number belong to the article page H5 page, PC or mobile phone browser can access the page directly H5. H5 as a web page the mobile side, has its own advantages, such as its cross-platform development costs are relatively low; at any time on-line updated version, suitable for rapid iteration; be lightweight touch of users, to provide more convenient services . Therefore, in the project, for the on-line iterative update faster page, usually using the H5 page to achieve.

2. technology Broadly speaking, HTML5 including HTML, CSS and JavaScript, including a combination of techniques. HTML: the specific content and structure of the web; CSS: Style pages (beautification pages are most important piece); JavaScript: interactivity web pages, such as responding to user mouse events; it hopes to reduce the browser to the richness of the need for plug-ins network application services (plug-in-based rich internet application, RIA), such as Adobe Flash, Microsoft Silverlight, and Oracle JavaFX needs, and provide more effective to enhance the standard set of network applications.

3. How to identify H5 from a visual point of view, H5 page with APP native page is the same, so the test will often ask a question, this page is not H5 page? How to identify it? In this provided the following methods: 1) basically as long as the view of the press, and then see whether there is a reaction, such as mobile phone vibration (Android), or text appears, select Paste (Android / iOS), it is the H5 page; 2 ) another horizontal screen vertical screen switching, adaptively, and the layout does not mess, usually also belongs H5 page;. 3) on the PC side H5 page is accessible, Chrome support for testing for the H5 best, can function under the PC side to test chrome, you can be tested directly on the phone.

H5 test page

1. Configure the environment in general testing process is completed after the H5 page development, first tested in the test environment, test by re-deployed to the online environment, so the first test phase test environment configuration.

2. Test focus 2.1 business logic test business logic related tests, depending on the specific needs of the business may be;

2.2 page elements UI test page UI including aspects of text, image and page layout and other tests; text: consistent style, spelling, punctuation unified, line displays as a governor the text is displayed full display, whether images and text consistent omitted, Are refresh the page text display; picture: 1) static: size, style; 2) dynamic: the size, style, dynamic map accuracy, transition animation, loading the animation, click on the animation; 3) whether the normal refresh the page picture shows; 4 ) pictures adaptation: according to different screen resolution and adaptation; page layout: whether the adaptation text of a page picture screen, the overall layout is reasonable; embedded links: empty link, refresh the linked data to show whether or not; whether links Jump correct;

2.3 page Operation 1) refresh and return to the page refresh is still in the current page; the user actively clicks if the Refresh button is still in the current page; click to return to the back key, the fallback page whether it is desired page (Andrews physical buttons return; iOS Left slide return , consider the left half slip let go, automatically return to the normal situation if the page is loaded H5); 2) turning the page turning experience loaded, you need to pay attention to the content of one page or multi-page; when the data page is loaded, the follow-up note correct page request data; ps: pay attention to the rapid operation scenario, the request is not in ascending order of the number of pages, whether to issue a request to the corresponding fast operation (such as loading the first page out of time yet still continue to pull-up operation). 3) popups appear on / off the handset testing with special attention to the interaction is friendly, the experience can cause some problems, such as: Click the pop-up layer, will penetrate, affect the popup following pages; 4) for a floating layer page Some pages do floating layer, such as maps, product classification, floating layers, whether you can see it the following page Note after dragging, drag the edge if there are blank; 5) page prompts weak network, the data loading is slow whether there is a corresponding loading tips; when the interface to obtain an abnormality, it is reasonable; if there is jitter page or refresh the page to load new content; 6) mobile phone display pages related to the operation after the lock screen; retreated to the background, in the foreground and then exhaled again show ;

2.4 Interface Test 1) the process returns to the interface: the request is successful, and returns the data, various scenarios test interface returns data - data returned interface is consistent desired; the interface boundary value into a reference checksum; fault tolerance checking the interface, as for the transmission error can handle data type and the like, a decimal integer, etc. in English; request succeeded, but the data is empty; exception request interfaces, the page processing; 2) performance test Interface: page load time: Follow the page the first screen load times; call interface data returned time, too slow will affect the user experience; resources related to: pages with pictures, try to reduce the image; whether compression resources, whether through CDN load. Concurrent server performance: excessive amount of users, server performance is affected; Memory: repeated visits to check for memory-intensive; flow consumption: for some does not change the picture, such as game animation picture, does not need every time something requested to do local cache; if made when more data pages to load.

2.5 Testing Network Network: WiFi, 4G, 3G, 2G ; abnormal network: the network is weak, broken network; network handover;

2.6 Adapter test H5 page requires adaptation of content: high-definition picture adaptation; font size adapter; fit the width of the page layout; horizontal and vertical screen adaptation; consider adaptation factors: models with different screen sizes and resolutions adaptation; different platforms iOS and Android adaptation; screen horizontal and vertical screen adaptation; at night mode adaptation; dark light mode adaptation (iOS13 system);

2.7 safety tests clearly what are delivery channels, whether or not delivery channels have been restricted, whether directly through the url request interception; interface part sensitive information is encrypted transmission and so on; if you can open the URL directly; prevent malicious attacks;

2.8 Buried test Buried inspection data;

2.9 Verification Test on the line on the line: H5 files related to various resources, in the test environment (including advance environment) are generally within the domain, formally launched, the RD link shoes have the resource file (or forgetting the url modified) risk of omission, so be sure to use the on-line environment outside the network and then quickly return to the next;