Tencent cloud technology community – Gold digging home page continues to present cloud computing technology articles, welcome your attention!

Author: Mo Zhuoying

background

I believe that the students who have done front-end development know that front-end testing not only involves functional testing, but also needs to consider interface style testing, multi-browser compatibility testing and performance testing. This article mainly discusses and analyzes the current situation of front-end testing, and discusses the current popular testing tools, the next article will introduce the use of tools

Front-end test classification

The front-end test is mainly divided into three directions, and these three directions are also divided into many small directions. Firstly, the concept of each direction is briefly introduced

  • Interface style testing

Fixed interface style test: mainly for the text content unchanged areas, such as the page header, footer, such as structure, content unchanged areas, and the test is generally solved by comparing screenshots. Structure-invariant interface style test: mainly for the structure-invariant areas, such as the news area, such as the structure of the same, content changes in the area, this kind of test is generally solved by DOM element comparison. Computational style testing: For areas where computational style does not change, this type of testing is generally solved by comparing computational style, but this type of testing is not recommended because of the high cost of testing.

  • A functional test

Server data expected test: Tests whether the background can return expected data after users perform certain operations on the front-end interface and submit data to the background. Interface function test: tests whether the expected functions and interface interactions can be obtained after users perform certain interactive operations on the front-end interface

  • Multi-browser testing

Multi-browser testing: based on the interface style testing, functional testing on the basis of different browser testing.

  • The performance test

White screen time: the user enters the URL in the browser until the browser appears at least 1px screen. First screen time: The amount of time it takes to render all elements on the first screen of a user’s browser. Dom ready: The time when certain features of a site are available. Onload: the time when all the resources on the site are loaded and available.

Front-end testing tool

Before getting into the details of how to build visual testing tools, let’s discuss some of the most popular testing tools on the front end

  • PhantomJS

Phantomjs.org/ is a webKit-based server-side JavaScript API. It fully supports the Web without requiring browser support, and it has fast, native support for various Web standards: DOM handling, CSS selectors, JSON, Canvas, and SVG. PhantomJS can be used for page automation, web monitoring, web screenshots, and interface testing, simply by manipulating the browser with JS. Tool testing types: performance testing, functional testing, interface testing. PhantomJS is the core base library for a lot of testing tools, and it does everything you can think of in front end testing. However, PhantomJS is so powerful that it is closer to the native browser, which makes its syntax very obscure.

  • casperjs

CasperJS is a testing tool based on PhantomJS as the kernel. It provides a more easy-to-use API for interface testing and functional testing, and enhances the convenience of testing. CasperJS greatly simplifies the interface of PhantomJS, especially for front-end testing, encapsulating a number of related functions and supporting customized unit test results

  • PhantomCSS

Tool address: github.com/Huddle/Phan… PhantomCSS is based on CasperJS as the kernel, and is combined with eplay.js to compare images at the pixel level, supporting inconsistencies. Tool testability type: interface test. PhantomCSS reinforces the shortcomings of CasperJS image comparison in interface testing, and provides a more user-friendly image comparison interface based on eplay.js.

  • Selenium

Tool address: www.seleniumhq.org/ Tool Description: Selenium is a tool for Web application testing. Selenium tests run directly in the browser, just as real users do. Supported browsers include Internet Explorer (7, 8, and 9), Mozilla Firefox, and Mozilla Suite. The main functions of this tool include: testing browser compatibility – testing your application to see if it works well on different browsers and operating systems. Type of tool testable: multi-browser testing. Selenium, as a multi-browser testing tool, solves the gap of front-end multi-browser testing. But Selenium’s similar syntax to PhantomJS is arcane, and compatibility comparisons between browsers are error-prone. Because pixel-level comparisons between browsers are difficult for standards reasons, it is not recommended to use Selenium for interface comparison testing. Instead, functional regression testing is recommended.

  • Phantomas tool address: github.com/macbre/phan… Performance data collection tool based on PhantomJS. Tool review: Phantomas as performance data collection tools, automation solution to the problem of the daily performance data collection, but the performance optimization of index data needs to be a large sample, more close to the average of the user data, instead of using the hypothesis under the condition of good environment for the performance of the data, so it is recommended to use more Phantomas abnormal performance monitoring, Rather than measuring performance metrics.

Conclusion:

As Internet products become more and more complex, front-end single-page applications, front-end interfaces and front-end functional logic become more and more complex. In order to ensure normal functions, front-end testing becomes more and more important. However, front-end testing will inevitably affect the efficiency of front-end development. Therefore, we will provide an automated front-end test solution to balance efficiency and stability.

Ivweb. IO /topic/55e3e…

Introduction to the Front-end development framework: Angular and React

Has been authorized by the author tencent cloud community released, reproduced please indicate the article source The original link: www.qcloud.com/community/a… Get more Tencent mass technology practice dry goods, welcome to Tencent cloud technology community