Visual front-end Testing

background

I believe that the front-end development of the students know that front-end testing involves not only functional testing, but also need to take into account the interface style test, browser compatibility test, performance testing. This paper mainly discusses 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 major directions, and these three directions are also divided into a lot of small direction test, first of all, simple introduction to each direction of the concept interface style test

Fixed interface style test: mainly for the text content unchanged areas, such as the page header, footer structure, content unchanged area, and testing is generally compared through screenshots to solve. Structural invariant Interface style testing: mainly for the structure of the invariant areas, such as news areas such as the structure unchanged, content changes in the region, such tests are generally through the DOM element comparison solution. Calculation style test: For areas where the calculation style is invariant, this type of test is generally resolved by comparing the calculation style, but this test is not recommended because of the high test cost. Functional Testing

Server data expected test: mainly for users in the front-end interface for some kind of operation, after submitting data to the background, test background can return the expected data interface function test: mainly for users in the front-end interface for some kind of interactive operation, test can get the expected function, interface interactive multi-browser test

Multi-browser testing: Based on the interface style test, functional testing based on the different browser testing. Performance test

Screen time: User browser input URL to the browser appears at least 1px screen. First screen time: The time spent in rendering all elements in the first screen of the user's browser. User-operational time (DOM ready): The time at which certain features of a Web site can be used. Total page Download time (onload): All resources in the Web site are loaded and available time. Front end Test tool

To do good things will benefit its device, in the in-depth discussion if we build a visual test tool, we have to discuss the current front-end popular test tools PHANTOMJS

Tool Address: http://phantomjs.org/Tool Description: Is a WebKit based server-side JavaScript API. It fully supports the web without the need for browser support, its fast, native support for a variety of Web standards: DOM processing, CSS selectors, JSON, Canvas, and SVG. PHANTOMJS can be used for page automation, network monitoring, web screen screenshots, and no interface testing, in simple terms is through JS Operation Browser. Tools can test types: Performance testing, functional testing, interface testing. Tools Reviews: As the core base of many testing tools, PHANTOMJS can be omnipotent, basically in the front-end testing field only you can't think of, but it is because the function of PHANTOMJS is too powerful, closer to the native browser, resulting in its syntax is very obscure. Casperjs

Tool Address: http://casperjs.org/Tools Introduction: Casperjs is based on the PHANTOMJS as a kernel testing tool, for interface testing, functional testing provides a more Easy-to-use API, enhanced testing of the convenience tool can test types: Performance testing, functional testing, Interface Test Tools Reviews: Casperjs greatly simplifies the Phantomjs interface, especially in front-end testing, encapsulates a large number of related functions, and supports customized unit test results PHANTOMCSS

Tool Address: Https://github.com/Huddle/PhantomCSS Tool Introduction: PHANTOMCSS is based on Casperjs as the kernel, and combined with resemble.js image pixel-level comparisons, support inconsistent places. Tool testable Type: interface test. Tools Comment: Phantomcss strengthens the CASPERJS in the interface test, the lack of image comparison, on the basis of resemble.js to provide more user-friendly image comparison interface. Selenium

Tool Address: http://www.seleniumhq.org/Tools Introduction: Selenium is a tool for Web application testing. The selenium test runs directly in the browser, just as the real user is doing. Supported browsers include IE (7, 8, 9), Mozilla Firefox, Mozilla Suite, and so on. The main features of this tool include: Test compatibility with browsers-test your application to see if it works well on different browsers and operating systems. Tool testable Type: multi-browser test. Tools Reviews: Selenium as a multi-browser testing tool, to solve the front-end in the multiple browser test vacancies. But selenium and Phantomjs similar syntax is very obscure, and the compatibility between each browser is more error-prone. Because it is difficult to do pixel-level comparisons between different browsers because of the standard reason, it is not recommended to use selenium as interface comparison test, and recommend functional regression test. Phantomas tool Address: Https://github.com/macbre/phantomas Tools Introduction: PHANTOMJS based performance data collection tools. Tools Reviews: Phantomas as an automated performance data collection tool solves the problem of daily performance data collection, but performance-optimized metrics data requires large samples, more data-close to the user's average, rather than using performance data that is assumed to be in a good environment. Therefore, it is more recommended to use Phantomas for performance anomaly monitoring, rather than performance metrics. Summary:

With the increasingly complex of Internet products, the front end of the single page application, front-end interface, front-end functional logic becomes more and more complex, in order to ensure the normal function, so the front-end test becomes more and more important, but the front-end test will inevitably affect the front-end development efficiency, Therefore, we will provide an automated front-end test solution to balance efficiency and stability issues.