Visual webpage availability test report generation method based on browser plug-in

Abstract

The invention discloses a method for generating a visual webpage availability test report based on a browser plug-in, and the method comprises the steps: opening a webpage to be tested, and starting an availability test plug-in; acquiring an operation behavior of a user on a webpage and response data of the webpage in real time by the availability test plug-in as to-be-processed data; analyzing the to-be-processed data stored locally by using the availability test plug-in; and generating an availability test report according to the set content of the user and the availability analysis result. According to the visual webpage availability test report generation method, the collected to-be-processed data is locally stored, so that the data processing efficiency and the data security can be effectively ensured, and the risk of user data leakage is reduced; bidirectional data collection is carried out by collecting the operation behaviors of the user on the webpage and the response data of the webpage, so that the availability test better meets the use requirements of the user, and better test pertinence is achieved.

Description

Technical Field

[0001] The invention relates to a method for generating a web page usability test report, in particular to a method for generating a visual web page usability test report based on a browser plug-in. Background Art

[0002] In the digital age, computer technology, web design and development, and user experience research are developing rapidly, and usability testing of web pages or applications has gradually become an important criterion for measuring product quality. Usability testing not only focuses on the functional implementation of the product, but also pays more attention to the actual experience of users in the process of using the product. The core goal of this test is to ensure that the interaction between the product and the user is as smooth, efficient, and user-friendly as possible, thereby improving user satisfaction and the market competitiveness of the product.

[0003] Existing usability testing methods usually include a series of standardized evaluation processes. These processes evaluate the usability of products from different perspectives, including but not limited to user interviews, questionnaires, cognitive walkthroughs, and field tests. User interviews focus on collecting users' personal experiences and feelings, while questionnaires measure user satisfaction and product usability in a quantitative way. Cognitive walkthroughs identify problems in the design by analyzing the user's cognitive process, while field tests allow users to interact with the product in a real or simulated usage environment to observe and record the user's real behavior.

[0004] During these tests, users are asked to perform some pre-defined tasks, which are designed to simulate various scenarios that users may encounter when actually using the product. While the user is performing the task, the tester will carefully observe the user's behavior patterns, record the problems and difficulties encountered by the user during the operation, and collect user feedback on the usability of the product. In addition, the tester will also evaluate the efficiency and success rate of the user's task completion. Current technology also has a solution for standardized scoring of each module.

[0005] After the test is completed, the collected data and observations will be collated and analyzed, and finally a detailed usability test report will be formed. This report records the test results and problems found in detail, and provides a comprehensive assessment of the product's usability. The report may include a list of problems, improvement suggestions, excerpts from user feedback, and a summary evaluation of the overall usability of the product. It provides valuable feedback to the product team, helping them identify the strengths and weaknesses of the product and guide subsequent product improvement and optimization work.

[0006] In the prior art, although the usability testing methods of web pages and applications have played an important role in evaluating product quality, their shortcomings are also obvious. First, the usability test reports of the prior art usually contain a large amount of data and complex text descriptions. This data-intensive report requires testers to have high data analysis capabilities and takes a lot of time to interpret and analyze, resulting in a longer test cycle and reduced efficiency. Therefore, when testers are faced with complex reports, they are often confused and find it difficult to quickly extract key information, which affects the iteration speed of the product.

[0007] Secondly, existing testing tools are usually inflexible, and testers cannot pause or continue automatic testing as needed. This lack of flexibility limits testers' control over the testing process, making it impossible to conduct in-depth analysis immediately when key problems are found, delaying problem solving and product improvement. This situation not only affects user experience, but may also lead to a decline in product competitiveness in the market.

[0008] In addition, existing tools are not efficient in troubleshooting, and testers need to spend a lot of time locating and troubleshooting problems. The inefficient troubleshooting process increases the workload of testers, prolongs the time to market, and may cause the product to miss the market window. In the face of rapidly changing market demands, this delay may have a negative impact on the survival and development of the enterprise.

[0009] Furthermore, the user interface and interaction design of existing testing tools are often not intuitive enough, which increases the learning and usage costs of testers. Poor user experience may lead to low acceptance of tools by testers, reduce the frequency and scope of use of testing tools, and ultimately affect the accuracy and reliability of test results. Summary of the invention

[0010] The purpose of the invention is to provide a method for generating a visual web page usability test report based on a browser plug-in, which can perform usability testing on a web page and generate a corresponding test report, thereby meeting the user's needs for rapid testing of the web page and lowering the threshold for web page testing.

[0011] Technical solution: The method for generating a visual web page usability test report based on a browser plug-in of the present invention comprises the following steps: Step 1, open the web page to be tested and enable the usability test plug-in; Step 2: The usability test plug-in collects the user's operation behavior on the web page and the response data of the web page in real time as the data to be processed, and stores the collected data to be processed locally; Step 3, using the usability test plug-in to analyze the locally stored data to be processed, and obtain the usability analysis result of the web page; Step 4: The usability test plug-in obtains the user's settings for the test report, generates a usability test report based on the user's settings and the usability analysis results, and displays the generated usability test report to the user.

[0012] Furthermore, in step 2, the specific steps of collecting the user's operation behavior on the web page and the response data of the web page are: Step 2.1, the usability test plug-in adds a DOMContentLoaded event to the web page and starts data collection after the web page is loaded; Step 2.2, the usability test plug-in collects operation behaviors and response data, where the operation behaviors include user click behaviors, form input behaviors, page scrolling behaviors, and page navigation behaviors; the response data includes user ID, timestamp, page information, event details, interface response status, and performance indicators.

[0013] Furthermore, in step 2.2, the user's click behavior is to add click event listeners to all clickable elements using breadth-first search, and record the time, location, and target element of the click; the form input behavior is to collect the user's input content and modification behavior in the form by listening to input and change events; the page scrolling behavior is to record and obtain the scrolling distance and speed by listening to scroll events; the navigation behavior within the page is captured by listening to hashchange and popstate events.

[0014] Furthermore, in step 2.2, the user identifier is the session ID, the page information includes the URL and title, the event details include the event type, the target element attributes and the user input content, and the performance indicators include the page loading time and the response time.

[0015] Furthermore, in step 2, the specific steps for locally storing the collected operation behaviors and response data are as follows: Step 2.3, format the collected operation behavior and response data into a JSON object; Step 2.4, store the formatted operation behavior and response data in the browser's IndexedDB.

[0016] Furthermore, in step 3, the specific steps of using the usability test plug-in to analyze the locally stored data to be processed are: Step 3.1, clean the data to be processed, remove invalid data and duplicate record data in the data to be processed to obtain valid data; Step 3.2, determine various resource indicators from the valid data, including server response time, network bandwidth, page element loading success rate, and page loading time; Step 3.3, scoring each resource indicator in the valid data according to the set indicator scoring standard to obtain the score of each resource indicator; Step 3.4, setting the weight of each resource indicator's impact on the overall usability of the web page; Step 3.5, multiply the scores of each resource indicator by the corresponding weight value to calculate the availability score of each resource indicator, and then add the availability scores of each resource indicator to obtain the overall availability score of the web page; Step 3.6, classifying the usability level of the web page according to the overall usability score of the web page to obtain the overall usability category of the web page; Step 3.7, taking the scores of various resource indicators, the weight values ​​of various resource indicators, the availability scores of various resource indicators, the availability score of the entire web page, and the availability category of the entire web page as the availability analysis result of the web page.

[0017] Furthermore, in step 3.3, the specific steps of scoring each resource indicator in the valid data according to the set indicator scoring criteria are as follows: Step 3.3.1, establish the indicator scoring criteria for each resource indicator. The indicator scoring criteria are as follows: The scoring criteria for the server response time indicator are as follows: if the response time is 0<t<1 second, the mapped response score is 90~100 points; if the response time is 1≤t<2 seconds, the mapped response score is 70~89 points; if the response time is 2≤t<3 seconds, the mapped response score is 50~69 points; if the response time is 3≤t<5 seconds, the mapped response score is 30~49 points; if the response time is 5≤t<100 seconds, the mapped response score is 0~29 points; if the response time is t≥100 seconds, the mapped response score is 0; The scoring criteria for network bandwidth are as follows: if the actual bandwidth is ≥ 120% of the required bandwidth, the bandwidth score is 90-100 points; if the required bandwidth is 80% ≤ the actual bandwidth and is less than 120% of the required bandwidth, the bandwidth score is 70-89 points; if the required bandwidth is 50% ≤ the actual bandwidth and is less than 80% of the required bandwidth, the bandwidth score is 50-69 points; if the required bandwidth is 30% ≤ the actual bandwidth and is less than 50% of the required bandwidth, the bandwidth score is 30-49 points; if the actual bandwidth is less than 30% of the required bandwidth, the bandwidth score is 0-29 points. The scoring standard for the page element loading success rate is as follows: if the page element loading success rate is 98% ≤ and is less than 100%, the success rate score is 90 to 100 points; if the page element loading success rate is 95% ≤ and is less than 97%, the success rate score is 70 to 89 points; if the page element loading success rate is 90% ≤ and is less than 94%, the success rate score is 50 to 69 points; if the page element loading success rate is 80% ≤ and is less than 89%, the success rate score is 30 to 49 points; if the page element loading success rate is less than 80%, the success rate score is 0 to 29 points; The scoring criteria for page loading time are as follows: 0≤loading time<2 seconds, the loading score is 90~100 points; 2≤loading time<4 seconds, the loading score is 60~89 points; 4≤loading time<10 seconds, the loading score is 1~59 points; loading time ≥10 seconds, the loading score is 0 points; Step 3.3.2, obtaining actual data of server response time, network bandwidth, page element loading success rate, and page loading time from valid data; Step 3.3.3, score the actual data of each resource indicator according to the indicator scoring standard. The specific value of the response score is obtained by linear interpolation within the response time interval where the actual response time is located. The specific value of the bandwidth score is obtained by linear interpolation within the bandwidth interval where the actual bandwidth is located. The specific value of the success rate score is obtained by linear interpolation within the success rate interval where the actual page element loading success rate is located. The specific value of the loading score is obtained by linear interpolation within the loading time interval where the actual page loading time is located, so as to obtain the final score of each resource indicator.

[0018] Furthermore, in step 3.4, the specific steps for setting the weight values ​​of the impact of various resource indicators on the overall availability of the web page are: Step 3.4.1, obtaining the usage frequency of the interactive device of the operation behavior in the valid data, and then analyzing the usage frequency of the interactive device and selecting the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result; Step 3.4.2, normalize the importance value of each resource indicator and obtain the weight value of each resource indicator.

[0019] Furthermore, in step 3.4.1, the relative importance ranges of various resource indicators are: the relative importance range of server response time is 4 to 8, the relative importance range of network bandwidth is 3 to 6, the relative importance range of page element loading success rate is 3 to 7, and the relative importance range of page loading time is 3 to 6; In step 3.4.1, the specific steps of analyzing the usage frequency of the interactive device and selecting the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result are: Establish the relationship between the relative importance of the interaction device usage frequency and the server response time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the server response time is 8; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the server response time is 7; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the server response time is 6; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the server response time is 5; if the interaction device usage frequency is ≤0.2Hz, the importance value of the server response time is 4; Establish the relationship between the relative importance of the interactive device usage frequency and the network bandwidth: if the interactive device usage frequency is ≥ 2Hz, the importance value of the network bandwidth is 6; if the interactive device usage frequency is 0.5Hz≤interactive device usage frequency is < 2Hz, the importance value of the network bandwidth is 5; if the interactive device usage frequency is 0.2Hz≤interactive device usage frequency is < 0.5Hz, the importance value of the network bandwidth is 4; if the interactive device usage frequency is ≤ 0.2Hz, the importance value of the network bandwidth is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page element loading success rate: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page element loading success rate is 7; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page element loading success rate is 6; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the page element loading success rate is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the page element loading success rate is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page element loading success rate is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page loading time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page loading time is 6; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page loading time is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<1Hz, the importance value of the page loading time is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page loading time is 3; In step 3.4.2, the specific steps for normalizing the importance values ​​of each resource indicator are as follows: First, obtain the importance value of each resource indicator of the web page; Then the sum of the importance values ​​of each resource indicator is calculated; Finally, the ratio of the importance value of each resource indicator to the total importance is calculated, and each ratio value is used as the weight value of the corresponding resource indicator.

[0020] Furthermore, in step 3.6, the specific steps of classifying the usability level of the web page according to the overall usability score of the web page are: Step 3.6.1, establish a web page usability grading standard, set the overall usability score of the web page between 85 and 100 points as high usability, the overall usability score of the web page between 60 and 84 points as medium usability, and the overall usability score of the web page below 60 points as low usability; Step 3.6.2, obtain the overall usability score of the current web page, and grade the current web page according to the web page usability grading standard to obtain the overall usability category of the current web page.

[0021] Compared with the prior art, the present invention has the following beneficial effects: by locally storing the collected data to be processed, the efficiency of data processing and the security of data can be effectively guaranteed, and the risk of user data leakage can be reduced; by collecting the user's operating behavior on the web page and the response data of the web page for two-way data collection, the usability test can be more in line with the user's needs and has better test targeting; by obtaining the user's setting content for the test report, the report content desired by the user can be generated, and has a better customization effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 The present invention is a flow chart of the method. DETAILED DESCRIPTION

[0023] The technical solution of the present invention is described in detail below with reference to the accompanying drawings, but the protection scope of the present invention is not limited to the embodiments.

[0024] like Figure 1 As shown, the method for generating a visual web page usability test report based on a browser plug-in disclosed in the present invention comprises the following steps: Step 1, open the web page to be tested and enable the usability test plug-in; Step 2: The usability test plug-in collects the user's operation behavior on the web page and the response data of the web page in real time as the data to be processed, and stores the collected data to be processed locally; Step 3, using the usability test plug-in to analyze the locally stored data to be processed, and obtain the usability analysis result of the web page; Step 4: The usability test plug-in obtains the user's settings for the test report, generates a usability test report based on the user's settings and the usability analysis results, and displays the generated usability test report to the user.

[0025] By storing the collected data to be processed locally, the efficiency of data processing and the security of data can be effectively guaranteed, and the risk of user data leakage can be reduced; by collecting the user's operating behavior on the web page and the response data of the web page for two-way data collection, the usability test can be more in line with the user's needs and have better test targeting; by obtaining the user's settings for the test report, the report content that the user wants can be generated, with better customization effect.

[0026] Furthermore, in step 2, the specific steps of collecting the user's operation behavior on the web page and the response data of the web page are: Step 2.1, the usability test plug-in adds a DOMContentLoaded event to the web page and starts data collection after the web page is loaded; Step 2.2, the usability test plug-in collects operation behaviors and response data, where the operation behaviors include user click behaviors, form input behaviors, page scrolling behaviors, and page navigation behaviors; the response data includes user ID, timestamp, page information, event details, interface response status, and performance indicators.

[0027] Furthermore, in step 2.2, the user's click behavior is to add click event listeners to all clickable elements using breadth-first search, and record the time, location, and target element of the click; the form input behavior is to collect the user's input content and modification behavior in the form by listening to input and change events; the page scrolling behavior is to record and obtain the scrolling distance and speed by listening to scroll events; the navigation behavior within the page is captured by listening to hashchange and popstate events.

[0028] Furthermore, in step 2.2, the user identifier is the session ID, the page information includes the URL and title, the event details include the event type, the target element attributes and the user input content, and the performance indicators include the page loading time and the response time.

[0029] Furthermore, in step 2, the specific steps for locally storing the collected operation behaviors and response data are as follows: Step 2.3, format the collected operation behaviors and response data into JSON objects for easy management and query; Step 2.4 stores the formatted operation behavior and response data in the browser's IndexedDB, which is a solution that allows storing large amounts of structured data.

[0030] Furthermore, in order to minimize the impact on the user's browsing experience, data collection and processing tasks will be executed asynchronously in WebWorkers.

[0031] Furthermore, in step 3, the specific steps of using the usability test plug-in to analyze the locally stored data to be processed are: Step 3.1: Clean the data to be processed, remove invalid data and duplicate records in the data to be processed to obtain valid data, and ensure the accuracy and reliability of the analysis results. Invalid data includes abnormal records caused by technical failures or unexpected user behaviors, such as page loading time within an abnormal range or event sequences that obviously deviate from the user's normal behavior. Duplicate data is identified based on the unique identifier of the event, ensuring that each event is recorded only once to avoid bias in the analysis results. Step 3.2, determine various resource indicators from the valid data, including server response time, network bandwidth, page element loading success rate, and page loading time; Step 3.3, scoring each resource indicator in the valid data according to the set indicator scoring standard to obtain the score of each resource indicator; Step 3.4, setting the weight of each resource indicator's impact on the overall usability of the web page; Step 3.5, multiply the scores of each resource indicator by the corresponding weight value to calculate the availability score of each resource indicator, and then add the availability scores of each resource indicator to obtain the overall availability score of the web page; Step 3.6, classifying the usability level of the web page according to the overall usability score of the web page to obtain the overall usability category of the web page; Step 3.7, taking the scores of various resource indicators, the weight values ​​of various resource indicators, the availability scores of various resource indicators, the availability score of the entire web page, and the availability category of the entire web page as the availability analysis result of the web page.

[0032] Furthermore, in step 3.3, the specific steps of scoring each resource indicator in the valid data according to the set indicator scoring criteria are as follows: Step 3.3.1, establish the indicator scoring criteria for each resource indicator. The indicator scoring criteria are as follows: The scoring criteria for the server response time indicator are as follows: if the response time is 0<t<1 second, the mapped response score is 90~100 points; if the response time is 1≤t<2 seconds, the mapped response score is 70~89 points; if the response time is 2≤t<3 seconds, the mapped response score is 50~69 points; if the response time is 3≤t<5 seconds, the mapped response score is 30~49 points; if the response time is 5≤t<100 seconds, the mapped response score is 0~29 points; if the response time is t≥100 seconds, the mapped response score is 0; The scoring criteria for network bandwidth are as follows: if the actual bandwidth is ≥ 120% of the required bandwidth, the bandwidth score is 90-100 points; if the required bandwidth is 80% ≤ the actual bandwidth and is less than 120% of the required bandwidth, the bandwidth score is 70-89 points; if the required bandwidth is 50% ≤ the actual bandwidth and is less than 80% of the required bandwidth, the bandwidth score is 50-69 points; if the required bandwidth is 30% ≤ the actual bandwidth and is less than 50% of the required bandwidth, the bandwidth score is 30-49 points; if the actual bandwidth is less than 30% of the required bandwidth, the bandwidth score is 0-29 points. The scoring standard for the page element loading success rate is as follows: if the page element loading success rate is 98% ≤ and is less than 100%, the success rate score is 90 to 100 points; if the page element loading success rate is 95% ≤ and is less than 97%, the success rate score is 70 to 89 points; if the page element loading success rate is 90% ≤ and is less than 94%, the success rate score is 50 to 69 points; if the page element loading success rate is 80% ≤ and is less than 89%, the success rate score is 30 to 49 points; if the page element loading success rate is less than 80%, the success rate score is 0 to 29 points; The scoring criteria for page loading time are as follows: 0≤loading time<2 seconds, the loading score is 90~100 points; 2≤loading time<4 seconds, the loading score is 60~89 points; 4≤loading time<10 seconds, the loading score is 1~59 points; loading time ≥10 seconds, the loading score is 0 points; Step 3.3.2, obtaining actual data of server response time, network bandwidth, page element loading success rate, and page loading time from valid data; Step 3.3.3, score the actual data of each resource indicator according to the indicator scoring standard. The specific value of the response score is obtained by linear interpolation within the response time interval of the actual response time, the specific value of the bandwidth score is obtained by linear interpolation within the bandwidth interval of the actual bandwidth, the specific value of the success rate score is obtained by linear interpolation within the success rate interval of the actual page element loading success rate, and the specific value of the loading score is obtained by linear interpolation within the loading time interval of the actual page loading time, so as to obtain the final score of each resource indicator. For example, in a certain test, the server response time is 1.5 seconds, and its score calculated by linear interpolation is (89-70) / (2 - 1)×(1.5-1)+70 = 79.5 points.

[0033] Furthermore, in step 3.4, the specific steps for setting the weight values ​​of the impact of various resource indicators on the overall availability of the web page are: Step 3.4.1, obtain the interactive device usage frequency of the operation behavior in the valid data, then analyze the interactive device usage frequency and select the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result. The interactive device usage frequency includes the mouse click frequency, the mouse wheel usage frequency, the keyboard input frequency, etc., and take the maximum usage frequency of these input and output devices as the interactive device usage frequency; Step 3.4.2, normalize the importance value of each resource indicator and obtain the weight value of each resource indicator.

[0034] Furthermore, in step 3.4.1, the relative importance ranges of various resource indicators are: the relative importance range of server response time is 4 to 8, the relative importance range of network bandwidth is 3 to 6, the relative importance range of page element loading success rate is 3 to 7, and the relative importance range of page loading time is 3 to 6; In step 3.4.1, the specific steps of analyzing the usage frequency of the interactive device and selecting the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result are: Establish the relationship between the relative importance of the interaction device usage frequency and the server response time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the server response time is 8; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the server response time is 7; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the server response time is 6; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the server response time is 5; if the interaction device usage frequency is ≤0.2Hz, the importance value of the server response time is 4; Establish the relationship between the relative importance of the interactive device usage frequency and the network bandwidth: if the interactive device usage frequency is ≥ 2Hz, the importance value of the network bandwidth is 6; if the interactive device usage frequency is 0.5Hz≤interactive device usage frequency is < 2Hz, the importance value of the network bandwidth is 5; if the interactive device usage frequency is 0.2Hz≤interactive device usage frequency is < 0.5Hz, the importance value of the network bandwidth is 4; if the interactive device usage frequency is ≤ 0.2Hz, the importance value of the network bandwidth is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page element loading success rate: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page element loading success rate is 7; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page element loading success rate is 6; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the page element loading success rate is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the page element loading success rate is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page element loading success rate is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page loading time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page loading time is 6; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page loading time is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<1Hz, the importance value of the page loading time is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page loading time is 3; In step 3.4.2, the specific steps for normalizing the importance values ​​of each resource indicator are as follows: First, obtain the importance value of each resource indicator of the web page, for example, the importance value of server response time is 5, the importance value of network bandwidth is 5, the importance value of page element loading success rate is 4, and the importance value of page loading time is 6; Then the sum of the importance values ​​of each resource indicator is calculated to be 5+5+4+6=20; Finally, the ratio of the importance value of each resource indicator to the total importance is calculated. For example, the ratio of server response time is 0.25, and each ratio value is used as the weight value of the corresponding resource indicator. For example, the weight value of server response time is 0.25, the weight value of network bandwidth is 0.25, the weight value of page element loading success rate is 0.2, and the weight value of page loading time is 0.3.

[0035] Furthermore, in step 3.5, the scores of various resource indicators are multiplied by the corresponding weight values ​​to calculate the availability scores of various resource indicators, for example, the score of server response time is 80×0.25, the score of network bandwidth is 80×0.25, the score of page element loading success rate is 90×0.2, and the score of page loading time is 70×0.3; Then add up the availability scores of each resource indicator, and the overall availability score of the web page is 20+20+18+21=79 points (out of 100 points), which is medium availability.

[0036] Furthermore, in step 3.6, the specific steps of classifying the usability level of the web page according to the overall usability score of the web page are: Step 3.6.1, establish a web page usability grading standard, set the overall usability score of the web page between 85 and 100 points as high usability, the overall usability score of the web page between 60 and 84 points as medium usability, and the overall usability score of the web page below 60 points as low usability; Step 3.6.2, obtain the overall usability score of the current web page, and grade the current web page according to the web page usability grading standard to obtain the overall usability category of the current web page.

[0037] Furthermore, in step 3.6.2, when grading the current web page, an availability score is generated based on the test results and mapped to different levels, with green representing a high availability level (higher score), yellow representing a medium availability level, and red representing a low availability level (lower score), so that users can intuitively understand the availability status of the web page.

[0038] Furthermore, in step 4, when a usability test report is generated according to the user's settings and the usability analysis results, the usability test report uses relatively intuitive charts and graphs so that the user can intuitively understand the usability test results of the web page.

[0039] To achieve data visualization, the present invention adopts the popular open source chart library Chart.js, which provides a variety of chart types and flexible configuration options to meet the visualization needs of different data sets. The chart library is integrated into the browser's usability testing plug-in to ensure that all charts are generated locally without relying on external servers, thereby ensuring the security and privacy of data processing.

Claims

1. A method for generating a visual web page usability test report based on a browser plug-in, characterized in that: The steps include: Step 1, open the web page to be tested and enable the usability test plug-in; Step 2: The usability test plug-in collects the user's operation behavior on the web page and the response data of the web page in real time as the data to be processed, and stores the collected data to be processed locally; Step 3, using the usability test plug-in to analyze the locally stored data to be processed, and obtain the usability analysis result of the web page; Step 4: The usability test plug-in obtains the user's settings for the test report, generates a usability test report based on the user's settings and the usability analysis results, and displays the generated usability test report to the user.

2. The method for generating a visual web page usability test report based on a browser plug-in according to claim 1, characterized in that: In step 2, the specific steps of collecting the user's operation behavior on the web page and the response data of the web page are: Step 2.1, the usability test plug-in adds a DOMContentLoaded event to the web page and starts data collection after the web page is loaded; Step 2.2, the usability test plug-in collects operation behavior and response data, where the operation behavior includes user click behavior, form input behavior, page scrolling behavior, and page navigation behavior; The response data includes user ID, timestamp, page information, event details, interface response status, and performance indicators.

3. The method for generating a visual web page usability test report based on a browser plug-in according to claim 2, characterized in that: In step 2.2, the user click behavior is to add click event listeners to all clickable elements using breadth-first search, and record the click time, location, and target element; the form input behavior is to collect the user's input content and modification behavior in the form by listening to input and change events; the page scrolling behavior is to record and obtain the scrolling distance and speed by listening to scroll events; the navigation behavior within the page is captured by listening to hashchange and popstate events.

4. The method for generating a visual web page usability test report based on a browser plug-in according to claim 2, characterized in that: In step 2.2, the user identifier is the session ID, the page information includes the URL and title, the event details include the event type, target element attributes, and user input content, and the performance indicators include page loading time and response time.

5. The method for generating a visual web page usability test report based on a browser plug-in according to claim 1, characterized in that: In step 2, the specific steps for locally storing the collected operation behaviors and response data are as follows: Step 2.3, format the collected operation behavior and response data into a JSON object; Step 2.4, store the formatted operation behavior and response data in the browser's IndexedDB.

6. The method for generating a visual web page usability test report based on a browser plug-in according to claim 1, characterized in that: In step 3, the specific steps of using the usability test plug-in to analyze the locally stored data to be processed are: Step 3.1, clean the data to be processed, remove invalid data and duplicate record data in the data to be processed to obtain valid data; Step 3.2, determine various resource indicators from the valid data, including server response time, network bandwidth, page element loading success rate, and page loading time; Step 3.3, scoring each resource indicator in the valid data according to the set indicator scoring standard to obtain the score of each resource indicator; Step 3.4, setting the weight of each resource indicator's impact on the overall usability of the web page; Step 3.5, multiply the scores of each resource indicator by the corresponding weight value to calculate the availability score of each resource indicator, and then add the availability scores of each resource indicator to obtain the overall availability score of the web page; Step 3.6, classifying the usability level of the web page according to the overall usability score of the web page to obtain the overall usability category of the web page; Step 3.7, taking the scores of various resource indicators, the weight values ​​of various resource indicators, the availability scores of various resource indicators, the availability score of the entire web page, and the availability category of the entire web page as the availability analysis result of the web page.

7. The method for generating a visual web page usability test report based on a browser plug-in according to claim 6, characterized in that: In step 3.3, the specific steps for scoring each resource indicator in the valid data according to the set indicator scoring criteria are as follows: Step 3.3.1, establish the indicator scoring criteria for each resource indicator. The indicator scoring criteria are as follows: The scoring criteria for the server response time indicator are as follows: if the response time is 0<t<1 second, the mapped response score is 90~100 points; if the response time is 1≤t<2 seconds, the mapped response score is 70~89 points; if the response time is 2≤t<3 seconds, the mapped response score is 50~69 points; if the response time is 3≤t<5 seconds, the mapped response score is 30~49 points; if the response time is 5≤t<100 seconds, the mapped response score is 0~29 points; if the response time is t≥100 seconds, the mapped response score is 0; The scoring criteria for network bandwidth are as follows: if the actual bandwidth is ≥ 120% of the required bandwidth, the bandwidth score is 90-100 points; if the required bandwidth is 80% ≤ the actual bandwidth and is less than 120% of the required bandwidth, the bandwidth score is 70-89 points; if the required bandwidth is 50% ≤ the actual bandwidth and is less than 80% of the required bandwidth, the bandwidth score is 50-69 points; if the required bandwidth is 30% ≤ the actual bandwidth and is less than 50% of the required bandwidth, the bandwidth score is 30-49 points; if the actual bandwidth is less than 30% of the required bandwidth, the bandwidth score is 0-29 points. The scoring standard for the page element loading success rate is as follows: if the page element loading success rate is 98% ≤ and is less than 100%, the success rate score is 90 to 100 points; if the page element loading success rate is 95% ≤ and is less than 97%, the success rate score is 70 to 89 points; if the page element loading success rate is 90% ≤ and is less than 94%, the success rate score is 50 to 69 points; if the page element loading success rate is 80% ≤ and is less than 89%, the success rate score is 30 to 49 points; if the page element loading success rate is less than 80%, the success rate score is 0 to 29 points; The scoring criteria for page loading time are as follows: 0≤loading time<2 seconds, the loading score is 90~100 points; 2≤loading time<4 seconds, the loading score is 60~89 points; 4≤loading time<10 seconds, the loading score is 1~59 points; loading time ≥10 seconds, the loading score is 0 points; Step 3.3.2, obtaining actual data of server response time, network bandwidth, page element loading success rate, and page loading time from valid data; Step 3.3.3, score the actual data of each resource indicator according to the indicator scoring standard. The specific value of the response score is obtained by linear interpolation within the response time interval where the actual response time is located. The specific value of the bandwidth score is obtained by linear interpolation within the bandwidth interval where the actual bandwidth is located. The specific value of the success rate score is obtained by linear interpolation within the success rate interval where the actual page element loading success rate is located. The specific value of the loading score is obtained by linear interpolation within the loading time interval where the actual page loading time is located, so as to obtain the final score of each resource indicator.

8. The method for generating a visual web page usability test report based on a browser plug-in according to claim 6, characterized in that: In step 3.4, the specific steps for setting the weight values ​​of the impact of various resource indicators on the overall usability of the web page are: Step 3.4.1, obtaining the usage frequency of the interactive device of the operation behavior in the valid data, and then analyzing the usage frequency of the interactive device and selecting the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result; Step 3.4.2, normalize the importance value of each resource indicator and obtain the weight value of each resource indicator.

9. The method for generating a visual web page usability test report based on a browser plug-in according to claim 8, characterized in that: In step 3.4.1, the relative importance ranges of various resource indicators are: the relative importance range of server response time is 4 to 8, the relative importance range of network bandwidth is 3 to 6, the relative importance range of page element loading success rate is 3 to 7, and the relative importance range of page loading time is 3 to 6; In step 3.4.1, the specific steps of analyzing the usage frequency of the interactive device and selecting the importance value of the corresponding resource indicator from the relative importance range of each resource indicator according to the analysis result are: Establish the relationship between the relative importance of the interaction device usage frequency and the server response time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the server response time is 8; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the server response time is 7; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the server response time is 6; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the server response time is 5; if the interaction device usage frequency is ≤0.2Hz, the importance value of the server response time is 4; Establish the relationship between the relative importance of the interactive device usage frequency and the network bandwidth: if the interactive device usage frequency is ≥ 2Hz, the importance value of the network bandwidth is 6; if the interactive device usage frequency is 0.5Hz≤interactive device usage frequency is < 2Hz, the importance value of the network bandwidth is 5; if the interactive device usage frequency is 0.2Hz≤interactive device usage frequency is < 0.5Hz, the importance value of the network bandwidth is 4; if the interactive device usage frequency is ≤ 0.2Hz, the importance value of the network bandwidth is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page element loading success rate: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page element loading success rate is 7; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page element loading success rate is 6; if the interaction device usage frequency is 0.5Hz≤interaction device usage frequency<1Hz, the importance value of the page element loading success rate is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<0.5Hz, the importance value of the page element loading success rate is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page element loading success rate is 3; Establish the relationship between the relative importance of the interaction device usage frequency and the page loading time: if the interaction device usage frequency is ≥ 2Hz, the importance value of the page loading time is 6; if the interaction device usage frequency is 1Hz≤interaction device usage frequency<2Hz, the importance value of the page loading time is 5; if the interaction device usage frequency is 0.2Hz≤interaction device usage frequency<1Hz, the importance value of the page loading time is 4; if the interaction device usage frequency is ≤0.2Hz, the importance value of the page loading time is 3; In step 3.4.2, the specific steps for normalizing the importance values ​​of each resource indicator are as follows: First, obtain the importance value of each resource indicator of the web page; Then the sum of the importance values ​​of each resource indicator is calculated; Finally, the ratio of the importance value of each resource indicator to the total importance is calculated, and each ratio value is used as the weight value of the corresponding resource indicator.

10. The method for generating a visual web page usability test report based on a browser plug-in according to claim 6, characterized in that: In step 3.6, the specific steps for classifying the usability level of a web page according to the overall usability score of the web page are: Step 3.6.1, establish a web page usability grading standard, set the overall usability score of the web page between 85 and 100 points as high usability, the overall usability score of the web page between 60 and 84 points as medium usability, and the overall usability score of the web page below 60 points as low usability; Step 3.6.2, obtain the overall usability score of the current web page, and grade the current web page according to the web page usability grading standard to obtain the overall usability category of the current web page.

Images