The front-end quick explode

  • Goodbye Edge, Microsoft has officially announced that the Microsoft Edge browser will move from the EdgeHTML kernel to open source Chromium (Blink + V8),ChakraCore JS engineIt will continue to be open source and used in other projects, with a preview expected in early 2019. Mozilla CEOPublished an articleWhoosh: From a business perspective, Microsoft’s decision may make sense, but from a user perspective, it could be a disaster, leaving web infrastructure like the browser in the hands of one company would be terrible.🔗

    Comments: Losing competition means losing a choice. It is worrying how much voice Edge will have after joining Chromium, and Opera may be a precedent.

  • Puppeteer is a Headless Chrome wrapper that now supports Firefox.🔗

    Comments: Supporting more browsers will make testing easier.

  • Chrome 73 developer tools has added Logpoints to quickly print messages from the console.VSCodeSimilar functionality was supported earlier.🔗

    Comments: It’s time to say goodbye to console.log.

  • Babel 7.2.0 supports Private Instance Methods in the Class Field specification and Private AccessorsTo support. Since Chrome has been implemented before, the specification has officially entered Stage 3.🔗

    Comments: It was the best of times, it was the worst of times! Hax was specially invited to Alibaba last Friday to share in detail the pros and cons of the specification.

  • Safari Technology Preview 71, released today, enables important features such as Web Animations, Intersection Observer, and CSS by defaulttext-decorationAttribute prefix.🔗

    Comments: Safari is trying not to become the new IE6 🐶

  • The 13th D2 Front-end Technology Forum will be opened in Hangzhou on January 6, 2019, and you can buy tickets by group at present. 🔗

A good Demo

  • Password prompt box to drive the drawing

  • Christmas Progress bar

Topic: Front end automation testing

Testing is an integral part of a complete r&d system, and the front end is no exception. CSS changes may lead to page dislocation, and JavaScript changes may lead to functional defects. Due to the nature of front-end GUI software, the implementation of front-end automation testing is not extensive despite the endless tools in the testing field, and many projects are still dominated by manual testing. This article is a review of front-end testing related solutions.

plan

Let’s take a look at what front-end testing might involve:

  • Basics, unit testing, end-to-end testing, integration testing, visual testing

At present, the most common front-end automation test schemes mainly focus on the unit test and integration test phase, realizing file monitoring and efficient and fast test execution:

  • An overview of front end automation testing

Pixel comparison and DOM structure comparison are adopted:

  • Some thinking and exploration of early automated testing
  • Visual regression testing

React = Jest + Enzyme

  • Unit test the React project using Jest + Enzyme
  • React vs. Redux test strategy

tool

An overall review of testing tools at the beginning of 2018:

  • An Overview of JavaScript Testing in 2018

Karma is a framework currently used in the process of Magix automated testing:

  • The past and present of the Karma testing framework

    The advantages of Karma are that it can integrate most of the major test frameworks and front-end libraries through plug-ins and configurations, easily execute test cases in a multi-browser environment at once, and integrate test coverage generation, generate page coverage reports and export coverage report data in various forms. Its disadvantage is that it is not a common form to build the test page environment and load the resource file, and there will be a lot of inconsistency with the expected situation when building the environment at the beginning, and the configuration is not intuitive.

Cypress is a relatively comprehensive front-end E2E testing framework that can run in a multi-browser environment and intercept mock interface requests to simulate user behavior:

  • Cypress for front-end E2E testing

This issue editor: @Yisi, review: @Chenghu, special contribution: @Yiming first address: zhuanlan.zhihu.com/mm-fe