Webpage check box state processing method based on DOM (Document Object Model) structure

Abstract

The invention discloses a webpage check box state processing method based on a DOM (Document Object Model) structure, which comprises the following steps of: S1, analyzing a DOM tree structure of a page, acquiring all check box element lists on the page, and storing state information of check box elements; s2, dynamically monitoring DOM element changes of the DOM tree to obtain generated new check box elements and changes of original check box elements, and updating the new check box elements and the original check box elements to a check box element list; s3, executing corresponding operation on each check box element in the check box element list according to the business logic; s4, if the operation in the step S3 is abnormal, repeating the step S1 to the step S3 on the abnormal check box element, and if the abnormal check box element is still abnormal, notifying the abnormal check box element; according to the method, the checkbox element list is obtained by analyzing the DOM elements of the page DOM tree structure, and the checkbox element list is updated by dynamically monitoring the change of the DOM elements, so that the continuity, reliability and accuracy of an automatic process are ensured.

Description

Technical Field

[0001] The present invention relates to the field of information processing, and in particular to a web page check box state processing method based on a DOM structure. Background Art

[0002] With the development of information technology, more and more companies are beginning to adopt Robotic Process Automation (RPA) tools to improve the efficiency and accuracy of business processes. RPA tools can simulate the interaction between human users and software applications and automatically perform repetitive tasks. However, when dealing with interactive elements on web pages, especially checkboxes, existing RPA tools often encounter some challenges; Commonly used technologies at this stage include screen scraping and image recognition technology, DOM-based selector technology, and event monitoring-based technology; 1. Screen scraping and image recognition technology locates and operates page elements by capturing screen images and using image recognition algorithms. This method is effective for fixed-layout interfaces, but is prone to errors when web page content changes frequently; In addition, image recognition relies on high-quality images and consistent visual presentation, which is difficult to guarantee in practical applications. When the web page design changes, Or when the resolution is different, image recognition may fail; 2. DOM-based selector technology uses CSS selectors or XPath to locate elements in the page, usually combined with JavaScript libraries (such as jQuery) or native JavaScript methods to read and modify the DOM tree. This technology is more flexible than image recognition, but when the page structure is complex or content is loaded dynamically, there is still the problem of inaccurate positioning. For example, if a check box is dynamically generated by JavaScript, the traditional DOM selector may not be able to find the element immediately. In addition, if the DOM structure of the page changes, the predefined selector may become invalid; 3. Event monitoring-based technology detects changes in the page through the event monitoring mechanism and triggers corresponding automated operations based on these changes. This technology requires an in-depth understanding of the page event mechanism and is relatively complex to implement. Summary of the invention

[0003] The purpose of the present invention is to provide a web page check box state processing method based on DOM structure. The present invention obtains a check box element list by analyzing the DOM elements of the page DOM tree structure, and updates the check box element list by dynamically monitoring the changes of DOM elements, thereby ensuring the continuity, reliability and accuracy of the automation process.

[0004] The technical solution of the present invention is a method for processing the state of a web page check box based on a DOM structure, which is performed according to the following steps:

[0005] Step S1: Analyze the DOM tree structure of the page, obtain a list of all check box elements on the page, and store status information of the check box elements;

[0006] Step S2: Dynamically monitor the DOM element changes of the DOM tree to obtain the generated new check box element and the changes of the original check box element, and update them into the check box element list;

[0007] Step S3: performing corresponding operations on each check box element in the check box element list according to the business logic;

[0008] Step S4: If the operation of step S3 is abnormal, repeat steps S1 to S3 for the abnormal check box element, and notify if it is still abnormal.

[0009] In the above-mentioned web page check box state processing method based on DOM structure, in step S1, the check box element list is obtained through JavaScript, and the check box element information is obtained through the document.querySelectorAll selection method and stored in the check box element list accordingly.

[0010] In the aforementioned web page check box state processing method based on DOM structure, the document.querySelectorAll selection method is performed according to the following steps:

[0011] Step S1.1: Define a document.querySelectorAll statement selector for matching standard check box elements and non-standard check box elements;

[0012] Step S1.2: The selector detects whether there is a check box in the DOM element of the DOM tree. If yes, the corresponding DOM element information is obtained and the next step is performed. If no, the selector ends and outputs the detection result.

[0013] Step S1.3: Detect and obtain the check status of the check boxes one by one. If checked, process and obtain the corresponding DOM element information. If not checked, end.

[0014] In the aforementioned web page check box state processing method based on DOM structure, the standard check box element is an element with a standard tag, and the selector embeds the standard tag in the document.querySelectorAll statement to obtain the corresponding check box element.

[0015] In the aforementioned web page check box state processing method based on DOM structure, the non-standard check box elements include elements with special class names or attribute tags, and HTML elements. The selector embeds the tag class name and attribute corresponding to the element in the document.querySelectorAll statement to obtain the corresponding check box element.

[0016] In the aforementioned web page check box status processing method based on DOM structure, the dynamic monitoring process of step S2 is performed according to the following steps:

[0017] Step S2.1: Set an event listener and callback function. After the event listener detects changes in the DOM tree, it calls the callback function to obtain the changes in the DOM tree and stores them in the check box element list;

[0018] Step S2.1: Set a timer and a callback function. The periodic device periodically executes the callback function to poll the new DOM elements and DOM element changes in the DOM tree, and stores them in the check box element list accordingly.

[0019] In the aforementioned web page check box state processing method based on DOM structure, the event listener is MutationObserver.

[0020] In the aforementioned web page check box state processing method based on the DOM structure, a timer is created through the setInterval function for periodic polling.

[0021] In the aforementioned web page check box state processing method based on DOM structure, the business logic includes click and cancel selection.

[0022] In the aforementioned web page check box state processing method based on DOM structure, the operation abnormality in step S4 includes the non-existence of the check box element and the abnormal state of the check box element.

[0023] Compared with the prior art, the present invention analyzes the DOM tree structure of the page, obtains the list of all check box elements on the page, and stores the status information of the check box elements, so as to accurately locate and obtain all the check box elements in the page; dynamically monitors the DOM element changes of the DOM tree to obtain the generated new check box elements and the changes of the original check box elements, and updates them to the check box element list, accurately realizes the dynamic tracking and updating of the check box elements, and ensures the accuracy of the check box element list; performs corresponding operations on each check box element in the check box element list according to the business logic, and if the operation is abnormal, repeats the DOM element positioning and updating of the abnormal check box element, and notifies the administrator if it is still abnormal, and the error and recovery mechanism ensures the reliability of the automated process. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 It is a schematic diagram of the process of the present invention;

[0025] Figure 2 It is a flowchart of the document.querySelectorAll selection method of the present invention;

[0026] Figure 3 It is a sentence diagram of the standard element of the present invention;

[0027] Figure 4 It is a sentence diagram of the non-standard elements of the present invention;

[0028] Figure 5 It is a sentence diagram of the non-standard elements of the present invention;

[0029] Figure 6 It is a schematic diagram of the workflow of MutationObserver of the present invention;

[0030] Figure 7 It is a schematic diagram of the operation of mutually exclusive elements of the present invention. DETAILED DESCRIPTION

[0031] The present invention is further described below in conjunction with the accompanying drawings and embodiments, but they are not intended to limit the present invention.

[0032] Embodiment: A method for processing a web page check box state based on a DOM structure, as shown in the attached Figure 1 As shown, follow the steps below:

[0033] Step S1: Analyze the DOM tree structure of the page, collect DOM elements as check box elements and status information in the page and generate a check box element list; obtain the check box element list through JavaScript, obtain DOM element information as check box element information through the document.querySelectorAll selection method and store it in the check box element list accordingly. Document.querySelectorAll is a DOM selection method that uses a CSS selector to select all matching elements on the page. This method returns a NodeList (node ​​list), which contains all elements that match a given selector. NodeList is an array-like object that can be traversed like an array; as shown in the attached figure Figure 2 As shown, the document.querySelectorAll selection method follows these steps:

[0034] Step S1.1: Define the document.querySelectorAll statement selector for matching check box elements;

[0035] For standard <input type＝"checkbox"> element, directly use document.querySelectorAll('input[type="checkbox"]:checked') statement to match and obtain the element, as shown in the attached Figure 3 shown.

[0036] As attached Figure 4 As shown, for non-standard <input type＝"checkbox"> Tags, for example, a "non-standard" checkbox element might be something with a specific class name or attributes. 、 or any other HTML element with a class name of "mark icon-zwd" To represent a check box, in this case, use document.querySelectorAll('.mark.icon-zwd.remember') statement to get all elements with .mark and .icon-zwd classes and containing .remember class (indicating the selected state); as shown in the attached Figure 5 As shown, on the same website, the way to mark the check box is basically the same. You can adjust the filtering method according to different websites and use document.querySelectorAll('.radio-label') statement to get all elements with .radio-label class.

[0037] Step S1.2: The selector detects whether there is a check box in the DOM element of the DOM tree. If yes, the corresponding DOM element information is obtained and the next step is performed. If no, the detection is terminated and the detection result is output. The DOM element information includes the element ID and element value of the check box.

[0038] Step S1.3: Detect and obtain the check status of the check boxes one by one, and store them together with the DOM element information of the previous step in a data structure of the check box element list. The data structure is as follows:

[0039]

[0040]

[0041] Step S2: Dynamically monitor the changes of DOM elements in the DOM tree to obtain the generated new checkbox elements and the changes of the original checkbox elements, and update them to the checkbox element list; set MutationObserver as the time listener. MutationObserver is a Web API that can monitor changes in the DOM tree. When the DOM changes, MutationObserver will notify the developer, as shown in the attached figure. Figure 6 The specific steps shown are as follows: create a MutationObserver instance and provide a callback function, which will be called when changes are observed, specify the type of changes to be monitored, such as the addition or deletion of monitored elements, or changes in attributes, and update the global check box element list based on these changes. For example, handleMutations is a defined callback function, which will be called when MutationObserver detects changes in DOM elements. The specific parameters are mutations (an array containing multiple MutationRecord objects, each object represents a DOM change) and observer (the MutationObserver instance that triggers the callback); select the DOM element to be monitored, and MutationObserver starts monitoring. When the DOM tree changes, the callback function is called, and the new DOM element and DOM element changes are obtained in the callback function and stored in the check box element list accordingly; create a timer through the setInterval function, and the periodic device periodically executes the callback function to poll the new DOM elements and DOM element changes in the DOM tree, and store them in the check box element list accordingly.

[0042] Step S3: Perform corresponding operations on each check box element in the check box element list according to the business logic; for unchecked check boxes, simulate a user click action to select them; as shown in the attached figure Figure 7 As shown, for a selected check box, if you need to cancel the selection, simulate the click again. If you encounter some non-cancellable selected states (such as two mutually exclusive buttons), click other elements to cancel the selected state; for an inactivated check box, record its position and try to reactivate it in subsequent steps.

[0043] Step S4: If it is found in step S3 that the check box element does not exist or is in an abnormal state, repeat steps S1-S3 for the abnormal check box element to relocate the check box element. If the relocation fails, wait for a period of time (such as 500 milliseconds) and try again. If it is still abnormal, record the error and notify the administrator.

[0044] In summary, the present invention automatically detects all check box elements on a page by analyzing the DOM tree structure, and determines the current state according to their attributes; introduces a dynamic event monitoring mechanism, which can detect and respond to changes in the page in real time, ensuring the continuity and accuracy of the automation process; and has a multi-level error recovery mechanism for check box elements with abnormal operations, thereby improving the robustness and reliability of the system.

Claims

1. A web page check box state processing method based on DOM structure, characterized by: Follow these steps: Step S1: Analyze the DOM tree structure of the page, obtain a list of all check box elements on the page, and store the status information of the check box elements; Step S2: Dynamically monitor the DOM element changes of the DOM tree to obtain the generated new check box element and the changes of the original check box element, and update them into the check box element list; Step S3: performing corresponding operations on each check box element in the check box element list according to the business logic; Step S4: If the operation of step S3 is abnormal, repeat steps S1 to S3 for the abnormal check box element, and notify if it is still abnormal.

2. The webpage check box state processing method based on DOM structure according to claim 1, characterized in that: In the step S1, the check box element list is obtained through JavaScript, and the check box element information is obtained through the document.querySelectorAll selection method and stored in the check box element list accordingly.

3. The webpage check box state processing method based on DOM structure according to claim 2 is characterized in that: The document.querySelectorAll selection method proceeds as follows: Step S1.1: Define a document.querySelectorAll statement selector for matching standard check box elements and non-standard check box elements; Step S1.2: The selector detects whether there is a check box in the DOM element of the DOM tree. If yes, the corresponding DOM element information is obtained and the next step is performed. If no, the process ends and the detection result is output; Step S1.3: Detect and obtain the check status of the check boxes one by one. If checked, process and obtain the corresponding DOM element information. If not checked, end.

4. The webpage check box state processing method based on DOM structure according to claim 3 is characterized in that: The standard check box element is an element with a standard tag, and the selector embeds the standard tag in the document.querySelectorAll statement to obtain the corresponding check box element.

5. The webpage check box status processing method based on DOM structure according to claim 3 is characterized in that: The non-standard check box elements include elements with special class names or attribute tags and HTML elements. The selector embeds the tag class name and attribute corresponding to the element in the document.querySelectorAll statement to obtain the corresponding check box element.

6. The webpage check box status processing method based on DOM structure according to claim 1, characterized in that: The dynamic monitoring process of step S2 is performed according to the following steps: Step S2.1: Set an event listener and callback function. After the event listener detects changes in the DOM tree, it calls the callback function to obtain the changes in the DOM tree and stores them in the check box element list; Step S2.1: Set a timer and a callback function. The periodic device periodically executes the callback function to poll the new DOM elements and DOM element changes in the DOM tree, and stores them in the check box element list accordingly.

7. The webpage check box state processing method based on DOM structure according to claim 6 is characterized in that: The event listener is MutationObserver.

8. The webpage check box status processing method based on DOM structure according to claim 6, characterized in that: The timer is created via the setInterval function to poll periodically.

9. The webpage check box status processing method based on DOM structure according to claim 1, characterized in that: The business logic includes click and deselect.

10. The webpage check box status processing method based on DOM structure according to claim 1, characterized in that: The operation abnormality of step S4 includes the non-existence of the check box element and the abnormal state of the check box element.

Images