Page information analysis method and device, electronic equipment and computer readable medium

Abstract

Embodiments of the present disclosure disclose a page information analysis method and device, an electronic device and a computer readable medium. A specific embodiment of the method comprises: in a walkthrough mode, in response to detecting a selection operation on a target element in a web page, determining attribute information of the target element; in a design draft page of the web page, determining a target layer corresponding to the target element and design information of the target layer, wherein the design draft page is displayed on the same screen as the web page; performing difference analysis on the attribute information and the design information to generate difference information; and generating a walkthrough task according to the difference information. The embodiment proposes a page information analysis method for web applications. The method can intelligently analyze page elements and corresponding layer information and output difference information, thereby helping to improve the design walkthrough efficiency of the page.

Description

TECHNICAL FIELD

[0001] Embodiments of the present disclosure relate to the field of computer technology, and in particular, to a page information analysis method and device, an electronic device, and a computer readable medium. BACKGROUND

[0002] Webpage application goes through many links from concept formation to put into use, in which visual UI (User Interface) design and research and development implementation are indispensable. The webpage effect developed by engineers often has certain differences with the original design draft, and the visual restoration degree is not high. This requires design checking of the webpage page in the testing and acceptance link. The process mainly compares the webpage application and the design draft, and adjusts in time to ensure the restoration degree of the page. SUMMARY

[0003] This part of the disclosure is used to introduce the concept in a brief form, which will be described in detail in the specific implementation part. This part of the disclosure is not intended to identify the key features or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions. Some embodiments of the present disclosure provide a page information analysis method, device, electronic device and computer readable medium.

[0004] In a first aspect, some embodiments of the present disclosure provide a page information analysis method, comprising: in a checking mode, in response to detecting a selection operation on a target element in a webpage page, determining attribute information of the target element; in a design draft page of the webpage page, determining a target layer corresponding to the target element and design information of the target layer, wherein the design draft page is displayed on the same screen as the webpage page; performing difference analysis on the attribute information and the design information to generate difference information; and generating a checking task according to the difference information.

[0005] In some embodiments, the method further comprises: displaying the attribute information of the target element in an element information display area of the webpage page; and displaying the design information of the target layer in a layer information display area of the design draft page.

[0006] In some embodiments, generating the checking task according to the difference information comprises: intercepting an element image of the target element and a layer image of the target layer; and generating the checking task according to the element image, the layer image and the difference information.

[0007] In some embodiments, intercepting the element image of the target element and the layer image of the target layer comprises: determining whether the target element is a dynamic element; in response to determining that the target element is a dynamic element, intercepting a dynamic image of the target element as the element image, and intercepting the layer image of the target layer.

[0008] In some embodiments, the method further comprises: displaying the inspection task in a task display area of the webpage page; and generating corresponding mark information at a preset position of the target element according to a task state of the inspection task, wherein the task state of the inspection task comprises at least one of the following: to be repaired, to be accepted, and completed.

[0009] In some embodiments, the method further comprises: in response to detecting an opening operation on the mark state control in the webpage page, displaying the mark information in the webpage page; and in response to detecting a triggering operation on the mark information, displaying information of the inspection task.

[0010] In some embodiments, determining the target layer corresponding to the target element comprises: determining a layer set in the design draft page that matches the position information of the target element in the webpage page; and selecting a layer from the layer set, and determining the selected layer as the target layer corresponding to the target element.

[0011] In some embodiments, selecting the layer from the layer set comprises at least one of the following steps: selecting a layer with matching size information from the layer set according to the size information of the target element, and displaying the selected layer differently from other layers in the layer set; and in response to detecting a selection operation on a layer in the layer set, displaying the selected layer differently from other layers in the layer set.

[0012] In some embodiments, the method further comprises: in response to detecting an opening operation on the mark state control in the webpage page, marking the size and / or position of the target element in the webpage page; and in response to detecting a closing operation on the design draft state control in the webpage page, closing the display of the design draft page.

[0013] In some embodiments, the method further comprises: recording the inspection task to generate task management information, wherein the task management information comprises at least one of the following: webpage page information, task description, image information, priority, processing personnel information, task state, and message; and statistically analyzing each inspection task in the task management information to generate a restoration degree and a repair rate of the webpage page, wherein the restoration degree is inversely proportional to the number of inspection tasks belonging to the webpage page, and the repair rate is determined based on the number of inspection tasks belonging to the webpage page and the task state.

[0014] In some embodiments, the method further comprises: receiving address information of the webpage page, wherein the address information comprises at least one of the following: a network address in an actual running environment, a network address in a test environment, and a domain name range; establishing an association between the webpage page and a pre-stored design draft; and setting information of a processing personnel of the webpage page to create an inspection project of the webpage page.

[0015] In a second aspect, some embodiments of the present disclosure provide a page information analysis apparatus, comprising: an element determination unit configured to determine attribute information of a target element in response to detecting a selection operation on the target element in a walkthrough mode; a layer determination unit configured to determine a target layer corresponding to the target element and design information of the target layer in a design draft page of a web page, wherein the design draft page is displayed on the same screen as the web page; an analysis unit configured to perform difference analysis on the attribute information and the design information to generate difference information; and a generation unit configured to generate a walkthrough task according to the difference information.

[0016] In some embodiments, the apparatus further comprises an information display unit configured to display the attribute information of the target element in an element information display area of the web page, and display the design information of the target layer in a layer information display area of the design draft page.

[0017] In some embodiments, the generation unit further comprises: a capturing sub-unit configured to capture an element image of the target element and a layer image of the target layer; and a generation sub-unit configured to generate the walkthrough task according to the element image, the layer image, and the difference information.

[0018] In some embodiments, the capturing sub-unit is further configured to determine whether the target element is a dynamic element; in response to determining that the target element is a dynamic element, capture a dynamic image of the target element as the element image, and capture the layer image of the target layer.

[0019] In some embodiments, the apparatus further comprises: a task display unit configured to display the walkthrough task in a task display area of the web page; and a marker generation unit configured to generate corresponding marker information at a preset position of the target element according to a task status of the walkthrough task, wherein the task status of the walkthrough task comprises at least one of the following: to be repaired, to be accepted, and completed.

[0020] In some embodiments, the apparatus further comprises a first detection unit configured to display the marker information in the web page in response to detecting an opening operation on a marker status control in the web page, and display information of the walkthrough task in response to detecting a triggering operation on the marker information.

[0021] In some embodiments, the layer determination unit is further configured to determine a layer set matching the position information in the design draft page according to position information of the target element in the web page; select a layer from the layer set, and determine the selected layer as the target layer corresponding to the target element.

[0022] In some embodiments, the layer determining unit is further configured to at least one of: selecting a layer with matching size information from the set of layers according to the size information of the target element, and displaying the selected layer differently from other layers in the set of layers; and in response to detecting a selection operation on a layer in the set of layers, displaying the selected layer differently from other layers in the set of layers.

[0023] In some embodiments, the apparatus further includes a second detecting unit configured to, in response to detecting an opening operation on the markup state control in the web page, mark the size and / or position of the target element in the web page; and in response to detecting a closing operation on the design draft state control in the web page, close the display of the design draft page.

[0024] In some embodiments, the apparatus further includes a management information generating unit configured to record the inspection tasks and generate task management information, wherein the task management information includes at least one of the following: information of the web page, task description, image information, priority, processing personnel information, task state, and message; and a statistical unit configured to statistically analyze the inspection tasks in the task management information and generate the restoration degree and the repair rate of the web page, wherein the restoration degree is inversely proportional to the number of inspection tasks belonging to the web page, and the repair rate is determined based on the number of inspection tasks belonging to the web page and the task state.

[0025] In some embodiments, the apparatus further includes an inspection item generating unit configured to receive address information of the web page, wherein the address information includes at least one of the following: network address in an actual running environment, network address in a test environment, and domain name range; establish an association between the web page and a pre-stored design draft; and set information of a processing personnel of the web page to create an inspection item of the web page.

[0026] In a third aspect, some embodiments of the present disclosure provide an electronic device, including: one or more processors; a storage device having one or more programs stored thereon, when the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any of the implementation manners of the first aspect.

[0027] In a fourth aspect, some embodiments of the present disclosure provide a computer readable medium having a computer program stored thereon, wherein the program is executed by a processor to implement the method described in any of the implementation manners of the first aspect.

[0028] The various embodiments of this disclosure have the following beneficial effects: the page information analysis method of some embodiments of this disclosure can improve the efficiency of walkthroughs. Specifically, the reason for the low efficiency of existing walkthroughs is the lack of streamlined and standardized walkthrough tools. Existing walkthrough methods mainly rely on manual measurement and comparison, which is complex and inefficient. Based on this, the page information analysis method of some embodiments of this disclosure, based on the selection of target elements, can determine the attribute information of the target elements and the design information of the corresponding target layers. Then, a difference analysis can be performed on the two types of information. If a difference exists, difference information can be automatically generated, thereby generating a walkthrough task. In other words, this method can intelligently analyze page elements and their corresponding layer information and output difference information. This not only ensures the accuracy of the analysis results but also helps to improve the efficiency of page design walkthroughs. Furthermore, the design draft page and the webpage can be displayed on the same screen. This facilitates user comparison and avoids repeated page switching and adjustment operations. Attached Figure Description

[0029] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and elements are not necessarily drawn to scale.

[0030] Figure 1 This is an architecture diagram of an exemplary system to which some embodiments of this disclosure can be applied;

[0031] Figure 2 This is a flowchart of some embodiments of the page information analysis method according to this disclosure;

[0032] Figure 3A This is a schematic diagram of one embodiment of page display;

[0033] Figure 3B This is a schematic diagram of another embodiment of the page display;

[0034] Figure 3C This is a schematic diagram of one embodiment of a web page;

[0035] Figure 3D This is a schematic diagram of one embodiment of a design draft page;

[0036] Figure 4 This is a schematic diagram of one embodiment of creating a new walkthrough task page;

[0037] Figure 5 This is a schematic diagram of the structure of some embodiments of the page information analysis device according to the present disclosure;

[0038] Figure 6is a structural schematic diagram of an electronic device suitable for implementing some embodiments of the present disclosure. DETAILED DESCRIPTION

[0039] Embodiments of the present disclosure will be described below in greater detail with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is understood that the present disclosure can be embodied in various forms and should not be construed as being limited to the embodiments set forth herein. Rather, these embodiments are provided so that the present disclosure will be more thoroughly and completely understood. It should be understood that the drawings of the present disclosure are only for illustrative purposes and should not be construed as limiting the scope of protection of the present disclosure.

[0040] It should also be noted that, for ease of description, only parts related to the present application are shown in the drawings. The embodiments in the present disclosure and the features in the embodiments can be combined with each other without conflict.

[0041] It should be noted that the terms "first", "second", etc. mentioned in the present disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0042] It should be noted that the adjectives "one", "multiple" mentioned in the present disclosure are illustrative and not limiting, and those skilled in the art should understand that, unless otherwise explicitly stated in the context, it should be understood as "one or more".

[0043] The names of the messages or information exchanged between the devices in the embodiments of the present disclosure are only for illustrative purposes, and are not used to limit the scope of the messages or information.

[0044] The present disclosure will be described in detail below with reference to the accompanying drawings and in conjunction with the embodiments.

[0045] Figure 1 An exemplary system architecture 100 of a page information analysis method or a page information analysis device to which some embodiments of the present disclosure can be applied is shown.

[0046] As shown in Figure 1 The system architecture 100 can include a terminal device 101, a network 102, a server 103 and a database server 104. The network 102 can be a medium for providing a communication link between the terminal device 101 and the server 103, the database server 104. The network 102 can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0047] The user can use the terminal device 101 to interact with the server 103 and the database server 104 through the network 102 to receive or send messages and the like. Various client applications can be installed on the terminal device 101, such as page information analysis (or application design walkthrough) applications, web browsers, instant messaging tools, and the like.

[0048] In the walkthrough mode, the terminal device 101 can display the web page and the design draft page on the same screen. When detecting a selection operation on a target element in the web page, the attribute information of the target element can be determined. The target layer in the design draft page and the design information thereof can also be determined. Then, the two kinds of information can be analyzed for differences. If there are differences, a walkthrough task can be generated.

[0049] The terminal device 101 here can be hardware or software. When the terminal device 101 is hardware, it can be various electronic devices with a large display screen, including but not limited to tablets, e-book readers, network televisions, portable computers, desktop computers, and the like. When the terminal device 101 is software, it can be installed in the above-mentioned electronic devices. It can be implemented as, for example, multiple software or software modules for providing distributed services, or as a single software or software module. No specific limitation is made here.

[0050] The server 103 can be a server providing various services, for example, a background server providing support for page information analysis applications. The background server can detect various operations of the user on the terminal device 101 and can send corresponding feedback information to the terminal device 101. The database server 104 can be a data storage server, for example, having pre-stored design draft data thereon.

[0051] The server 103 and the database server 104 here can also be hardware or software. When the server 103 and the database server 104 are hardware, they can be implemented as a distributed server cluster composed of multiple servers, or as a single server. When the server 103 and the database server 104 are software, they can be implemented as, for example, multiple software or software modules for providing distributed services, or as a single software or software module. No specific limitation is made here.

[0052] It should be noted that the method provided by the embodiments of the present disclosure can be executed by the terminal device 101 or the server 103. Correspondingly, the apparatus can be arranged in the terminal device 101 or the server 103. No specific limitation is made here. In addition, when the server 103 has the function of the database server 104, the system architecture 100 can also not be provided with the database server 104.

[0053] It should be understood that Figure 1 The number of terminal devices, networks, servers and database servers in

[0054] With reference to Figure 2 , a flow 200 of some embodiments of the page information analysis method according to the present disclosure is shown. The method comprises the following steps:

[0055] Step 201, in the walkthrough mode, in response to detecting a selection operation on a target element in a web page, determining attribute information of the target element.

[0056] In some embodiments, the execution subject of the page information analysis method (such as the terminal device 101 shown in Figure 1 In the walkthrough mode, if a selection operation on a target element in a currently displayed web page is detected, the attribute information of the target element can be determined. Here, the walkthrough mode generally refers to the design walkthrough process, that is, the process of finding and reducing the deviation between the implementation draft of the web page (the actual web page presented by the research and development) and the design draft. The walkthrough mode is generally opposite to the browsing mode. The browsing mode generally refers to the existing web browsing process. The operation mode of the above selection operation is not limited here, such as voice selection, click selection or selection by moving the display position of the mouse (such as staying for a certain period of time).

[0057] In some embodiments, the above web page is generally the implementation draft page of the computer (i.e. PC, Personal Computer) end web page. The target element can be any element in the web page, such as background, icon, text, etc. The attribute information of the target element can be information for displaying the target element, such as size, position, color, font, etc. Here, the execution subject can determine the attribute information of the target element in various ways. As an example, the execution subject can be built-in with a walkthrough tool to measure the target element and thus obtain the attribute information of the target element. The walkthrough tool can include a ruler, a color picker, etc. The ruler can measure the size, absolute position and relative position (such as the distance from the surrounding elements) of the target element, etc. The absolute position here can be the coordinates of the target element from the origin, or the distance from the four sides of the page. The relative position can be the distance between the target element and the surrounding (specified or closest) elements.

[0058] In some embodiments, the web page can also be provided with a labeling state control for controlling the opening or closing of element labeling. Here, as Figure 3CAs shown, if the execution subject detects an opening operation on the label state control, the size (100, 50) and / or position of the target element (e.g., "start" Y1) can be labeled in the webpage page.

[0059] Optionally, the execution subject can also be provided with an element viewer. In this way, through the element viewer, the attribute information of the target element can be displayed in the element information display area of the webpage page, such as the W11 area shown, so as to obtain the attribute information. Figure 3C

[0060] Step 202, in the design draft page of the webpage page, determine the target layer corresponding to the target element and the design information of the target layer.

[0061] In some embodiments, in the design draft page of the webpage page, the execution subject can determine the target layer corresponding to the target element and the design information of the target layer. The design information here is usually the information used by the designer to present the target element with the expected display effect, i.e., the original information. The design draft page is displayed on the same screen as the webpage page. In this way, it is convenient for the user to review.

[0062] It can be understood that the same screen display mode of the webpage page and the design draft page is not limited. For example, Figure 3A As shown, a split window mode can be used, i.e., the window size of the webpage page W1 and the design draft page W2 is equally distributed on the current screen. For another example, Figure 3B As shown, a free window mode can be used, i.e., the size of any window can be adjusted.

[0063] Here, the execution subject can determine the target layer in multiple ways. For example, the user can also perform a selection operation on the position of the target element in the design draft page. In this way, the execution subject can determine a layer set located near the position indicated by the selection operation when detecting the selection operation. Then, a layer can be selected from the layer set, and the selected layer is determined as the target layer corresponding to the target element.

[0064] For another example, in order to reduce user operations, the execution subject can determine a layer set in the design draft page that matches (e.g., near the coordinates) the position information (e.g., coordinates) of the target element in the webpage page. Then, a layer can be selected from the layer set as the target layer.

[0065] ​Here, the manner of selecting the layer is not limited. For example, the execution body can select the layer located in a preset layer (such as the top layer or the bottom layer) in the layer set. For another example, the execution body can select the layer with matching (such as the same or similar) size information (such as width, height, or area) of the target element from the layer set according to the size information of the target element. As an example, the execution body can first calculate the area of the target element, thereby fuzzily matching the layer with similar area to obtain the layer set to narrow the range. Then, the layer with similar width and height to the target element can be determined from the layer set as the target layer. That is, the closest layer is intelligently positioned. In this way, the intelligent linkage of the page element and the design draft layer can be realized, thereby realizing the rapid positioning of the problem.

[0066] Further, in order to facilitate the user to check and understand the currently selected layer, the execution body can also distinguish and display the selected layer from other layers in the layer set. The manner of distinguishing and displaying can be set according to actual conditions, such as continuous or flashing highlighting of the layer color.

[0067] In some embodiments, in order to improve the accuracy of layer selection, the selection manner of human-computer interaction can also be adopted. That is, in the case that the execution body selects the layer from the layer set and distinguishes and displays it, the user can further select the layer from the layer set with the assistance of the execution body, thereby determining the target layer. For example, if the selection operation (such as clicking) on the area where the currently selected layer is located is detected, the execution body can confirm that the user also selects the layer, and the layer is kept to be distinguished and displayed. If the selection operation on the area where the layer is located is detected again, the execution body can confirm that the layer located on the layer above (or below) is selected by the user, and distinguish and display it. According to this logic, the layers in the layer set are cyclically distinguished and displayed, thereby realizing the selection of the layer. In this way, the selection efficiency of the target layer can also be improved.

[0068] In addition, the execution body can also determine the design information of the target layer through various manners. For example, the built-in checking tool can be used. For another example, the execution body can also be provided with a layer viewer. In this way, through the layer viewer, the design information of the target layer can be displayed in the layer information display area of the design draft page, such as the W21 area shown in Figure 3D , thereby obtaining the design information.

[0069] It should be noted that one of the existing review methods is to mask the design draft above or below the software product. By setting the transparency, overlapping the software product and the design draft, the differences are found. This method needs to constantly switch between the software product and the design draft. After the page jumps and the content changes, the operation needs to be re-operated. In addition, the transparency needs to be constantly changed, and the design draft position needs to be compared. Not only is the operation complex and inefficient, but also the measurement is not accurate enough. The page information analysis method of the present disclosure can integrate the element viewer and the layer viewer in the same tool, so that the comparison between the realized draft and the design draft can be directly implemented subsequently, and the accuracy of the measurement result can be guaranteed. The operation is simple, the difference comparison is convenient, and the review efficiency can be improved.

[0070] In step 203, difference analysis is performed on the attribute information and the design information to generate difference information.

[0071] In some embodiments, based on the attribute information of the target element determined in step 201 and the design information of the target layer determined in step 202, the executing body can perform difference analysis on the attribute information and the design information. As an example, the executing body can perform comparison analysis on the attribute values of the same attributes (such as position, font, size, etc.) in both. If there is a difference in the attribute values, difference information can be generated. The difference information is used to represent the difference between the attribute information and the design information. The specific content is not limited here, such as font size error, color error, etc. For example, for different attributes in both, the executing body cannot directly compare the attribute values. At this time, difference information can also be generated, such as the existence of different attributes (or specific attribute names), so as to facilitate subsequent manual processing.

[0072] It can be understood that for attribute information that is completely the same, the executing body can automatically compare and analyze. In some cases, a combination of man and machine comparison methods can also be used. Through the attribute information displayed in the element information display area and the design information displayed in the layer information display area, the user can compare and analyze the different attribute information in both. This not only improves the analysis efficiency, but also helps to improve the accuracy of the analysis result.

[0073] It should be noted that one of the existing review methods is to mask the design draft above or below the software product. By setting the transparency, overlapping the software product and the design draft, the differences are found. This method needs to constantly switch between the software product and the design draft. After the page jumps and the content changes, the operation needs to be re-operated. In addition, the transparency needs to be constantly changed, and the design draft position needs to be compared. Not only is the operation complex and inefficient, but also the measurement is not accurate enough. The page information analysis method of the present disclosure can integrate the element viewer and the layer viewer in the same tool, so that the comparison between the realized draft and the design draft can be directly implemented subsequently, and the accuracy of the measurement result can be guaranteed. The operation is simple, the difference comparison is convenient, and the review efficiency can be improved.

[0074] In step 204, the execution subject generates the review task according to the difference information.

[0075] In some embodiments, based on the difference information obtained in step 203, the execution subject can generate the review task. As an example, if there is a difference between the attribute information and the design information, the execution subject can pop up a "new task" window on the screen, and can display the generated difference information in the window. As shown in Figure 4 the execution subject can input the difference information into the "problem description" column. At this time, the user can manually modify the problem description information according to the actual situation. The execution subject can generate the review task when detecting a triggering operation on the "OK" control.

[0076] In some embodiments, in order to make the problem description clearer and facilitate user understanding, the execution subject can intercept the element image of the target element and the layer image of the target layer. Then, the execution subject can generate the review task according to the element image, the layer image and the difference information. For example Figure 4 As shown in

[0077] In some embodiments, the execution subject can automatically intercept the element image and the layer image. For example Figure 3C As shown in

[0078] Optionally, as shown in Figure 3C In the case of detecting a selection operation on the target element, the task creation identifier (such as "+" in the figure) can be displayed near the target element (such as the lower right corner). At this time, if a triggering operation on the identifier is detected, a "new task" window can be popped up on the web page. At the same time, the execution subject can automatically intercept the element image of the target element to input the window. In addition, when detecting a selection operation on the target layer, the execution subject can automatically intercept the layer image to input the window. For another example, the user can also manually take a screenshot (such as sliding). At this time, in response to detecting the screenshot operation of the user, the execution subject can intercept the image of the region indicated by the operation.

[0079] It should be noted that there are two existing walk-through methods. One is to view the page source code information through the browser "review web element" function to see if it meets the design specification. The other is to view the page node information through some front-end debugging tools on the market (such as Visual Inspector) to see if it meets the design specification. The two methods are difficult to compare, the problem submission process is complex, and it is necessary to run to the third-party document tool, paste screenshots, write problem descriptions, etc. The method of the present disclosure can assist users in automatically intercepting images and outputting difference information, without the need for manual copying and pasting, thereby helping to quickly generate walk-through tasks.

[0080] In some embodiments, before intercepting the image, the execution subject can determine whether the target element is a dynamic element (such as an animation). If it is determined to be a dynamic element, the execution subject can intercept a dynamic image of the target element, such as an element image, and intercept a layer image of the target layer.

[0081] In some embodiments, the walk-through task can further include the priority of the task (such as P0, P1, P2 in Figure 4 ) and processor information. The processor here is usually a developer who needs to repair the difference information. Here, if a triggering operation on the "cancel" control is detected, it means that the walk-through task can not be generated. If a triggering operation on the "X" control in the upper right corner of the window is detected, the execution subject can close the window.

[0082] In some application scenarios, the web page can also be provided with a task display area, such as the W12 area shown in Figure 3C . The execution subject can display the walk-through task in the task display area for the user to review and switch the walk-through task.

[0083] Further, according to the task state of the walk-through task, the execution subject can generate corresponding marking information at a preset position (such as the upper left corner) of the target element. The representation form of the marking information is not limited here, such as numbers, letters, symbols, images, etc. The task state of the walk-through task includes at least one of the following: to be repaired, to be accepted, and completed.

[0084] It can be understood that when the walk-through task is created, its task state is generally to be repaired, that is, to be repaired by the developer. After the developer repairs it, the task state of the walk-through task is generally to be accepted, that is, to be accepted by the walk-through personnel. After the developer accepts it and confirms that there is no problem, the task state of the walk-through task can be completed.

[0085] Optionally, a marker status control can be included in the webpage to control whether marker information is displayed. When an activation operation is detected, i.e., the marker status control is enabled, the executing entity can display the marker information on the webpage. Here, the marker information differs depending on the task status, such as different colors or different content. For completed walkthrough tasks, the marker information may not be displayed on the webpage.

[0086] Additionally, the executing entity can display the tagging information for all walkthrough tasks on the webpage. Alternatively, it can display the tagging information for only a subset of walkthrough tasks, such as a specific walkthrough task selected by the user, or a selection of filtered walkthrough tasks. For example, if a developer selects a walkthrough task from the task list in the task display area, the tagging information for that task can be displayed on the webpage. This tagging information allows users to quickly locate the problem, improving the efficiency of walkthrough task processing.

[0087] Optionally, in response to a detected trigger action (such as a click) on the marked information, the executing entity can display information about the walkthrough task. This allows users to easily view the problems with the task and quickly modify its status.

[0088] In some application scenarios, the executing entity can also record the generated walkthrough tasks and generate task management information (such as a task management table). This task management information may include, but is not limited to, at least one of the following: the associated webpage information, task description, image information (element images and layer images), priority, information of the personnel handling the task (walkthrough personnel and R&D personnel), task status, comments, etc. This facilitates user tracking and management of issues and helps to promptly understand the progress of problem resolving.

[0089] Furthermore, the executing entity can perform statistical analysis on each walkthrough task in the task management information, generating and displaying the restoration rate and repair rate of web pages (or web applications). The restoration rate is inversely proportional to the number of walkthrough tasks belonging to web pages; that is, the more tasks, the lower the restoration rate. The repair rate, on the other hand, is determined based on the number of walkthrough tasks belonging to web pages and their task status. That is, the more walkthrough tasks that have been repaired (pending acceptance) and completed, the higher the repair rate.

[0090] It should be noted that the existing inspection methods lack problem tracking and management, and are unable to quantify and evaluate the application's fidelity and quality.

[0091] In some embodiments, the score F(x) of the degree of restoration can be obtained using the following formula:

[0092]

[0093] wherein i represents the priority level, and takes the value range [0, n], n is a positive integer; f i represents the deduction value of the i-th priority level, T i represents the weight of the i-th priority level, and takes the value range (0, 100); q represents the reduction coefficient, and takes the value range (0, 1); m represents the number of problems or tasks of the i-th priority level; the constraint condition is

[0094] As an example, if T0=20, T1=15, q=0.1, the number of walk-through tasks of priority P0 is 1, and the number of walk-through tasks of priority P1 is 3, then the score of the reduction degree is

[0095] Here, in order to be able to compare and analyze the implementation draft and the design draft of the webpage, and realize design walk-through, a walk-through project can be created in advance, and the walk-through environment and related data sources are set. As an example, the user can complete the above operation through the walk-through project creation page on the walk-through platform. The user inputs the address information of the webpage page, selects the pre-stored design draft, and inputs the information of the processing personnel in the corresponding information bar of the creation page. In the case of determining the creation, the execution subject establishes the association relationship between the webpage page and the design draft, thereby creating the walk-through project of the webpage page.

[0096] The above address information can include at least one of the following: network address (such as URL, Uniform Resource Locator) in the actual running environment, network address in the test environment, domain name range. The network address can realize the accurate positioning of the webpage page. And the domain name range can realize the fuzzy positioning of the webpage page, which is used to limit the domain name range of the browser (such as Chrome browser) plug-in automatic injection. For example, when the domain name range is set to www.**.com, the browser can open all the webpage pages of www.**.com domain name, such as www.**.com / ?country=A.

[0097] The user can automatically inject the walk-through plug-in by opening the address of the walk-through project or selecting the walk-through project through the browser. Usually the plug-in can include two windows, one is the implementation draft window, and the other is the design draft window.

[0098] Here, the layered data of the design source file can be obtained through the development API (Application Programming Interface) provided by a design tool (such as Photoshop, Sketch, Figma, etc.), and stored in a database. The layered data can include the coordinates, size, type, etc. of each layer. In this way, when the design window is opened, the design can be drawn based on the layer information in the database using the renderer.

[0099] In the implementation window, as shown in Figure 3C , it can include an element information display area W11, a task display area W12, a page setting bar W13, and a task creation toolbar W14. The task display area W12 can realize the functions of switching the review task (or page), filtering the review task (such as task status, my task, etc.), editing and deleting the task, viewing the complete task list, etc. The page setting bar W13 can include a design state control, a window size configuration item (custom window size), a window display mode control, a label state control, a marker state control, and auxiliary functions (such as copying the review link, help and feedback, etc.). The task creation toolbar W14 can include task creation, screenshot, screen recording, etc.

[0100] It can be understood that, in order to facilitate review, the design page is usually in an open display state. The design state control is used to control the opening and closing of the design window. If a closing operation on the control is detected, the execution subject can close the display of the design page. In addition, when the label state control is in a closed state, the execution subject can close the label information of the element, the element information display area (and the layer information display area). In this way, the user can normally browse the web page. For the problem of restoring the page operation, such as animation, logic display, etc., the page can be recorded through the screen recording tool to realize the collection of the problem image.

[0101] In the design window, as shown in Figure 3D , it can include a layer information display area W21, a manuscript display area W22, and a manuscript preview setting bar W23. The manuscript display area W22 can display a list of associated manuscript pages. The manuscript preview setting bar W23 can realize functions such as page zoom-in, zoom-out, equal-ratio viewing, and page switching.

[0102] It can be understood that the positions of the various display areas and controls in the page are not limited here. The interface where the controls are located is also not limited. Usually, in order to facilitate the review of the web page, the controls can be set in the window interface where the web page (implementation manuscript) is located.

[0103] Further referring to Figure 5 , as an embodiment of the aboveFigure 2 The present disclosure provides some embodiments of a page information analysis device for implementing the method shown, and these device embodiments are similar to... Figure 2 Corresponding to the method embodiments shown, the device can be specifically applied to various electronic devices.

[0104] like Figure 5 As shown, the page information analysis apparatus 500 in some embodiments may include: an element determination unit 501, configured to determine the attribute information of a target element in a walkthrough mode in response to detecting a selection operation on a target element in a webpage; a layer determination unit 502, configured to determine the target layer and its design information in the design draft page of the webpage, wherein the design draft page and the webpage are displayed on the same screen; an analysis unit 503, configured to perform a difference analysis on the attribute information and the design information to generate difference information; and a generation unit 504, configured to generate a walkthrough task based on the difference information.

[0105] In some embodiments, the device 500 may further include an information display unit ( Figure 5 (Not shown in the image), is configured to display the attribute information of the target element in the element information display area of ​​the webpage; and to display the design information of the target layer in the layer information display area of ​​the design draft page.

[0106] In some embodiments, the generation unit 504 may further include: a cropping subunit configured to crop the element image of the target element and the layer image of the target layer; and a generation subunit configured to generate a walkthrough task based on the element image, the layer image, and the difference information.

[0107] In some embodiments, the cropping subunit may be further configured to determine whether the target element is a dynamic element; in response to determining that it is a dynamic element, cropping the dynamic image of the target element as an element image, and cropping the layer image of the target layer.

[0108] In some embodiments, the device 500 may further include: a task display unit ( Figure 5 (Not shown in the image), configured to display the walkthrough task in the task display area of ​​the webpage; the tag generation unit ( Figure 5 (not shown in the image), is configured to generate corresponding marker information at a preset position of the target element based on the task status of the walkthrough task, wherein the task status of the walkthrough task includes at least one of the following: pending repair, pending acceptance, or completed.

[0109] In some embodiments, the device 500 further includes a first detection unit ( Figure 5(Not shown in the image), configured to display tag information on a webpage in response to detecting an activation operation of a tag status control on the webpage; and to display walkthrough task information in response to detecting a trigger operation on the tag information.

[0110] In some embodiments, the layer determination unit 502 may be further configured to determine a set of layers in the design draft page that match the position information of the target element in the web page; select a layer from the layer set, and determine the selected layer as the target layer corresponding to the target element.

[0111] In some embodiments, the layer determination unit 502 is further configured to: select a layer whose size information matches the size information from the layer set based on the size information of the target element, and distinguish the selected layer from other layers in the layer set; in response to detecting a selection operation on a layer in the layer set, distinguish the selected layer from other layers in the layer set.

[0112] In some embodiments, the device 500 further includes a second detection unit ( Figure 5 (Not shown in the image), configured to, in response to detecting an open operation of a marker status control on a webpage, mark the size and / or position of a target element on the webpage; and in response to detecting a close operation of a design draft status control on the webpage, close the display of the design draft page.

[0113] In some embodiments, the device 500 further includes: a management information generation unit ( Figure 5 (Not shown in the image), configured to record walkthrough tasks and generate task management information, wherein the task management information includes at least one of the following: the webpage information to which it belongs, task description, image information, priority, personnel information, task status, and message; statistical unit ( Figure 5 (Not shown in the image) is configured to perform statistical analysis on each walkthrough task in the task management information to generate the restoration degree and repair rate of the web page. The restoration degree is inversely proportional to the number of walkthrough tasks belonging to the web page, and the repair rate is determined based on the number of walkthrough tasks belonging to the web page and the task status.

[0114] In some embodiments, the device 500 further includes a walkthrough item generation unit ( Figure 5 (Not shown in the image) is configured to receive address information of a webpage, wherein the address information includes at least one of the following: network address in the actual operating environment, network address in the test environment, and domain name range; to establish a relationship between the webpage and a pre-stored design draft, and to set the information of the personnel who process the webpage, in order to create a webpage walkthrough project.

[0115] It is to be understood that the units described in the apparatus 500 correspond to the units described in the method Figure 2 The operations, features, and advantages described above for the method apply equally to the apparatus 500 and the units contained therein, and are not repeated here.

[0116] Reference is made below to Figure 6 which shows a structural schematic diagram of an electronic device (e.g. Figure 1 terminal device in the method) 600 suitable for implementing some embodiments of the present disclosure. Figure 6 The electronic device shown is merely an example and should not impose any limitation on the functions and use range of the embodiments of the present disclosure.

[0117] As shown in Figure 6 , the electronic device 600 can include a processing device (e.g. a central processor, a graphics processor, etc.) 601 which can perform various appropriate actions and processes according to programs stored in a read-only memory (ROM) 602 or loaded into a random access memory (RAM) 603 from a storage device 608. In the RAM 603, various programs and data required for the operation of the electronic device 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other through a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0118] Generally, the following devices can be connected to the I / O interface 605: input devices 606 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, etc.; output devices 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 608 including, for example, a magnetic tape, a hard disk, etc.; and communication devices 609. The communication devices 609 can allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 6 The electronic device 600 is shown with various devices, but it should be understood that all the devices shown are not required to be implemented or possessed. More or fewer devices can be alternatively implemented or possessed. Figure 6 Each block shown in

[0119] In particular, the processes described above with reference to the flowcharts can be implemented as a computer software program according to some embodiments of the present disclosure. For example, some embodiments of the present disclosure include a computer program product comprising a computer program carried on a computer readable medium, the computer program comprising program code for performing the methods illustrated by the flowcharts. In some such embodiments, the computer program can be downloaded and installed from a network via the communication device 609, or installed from the storage device 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the methods of some embodiments of the present disclosure are performed.

[0120] It should be noted that the computer readable medium in some embodiments of the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination thereof. The computer readable storage medium can be, for example but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any suitable combination thereof. More specific examples of the computer readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In some embodiments of the present disclosure, the computer readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus or device. In some embodiments of the present disclosure, the computer readable signal medium can include a data signal carried in a baseband or as part of a carrier wave, in which the computer readable program code is carried. Such a propagated data signal can take any of a variety of forms, including but not limited to electro-magnetic, optical, or any suitable combination thereof. The computer readable signal medium can also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate or transport a program for use by or in connection with an instruction execution system, apparatus or device. Program code contained in a computer readable medium can be transmitted using any suitable medium, including but not limited to wire, cable, optical fiber, RF, etc., or any suitable combination of the foregoing.

[0121] In some embodiments, the client, server, or both can communicate using any known or future developed network protocols, such as the HyperText Transfer Protocol (HTTP), and can be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet, and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any current or future developed network.

[0122] The computer-readable medium can be included within the electronic device; or can exist separately from the electronic device. The computer-readable medium can carry one or more programs which, when executed by the electronic device, cause the electronic device to: in the walkthrough mode, in response to detecting a selection operation on a target element in a webpage, determine attribute information of the target element; in a design draft page of the webpage, determine a target layer corresponding to the target element and design information of the target layer, wherein the design draft page is displayed on the same screen as the webpage; perform difference analysis on the attribute information and the design information to generate difference information; and generate a walkthrough task according to the difference information.

[0123] Furthermore, computer program code to carry out operations of some embodiments of the disclosure can written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C++ or the like, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code can execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer can be connected to the user's computer through any type of network, including a local area network ("LAN") or a wide area network ("WAN"), or the connection can be made to an external computer (for example, through the Internet using an Internet Service Provider).

[0124] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0125] The units described in some embodiments of this disclosure can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor may be described as including an element determination unit, a layer determination unit, an analysis unit, and a generation unit. The names of these units do not necessarily limit the specific unit; for example, the element determination unit may also be described as a "unit for determining the attribute information of a target element."

[0126] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0127] The above description is merely a selection of preferred embodiments of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described inventive concept. For example, technical solutions formed by substituting the above-described features with (but not limited to) technical features with similar functions disclosed in the embodiments of this disclosure.

Claims

1. A webpage information analysis method, comprising: in a walkthrough mode, in response to detecting a selection operation on a target element in a webpage, determining attribute information of the target element; in a design draft page of the webpage, determining a target layer corresponding to the target element and design information of the target layer, wherein the design draft page is displayed on the same screen as the webpage in a split window mode, i.e., the window size of the webpage and the design draft page is equally split on the current screen; performing difference analysis on the attribute information and the design information to generate difference information; generating a walkthrough task according to the difference information; recording the walkthrough task to generate task management information; performing statistical analysis on each walkthrough task in the task management information to generate a restoration degree and a repair rate of the webpage; wherein the score for the degree of reduction is obtained using the following equation: ； in, Indicates the priority level, with a value range of [0, ...]. ], It is a positive integer; Indicates the first The deduction value for each priority level, ; Indicates the first The weight of each priority level, with a value range of (0, 100). This represents the reduction coefficient, with a value range of (0, 1). Indicates the first The number of priority issues or tasks; constraints are: .

2. The method of claim 1, wherein, the method further comprises: displaying the attribute information of the target element in an element information display area of the webpage; and displaying the design information of the target layer in a layer information display area of the design draft page.

3. The method of claim 1, wherein, the generating a walkthrough task according to the difference information comprises: capturing an element image of the target element and a layer image of the target layer; generating a walkthrough task according to the element image, the layer image and the difference information.

4. The method of claim 3, wherein, the capturing an element image of the target element and a layer image of the target layer comprises: determining whether the target element is a dynamic element; in response to determining that the target element is a dynamic element, capturing a dynamic image of the target element as an element image and capturing a layer image of the target layer.

5. The method of claim 1, wherein, the method further comprises: displaying the walkthrough task in a task display area of the webpage; generating corresponding marking information in a preset position of the target element according to a task state of the walkthrough task, wherein the task state of the walkthrough task comprises at least one of the following: to be repaired, to be accepted, completed.

6. The method of claim 5, wherein, the method further comprises: in response to detecting an opening operation on a marking state control in the webpage, displaying the marking information in the webpage; and in response to detecting a triggering operation on the marking information, displaying information of the walkthrough task.

7. The method of claim 1, wherein, the determining a target layer corresponding to the target element comprises: determining a layer set in the design draft page that matches position information of the target element in the webpage according to the position information; selecting a layer from the layer set and determining the selected layer as the target layer corresponding to the target element.

8. The method of claim 7, wherein, the selecting a layer from the layer set comprises at least one of the following steps: according to size information of the target element, selecting a layer with matching size information from the layer set and displaying the selected layer differently from other layers in the layer set; and in response to detecting a selection operation on a layer in the layer set, displaying the selected layer differently from other layers in the layer set.

9. The method of claim 1, wherein, the method further comprises: in response to detecting an opening operation on a marking state control in the webpage, marking the size and / or position of the target element in the webpage. In response to detecting a closing operation on a design state control in the webpage page, display of the design page is closed.

10. The method of claim 1, wherein, The task management information includes at least one of the following: webpage page information, task description, image information, priority, processing personnel information, task status, and message. The restoration degree is inversely proportional to the number of review tasks belonging to the webpage page. The repair rate is determined based on the number of review tasks belonging to the webpage page and the task status.

11. The method according to one of claims 1-10, wherein, The method further includes: receiving address information of the webpage page, wherein the address information includes at least one of the following: a network address in an actual running environment, a network address in a test environment, and a domain name range; associating the webpage page with a pre-stored design draft, and setting information of a processing personnel of the webpage page to create a review project of the webpage page.

12. A webpage information analysis apparatus, comprising: an element determination unit configured to determine attribute information of a target element in response to detecting a selection operation on the target element in a webpage page in a review mode; a layer determination unit configured to determine a target layer corresponding to the target element and design information of the target layer in a design draft page of the webpage page, wherein the design draft page is displayed on the same screen as the webpage page in a split window mode, i.e., window sizes of the webpage page and the design draft page are averagely allocated on a current screen; an analysis unit configured to perform difference analysis on the attribute information and the design information to generate difference information; a generation unit configured to generate a review task according to the difference information; a recording unit configured to record the review task to generate task management information; a statistical analysis unit configured to perform statistical analysis on each review task in the task management information to generate a restoration degree and a repair rate of the webpage page; wherein the score for the degree of reduction is obtained using the following equation: ； in, Indicates the priority level, with a value range of [0, ...]. ], It is a positive integer; Indicates the first The deduction value for each priority level, ; Indicates the first The weight of each priority level, with a value range of (0, 100). This represents the reduction coefficient, with a value range of (0, 1). Indicates the first The number of priority issues or tasks; constraints are: .

13. An electronic device, comprising: one or more processors; a storage device having one or more programs stored thereon, when the one or more programs are executed by the one or more processors, the one or more processors implement the method of any one of claims 1-11.

14. A computer readable medium having stored thereon a computer program, wherein, The program is executed by the processor to implement the method of any one of claims 1-11. The program is executed by the processor to implement the method of any one of claims 1-11.

Images