Shulou(Shulou.com)06/03 Report--

Teprunner test platform use case writing and other experience responsive upgrade example analysis, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Development content

In the free and open source test platform, teprunner's UI interface should be regarded as the first gradient, BUT, the flaw, in different resolution monitors (such as 13.3 inch small screen laptop) layout of large pop-up window, the performance is not satisfactory. This is the interface for code editing of core functions, such as use case writing and fixture writing, so it is necessary to optimize and upgrade. In addition, there is the problem of scroll bars: vertical double scroll bars and horizontal scroll bars also have an impact on the experience.

Responsive means that the same set of front-end code can be adapted in different browsers (PC, mobile, etc.). Element UI is already a responsive design. The responsive style of this paper is reflected in that the line height of the code editing area is automatically calculated and set according to window.innerHeight.

Upgrade effect display

The left menu bar narrows; add environment variables and fixtures sample code.

The project environment and the new button are displayed on the same line to expand the visual area of valid content.

The addition and editing of fixtures has been changed from pop-up window to sub-routing page, the code editing area is highly adaptive, and only one vertical scroll bar appears.

Eliminate the horizontal scroll bar; reduce the width of columns other than the use case description column; replace the action button text with an icon.

The addition and editing of use cases are changed from pop-up windows to sub-routing pages, the code editing area is highly adaptive, and only one vertical scroll bar appears.

The addition and editing of the results of the use case run is changed from a pop-up window to a sub-routing page, the code editing area is highly adaptive, and only one vertical scroll bar appears.

The addition, editing, and running results of the test plan are also adjusted in the same way.

On the whole, the visual area and operational area of effective information are expanded as much as possible!

Key technical points

The modification file of the frontend code is as follows:

It is more tedious and there is no new knowledge, so we will not explain them one by one here, but choose the key technical points used to review the knowledge:

Template add

Add div to the main page: "$route.name = = 'name'"

Add childrenchild routes to router/index.js

Save localStorage in front of the jump page

When the new page create (), take localStorage

This.$router.push hop routing

Float: left is used for div peer display, and clear: both is used for the following div line feed.

Window.innerHeight gets the screen height

This is the answer to the sample analysis question on the Teprunner test platform case writing and other experience responsive upgrades. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.