H5 page test summary

Foreword

In recent projects, small contact with more testing on page H5, H5 test page in addition to the business logic functional testing, test methods other parts of the base can be generic, here some general tests for the H5 page The method summarized to others.

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 (page beautify the most important piece);

JavaScript: interactive performance of your pages, such as responding to user mouse events; it hopes to reduce the browser for a rich network application services require plug-ins (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 and choose Paste (Android / iOS), it is the H5 page appears;

2) another horizontal screen vertical screen switching, adaptively, and the layout does not mess, usually also belongs H5 page;

3) H5 page on the PC side is accessible, chrome best support for H5, the test function can test at the PC side 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 requirements of a particular service may be;

2.2 page elements to test UI page UI aspects including text, image and page layout and other tests;

Text: consistent style, spelling, punctuation unified, line displays as a president is a full-text display, whether the picture is consistent with the text, refresh the page text display if omitted;

Photo: 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: adaptation according to different screen and resolution; page layout: whether the adaptation text of a page picture screen, the overall layout is reasonable;

Embedded links: empty link, refresh the data to show whether the link; links to jump correctly;

2.3 page actions

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) loading the page turning page encountered, a note or a case where the content of a plurality of pages; page data is loaded, on follow-up data is correct page request; ps: Note that in the fast operating scenario, the requesting pages are not in ascending order, whether the request corresponds to a 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) floating layer page for some pages floating layer to do, such as maps, product classifications and other floating layer, pay attention to whether the following pages you can see it after dragging, drag the edge if there are blank;

5) page prompts weak network, the data loading is slow, if 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 after an operation related to the lock screen page; retreated to the background, in the foreground and then exhaled again show;

2.4 Interface Testing

1) the process returns Interface: The request is successful, and returns the data, the interface returns the data test various scenarios - returned desired interface data are consistent; parameters into the interface boundary values ​​of the check; fault tolerance checking interface, such 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: Focus first screen page load time; call interface data returned time, too slow will affect the user experience;

Related Resources: 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;

Data Usage: For some does not change the picture, things such as game animation picture, does not need every request, do local cache; if made when more data pages to load.

2.5 Network Testing

Network: WiFi, 4G, 3G, 2G;

Network Anomaly: weak network, disconnection; network handover;

2.6 Adapter test H5 page requires adaptation of content:

HD picture adaptation; font size adapter; fit the width of the page layout;

Horizontal and vertical screen adaptation; consider adaptation factors: different screen size and resolution models be adapted;

Different platforms iOS and Android adaptation;

Screen horizontal and vertical screen adaptation;

Day 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; how to ensure effective update after the second release;