CN117520690A - UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast - Google Patents
UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast Download PDFInfo
- Publication number
- CN117520690A CN117520690A CN202410015534.5A CN202410015534A CN117520690A CN 117520690 A CN117520690 A CN 117520690A CN 202410015534 A CN202410015534 A CN 202410015534A CN 117520690 A CN117520690 A CN 117520690A
- Authority
- CN
- China
- Prior art keywords
- style
- database
- css
- tag
- code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 67
- 230000014509 gene expression Effects 0.000 claims abstract description 78
- 230000000007 visual effect Effects 0.000 claims abstract description 47
- 238000009877 rendering Methods 0.000 claims description 37
- 230000015654 memory Effects 0.000 claims description 30
- 238000012916 structural analysis Methods 0.000 claims description 6
- 238000010276 construction Methods 0.000 claims description 4
- 238000012423 maintenance Methods 0.000 abstract description 7
- 238000004590 computer program Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006399 behavior Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 238000013515 script Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 230000005291 magnetic effect Effects 0.000 description 2
- 238000005192 partition Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a UI automation method and a related device based on CSS style prerendering contrast, wherein the method comprises the following steps: acquiring a code file based on a front-end code warehouse, and analyzing the code file to acquire a tag database and a style database; constructing a prerendered page based on the tag database and the style database; acquiring element screenshot based on the automatic execution code; performing visual style matching on the prerendered page based on the element screenshot, and acquiring a corresponding label structure based on a visual style matching result; and constructing an element expression based on the corresponding label structure, acquiring a DOM node by using an automatic execution code based on the element expression, and performing an automatic task based on the DOM node. The invention not only can locate the page element more accurately and quickly, but also reduces the maintenance cost and improves the stability of code execution.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a UI (user interface) automation method and a related device based on CSS (CSS style pre-rendering comparison).
Background
In the traditional UI automation test, an element expression is to be positioned, element positioning and writing are usually carried out by means of a developer tool of a browser, all elements are to be written by a manual searching mode, in the traditional element positioning method, a positioning method only based on xpath is usually adopted, the composition of the xpath element expression is usually dependent on class attributes of the elements, class attributes are usually a substitute of CSS codes in front-end engineering, CSS is a key component of front-end styles, therefore, the uncertainty and the error rate of the positioning method only based on xpath are high, the traditional method is time-consuming and error-prone, the method can be invalid due to page change, the accuracy of UI automation is affected, the test script is invalid due to frequent change of the front-end styles, and the high maintenance cost is brought by frequent update of the test script.
Disclosure of Invention
The invention aims to overcome the defects of the prior art, and provides a UI automation method and a related device based on CSS style prerendering contrast, which not only can more accurately and rapidly position page elements, but also reduce maintenance cost and improve the stability of code execution.
In order to solve the technical problems, the invention provides a UI automation method based on CSS style prerendering contrast, which comprises the following steps:
acquiring a code file based on a front-end code warehouse, and analyzing the code file to acquire a tag database and a style database;
constructing a prerendered page based on the tag database and the style database;
acquiring element screenshot based on the automatic execution code;
performing visual style matching on the prerendered page based on the element screenshot, and acquiring a corresponding label structure based on a visual style matching result;
and constructing an element expression based on the corresponding label structure, acquiring a DOM node by using an automatic execution code based on the element expression, and performing an automatic task based on the DOM node.
Optionally, the code file includes an HTML file and a CSS file.
Optionally, the parsing the code file to obtain a tag database and a style database includes:
carrying out structural analysis on the HTML file in the code file to obtain an HTML tag and an attribute corresponding to the HTML tag;
constructing a tag database based on the HTML tag and the attribute corresponding to the HTML tag;
and extracting CSS class names and CSS style descriptions of the CSS files in the code files, and constructing a style database based on the CSS class names and the CSS style descriptions.
Optionally, the constructing a prerendered page based on the tag database and the style database includes:
creating an HTML file, rendering pages in the HTML file according to a preset sequence by using tag information in a tag database, and performing style rendering on the tag information based on style information in a style database to obtain a prerendered page.
Optionally, the acquiring element screenshot based on the automatic execution code includes:
and capturing the operated element area based on the automatic execution code to obtain element capturing.
Optionally, the performing visual style matching on the prerendered page based on the element screenshot, and obtaining a corresponding tag structure based on a visual style matching result, includes:
searching elements meeting a preset similarity threshold for the prerendered page based on the element screenshot;
and acquiring a corresponding tag structure from the tag database based on the elements meeting a preset similarity threshold.
Optionally, the constructing an element expression based on the corresponding tag structure, and obtaining a DOM node by using an automation execution code based on the element expression, and performing an automation task based on the DOM node, including:
constructing an element expression by using grammar rules of XPath expressions based on the corresponding tag structures, wherein the element expression is used for positioning page elements;
returning the element expression to the automation execution code;
searching DOM nodes by using a find_element method based on the automatic execution code of the returned element expression;
and operating the DOM node to perform an automation task based on a Webdriver driving principle.
In addition, the invention also provides a UI automation device based on CSS style prerendering contrast, which comprises:
the database creation module is used for acquiring a code file based on the front-end code warehouse, analyzing the code file and acquiring a tag database and a style database;
the pre-rendering page construction module is used for constructing a pre-rendering page based on the tag database and the style database;
the element screenshot obtaining module is used for obtaining element screenshot based on the automatic execution code;
the visual pattern matching module is used for performing visual pattern matching on the prerendered page based on the element screenshot and acquiring a corresponding label structure based on a visual pattern matching result;
and the automation task module is used for constructing an element expression based on the corresponding label structure, acquiring a DOM node by utilizing an automation execution code based on the element expression, and performing an automation task based on the DOM node.
In addition, the invention also provides a computer device, which comprises a processor and a memory, wherein the memory is used for storing instructions, and the processor is used for calling the instructions in the memory, so that the computer device executes the UI automation method based on the CSS style prerendering contrast.
In addition, the invention also provides a computer readable storage medium, which stores computer instructions, when the computer instructions run on computer equipment, the computer equipment is caused to execute the UI automation method based on CSS style prerendering contrast.
In the embodiment of the invention, the page elements can be positioned more accurately and rapidly through the application of the visual pattern matching and the tag database, the method is particularly suitable for complex page structures, the uncertainty and the error rate of the traditional positioning method can be reduced, the method has good compatibility to both new technology and the prior art based on the visual pattern rather than the internal structure of a specific frame, the page change can be adapted more flexibly through automatic execution codes, the stability is improved, and the requirement of frequently modifying the execution codes due to page update is reduced due to the constructed element expression, the dynamic content and complex user interaction can be processed better through element screenshot and visual pattern matching, the efficiency and the accuracy of element positioning are improved, and the maintenance cost is reduced.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings which are required in the description of the embodiments or the prior art will be briefly described, it being obvious that the drawings in the description below are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a flow diagram of a UI automation method based on CSS style pre-rendering contrast in an embodiment of the invention;
FIG. 2 is a schematic structural diagram of a UI automation device based on CSS style prerendering contrast in an embodiment of the invention;
fig. 3 is a schematic structural diagram of a computer device in an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Example 1
Referring to fig. 1, fig. 1 is a flowchart illustrating a UI automation method based on CSS style prerendering contrast in an embodiment of the invention.
As shown in fig. 1, a UI automation method based on CSS style prerendering contrast, the method comprising:
s11: acquiring a code file based on a front-end code warehouse, and analyzing the code file to acquire a tag database and a style database;
in an implementation of the present invention, the code files include HTML files and CSS files.
Further, the parsing the code file to obtain a tag database and a style database includes: carrying out structural analysis on the HTML file in the code file to obtain an HTML tag and an attribute corresponding to the HTML tag; constructing a tag database based on the HTML tag and the attribute corresponding to the HTML tag; and extracting CSS class names and CSS description styles of the CSS files in the code files, and constructing a style database based on the CSS class names and the CSS description styles.
Specifically, a corresponding code file is obtained by selecting a corresponding code pulling instruction from a front-end code warehouse, the code file comprises a hypertext markup language (Hyper Text Markup Language, HTML) file and a cascading style sheet (Cascading Style Sheets, CSS) file, the HTML file and the CSS file are two basic elements for constructing a User Interface (UI), the two basic elements are closely connected and interdependently, the Interface realizes a required layout style, the HTML file is used for describing the content, the structure and the semantics of the Interface, and the CSS file is used for describing the style, the layout and the expression of the Interface; carrying out structural analysis on an HTML file in a code file, searching and extracting an HTML label through a regular expression, wherein the HTML label comprises a title label, a paragraph label, a partition label, an image label and the like, analyzing the HTML label to obtain corresponding attributes, acquiring an element object of the HTML label by using a keyword, acquiring the attribute corresponding to the HTML label by using attr () function according to the element object of the HTML label, wherein the attribute corresponding to the HTML label comprises width, margin, background, color and the like; constructing a tag database based on the HTML tags and the attributes corresponding to the HTML tags, matching the HTML tags and the attributes corresponding to the HTML tags, constructing a database for each HTML tag and the attributes corresponding to the HTML tags by using a preset database creation tool, and further obtaining a tag database; extracting CSS class names and CSS style descriptions of CSS files in the code files, acquiring the CSS class names by using a CSS selector, wherein the CSS class names comprise layout class names, element related class names and the like, searching CSS style descriptions corresponding to the CSS class names through style introduction sentences, constructing a style database by using a preset database creation tool based on the CSS class names and the corresponding CSS style descriptions, and creating a tag database and the style database by pulling HTML and CSS files can allow related operations of pages to be expanded more easily.
S12: constructing a prerendered page based on the tag database and the style database;
in the implementation process of the invention, the constructing the prerendered page based on the tag database and the style database comprises the following steps: creating an HTML file, rendering pages in the HTML file according to a preset sequence by using tag information in a tag database, and performing style rendering on the tag information based on style information in a style database to obtain a prerendered page.
Specifically, a new HTML file is created, tag information is rendered onto pages in the HTML file according to a preset sequence in a tag database, meanwhile, style information in a style database is used as a tag rendering style, a CSS interpreter can provide style description for a tag language, therefore, the CSS interpreter is used for rendering the tag in the tag database with the style information, namely, the style information is defined in related attributes of tag information elements, thereby providing basis for layout of an interface, a rendering tree is generated by combining the style information with the rendering of the tag information, related style contents on the page can be covered by the rendering tree, the rendering tree is laid out, nodes required for rendering the page are determined through the layout of the rendering tree, the specific position of the tag of each rendering style on the interface is determined through the nodes required by the page, the layout of each related tag rendered through the style is output, and the related tag is rendered into the page, so that the pre-rendering of the page is completed, and the pre-rendered page is obtained.
S13: acquiring element screenshot based on the automatic execution code;
in the implementation process of the invention, the acquiring element screenshot based on the automatic execution code comprises the following steps: and capturing the operated element area based on the automatic execution code to obtain element capturing.
Specifically, it should be noted that, for the screenshot operation of the automatic execution code, the element to be operated is not actually positioned, but the element region is screenshot, the automatic execution code is positioned on the designated element region, the position and the size information of the element region are acquired by using the corresponding element object attribute according to the positioned element region, the size of the screenshot window is dynamically adjusted, the element to be screenshot is ensured to be in the visible region, then the screenshot of the operated element region can be performed to obtain the corresponding element screenshot, the page change can be more flexibly adapted through the automatic execution code, and the running stability and accuracy are improved.
S14: performing visual style matching on the prerendered page based on the element screenshot, and acquiring a corresponding label structure based on a visual style matching result;
in the implementation process of the invention, the visual style matching is performed on the prerendered page based on the element screenshot, and the corresponding label structure is obtained based on the visual style matching result, which comprises the following steps: searching elements meeting a preset similarity threshold for the prerendered page based on the element screenshot; and acquiring a corresponding tag structure from the tag database based on the elements meeting a preset similarity threshold.
Specifically, visual style matching is performed on the prerendered page according to the element screenshot to be operated, namely, style comparison of the prerendered page is performed, corresponding style rules are selected, index information of the elements can be obtained according to the corresponding style rules through a selector, elements meeting a preset similarity threshold are searched for according to related index information, the visual style matching is applied to the elements of the interface, the elements to be applied with the styles are positioned according to the visual style matching through the selector of the preset combination, if the elements meeting the similarity threshold are found, a label structure corresponding to the elements is returned from a label database, namely, the visual style matching related to the elements is performed on the page, the matching is performed with the prerendered combination style, so that types possibly contained by the elements are analyzed and deduced, the page elements can be positioned more accurately and rapidly through the application of the visual style matching and the label database.
S15: and constructing an element expression based on the corresponding label structure, acquiring a DOM node by using an automatic execution code based on the element expression, and performing an automatic task based on the DOM node.
In the implementation process of the invention, the construction of the element expression based on the corresponding label structure, the acquisition of DOM nodes by using the automatic execution code based on the element expression, and the automatic task based on the DOM nodes comprise the following steps: constructing an element expression by using grammar rules of XPath expressions based on the corresponding tag structures, wherein the element expression is used for positioning page elements; returning the element expression to the automation execution code; searching DOM nodes by using a find_element method based on the automatic execution code of the returned element expression; and operating the DOM node to perform an automation task based on a Webdriver driving principle.
Specifically, an element expression for locating a page element is constructed according to the obtained grammar rules of the label structure and the XPath expression, the element expression can locate the required page element by selecting a corresponding node in the page, the XPath is a language for locating the element in an interface, the grammar rules of the XPath expression are composed of a series of path expressions, namely an absolute path expression, a relative path expression, a predicate, a wildcard, an axis and the like, the element expression can be better located by constructing the element expression by using the relevant grammar rules of the XPath expression and the corresponding label structure, the constructed element expression is returned to an automatic execution code, then the automatic execution code searches a document object model (Document Object Model, DOM) node by using a find_element method, the find_element object method is an element locating method by using the element expression to search the DOM node, the DOM node can also be expressed as DOM element, the DOM node has the function of converting an interface into an object, various operations can be further carried out on the DOM element, the DOM node is operated according to the WebDriber driving principle to carry out automation tasks, the WebDriber driving principle is used for simulating the behavior of a user, various operations are further carried out on a target object, the corresponding operations can be converted into commands which can be understood by a computer through the WebDriber driving principle, the automation tasks are realized through the operations of the DOM node, the time for writing the element expression is reduced, the accuracy of element positioning is improved, the requirement for frequently modifying scripts due to page updating is reduced, the related operations and the content of a page are automatically executed, the page appearance and behavior can be dynamically changed, page changes can be accommodated more flexibly.
In the embodiment of the invention, the page elements can be positioned more accurately and rapidly through the application of the visual pattern matching and the tag database, the method is particularly suitable for complex page structures, the uncertainty and the error rate of the traditional positioning method can be reduced, the method has good compatibility to both new technology and the prior art based on the visual pattern rather than the internal structure of a specific frame, the page change can be adapted more flexibly through automatic execution codes, the stability is improved, and the requirement of frequently modifying the execution codes due to page update is reduced due to the constructed element expression, the dynamic content and complex user interaction can be processed better through element screenshot and visual pattern matching, the efficiency and the accuracy of element positioning are improved, and the maintenance cost is reduced.
Example two
Referring to fig. 2, fig. 2 is a schematic structural diagram of a UI automation device based on CSS style prerendering contrast in an embodiment of the invention.
As shown in fig. 2, a UI automation device based on CSS style prerendering contrast, the device comprising:
database creation module 21: the method comprises the steps of acquiring a code file based on a front-end code warehouse, and analyzing the code file to obtain a tag database and a style database;
in an implementation of the present invention, the code files include HTML files and CSS files.
Further, the parsing the code file to obtain a tag database and a style database includes: carrying out structural analysis on the HTML file in the code file to obtain an HTML tag and an attribute corresponding to the HTML tag; constructing a tag database based on the HTML tag and the attribute corresponding to the HTML tag; and extracting CSS class names and CSS description styles of the CSS files in the code files, and constructing a style database based on the CSS class names and the CSS description styles.
Specifically, a corresponding code file is obtained by selecting a corresponding code pulling instruction from a front-end code warehouse, the code file comprises a hypertext markup language (Hyper Text Markup Language, HTML) file and a cascading style sheet (Cascading Style Sheets, CSS) file, the HTML file and the CSS file are two basic elements for constructing a User Interface (UI), the two basic elements are closely connected and interdependently, the Interface realizes a required layout style, the HTML file is used for describing the content, the structure and the semantics of the Interface, and the CSS file is used for describing the style, the layout and the expression of the Interface; carrying out structural analysis on an HTML file in a code file, searching and extracting an HTML label through a regular expression, wherein the HTML label comprises a title label, a paragraph label, a partition label, an image label and the like, analyzing the HTML label to obtain corresponding attributes, acquiring an element object of the HTML label by using a keyword, acquiring the attribute corresponding to the HTML label by using attr () function according to the element object of the HTML label, wherein the attribute corresponding to the HTML label comprises width, margin, background, color and the like; constructing a tag database based on the HTML tags and the attributes corresponding to the HTML tags, matching the HTML tags and the attributes corresponding to the HTML tags, constructing a database for each HTML tag and the attributes corresponding to the HTML tags by using a preset database creation tool, and further obtaining a tag database; extracting CSS class names and CSS style descriptions of CSS files in the code files, acquiring the CSS class names by using a CSS selector, wherein the CSS class names comprise layout class names, element related class names and the like, searching CSS style descriptions corresponding to the CSS class names through style introduction sentences, constructing a style database by using a preset database creation tool based on the CSS class names and the corresponding CSS style descriptions, and creating a tag database and the style database by pulling HTML and CSS files can allow related operations of pages to be expanded more easily.
The prerendered page building module 22: the method comprises the steps of constructing a prerendered page based on a tag database and a style database;
in the implementation process of the invention, the constructing the prerendered page based on the tag database and the style database comprises the following steps: creating an HTML file, rendering pages in the HTML file according to a preset sequence by using tag information in a tag database, and performing style rendering on the tag information based on style information in a style database to obtain a prerendered page.
Specifically, a new HTML file is created, tag information is rendered onto pages in the HTML file according to a preset sequence in a tag database, meanwhile, style information in a style database is used as a tag rendering style, a CSS interpreter can provide style description for a tag language, therefore, the CSS interpreter is used for rendering the tag in the tag database with the style information, namely, the style information is defined in related attributes of tag information elements, thereby providing basis for layout of an interface, a rendering tree is generated by combining the style information with the rendering of the tag information, related style contents on the page can be covered by the rendering tree, the rendering tree is laid out, nodes required for rendering the page are determined through the layout of the rendering tree, the specific position of the tag of each rendering style on the interface is determined through the nodes required by the page, the layout of each related tag rendered through the style is output, and the related tag is rendered into the page, so that the pre-rendering of the page is completed, and the pre-rendered page is obtained.
Element screenshot acquisition module 23: obtaining an element screenshot based on the automated execution code;
in the implementation process of the invention, the acquiring element screenshot based on the automatic execution code comprises the following steps: and capturing the operated element area based on the automatic execution code to obtain element capturing.
Specifically, it should be noted that, for the screenshot operation of the automatic execution code, the element to be operated is not actually positioned, but the element region is screenshot, the automatic execution code is positioned on the designated element region, the position and the size information of the element region are acquired by using the corresponding element object attribute according to the positioned element region, the size of the screenshot window is dynamically adjusted, the element to be screenshot is ensured to be in the visible region, then the screenshot of the operated element region can be performed to obtain the corresponding element screenshot, the page change can be more flexibly adapted through the automatic execution code, and the running stability and accuracy are improved.
Visual pattern matching module 24: the method comprises the steps of performing visual pattern matching on the prerendered page based on the element screenshot, and acquiring a corresponding label structure based on a visual pattern matching result;
in the implementation process of the invention, the visual style matching is performed on the prerendered page based on the element screenshot, and the corresponding label structure is obtained based on the visual style matching result, which comprises the following steps: searching elements meeting a preset similarity threshold for the prerendered page based on the element screenshot; and acquiring a corresponding tag structure from the tag database based on the elements meeting a preset similarity threshold.
Specifically, visual style matching is performed on the prerendered page according to the element screenshot to be operated, namely, style comparison of the prerendered page is performed, corresponding style rules are selected, index information of the elements can be obtained according to the corresponding style rules through a selector, elements meeting a preset similarity threshold are searched for according to related index information, the visual style matching is applied to the elements of the interface, the elements to be applied with the styles are positioned according to the visual style matching through the selector of the preset combination, if the elements meeting the similarity threshold are found, a label structure corresponding to the elements is returned from a label database, namely, the visual style matching related to the elements is performed on the page, the matching is performed with the prerendered combination style, so that types possibly contained by the elements are analyzed and deduced, the page elements can be positioned more accurately and rapidly through the application of the visual style matching and the label database.
The automation task module 25: the method is used for constructing element expressions based on the corresponding label structures, acquiring DOM nodes by using automation execution codes based on the element expressions, and performing automation tasks based on the DOM nodes.
In the implementation process of the invention, the construction of the element expression based on the corresponding label structure, the acquisition of DOM nodes by using the automatic execution code based on the element expression, and the automatic task based on the DOM nodes comprise the following steps: constructing an element expression by using grammar rules of XPath expressions based on the corresponding tag structures, wherein the element expression is used for positioning page elements; returning the element expression to the automation execution code; searching DOM nodes by using a find_element method based on the automatic execution code of the returned element expression; and operating the DOM node to perform an automation task based on a Webdriver driving principle.
Specifically, an element expression for locating a page element is constructed according to the obtained grammar rules of the label structure and the XPath expression, the element expression can locate the required page element by selecting a corresponding node in the page, the XPath is a language for locating the element in an interface, the grammar rules of the XPath expression are composed of a series of path expressions, namely an absolute path expression, a relative path expression, a predicate, a wildcard, an axis and the like, the element expression can be better located by constructing the element expression by using the relevant grammar rules of the XPath expression and the corresponding label structure, the constructed element expression is returned to an automatic execution code, then the automatic execution code searches a document object model (Document Object Model, DOM) node by using a find_element method, the find_element object method is an element locating method by using the element expression to search the DOM node, the DOM node can also be expressed as DOM element, the DOM node has the function of converting an interface into an object, various operations can be further carried out on the DOM element, the DOM node is operated according to the WebDriber driving principle to carry out automation tasks, the WebDriber driving principle is used for simulating the behavior of a user, various operations are further carried out on a target object, the corresponding operations can be converted into commands which can be understood by a computer through the WebDriber driving principle, the automation tasks are realized through the operations of the DOM node, the time for writing the element expression is reduced, the accuracy of element positioning is improved, the requirement for frequently modifying scripts due to page updating is reduced, the related operations and the content of a page are automatically executed, the page appearance and behavior can be dynamically changed, page changes can be accommodated more flexibly.
In the embodiment of the invention, the page elements can be positioned more accurately and rapidly through the application of the visual pattern matching and the tag database, the method is particularly suitable for complex page structures, the uncertainty and the error rate of the traditional positioning method can be reduced, the method has good compatibility to both new technology and the prior art based on the visual pattern rather than the internal structure of a specific frame, the page change can be adapted more flexibly through automatic execution codes, the stability is improved, and the requirement of frequently modifying the execution codes due to page update is reduced due to the constructed element expression, the dynamic content and complex user interaction can be processed better through element screenshot and visual pattern matching, the efficiency and the accuracy of element positioning are improved, and the maintenance cost is reduced.
The embodiment of the invention provides a computer readable storage medium, on which a computer program is stored, which when executed by a processor, implements the UI automation method based on CSS style prerendering contrast of any one of the above embodiments. The computer readable storage medium includes, but is not limited to, any type of disk including floppy disks, hard disks, optical disks, CD-ROMs, and magneto-optical disks, ROMs (Read-Only memories), RAMs (Random AcceSS Memory, random access memories), EPROMs (EraSable Programmable Read-Only memories), EEPROMs (Electrically EraSable ProgrammableRead-Only memories), flash memories, magnetic cards, or optical cards. That is, a storage device includes any medium that stores or transmits information in a form readable by a device (e.g., computer, cell phone), and may be read-only memory, magnetic or optical disk, etc.
Example III
Referring to fig. 3, fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the invention.
The embodiment of the present invention also provides a computer device comprising a memory 31, a processor 33 and a computer program 32 stored in the memory 31 and executable on the processor 33, as shown in fig. 3. Those skilled in the art will appreciate that the computer device shown in fig. 3 is not limiting on all devices and may include more or fewer components than shown, or may combine certain components. The memory 31 may be used to store a computer program 32 and functional modules, and the processor 33 runs the computer program 32 stored in the memory 31 to perform various functional applications of the device and data processing. The memory may be internal memory or external memory, or include both internal memory and external memory. The internal memory may include read-only memory (ROM), programmable ROM (PROM), electrically Programmable ROM (EPROM), electrically Erasable Programmable ROM (EEPROM), flash memory, or random access memory. The external memory may include a hard disk, floppy disk, ZIP disk, U-disk, tape, etc. The processor 33 may be a central processing unit (Central Processing Unit, CPU), but may also be other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. The general purpose processor may be a microprocessor, a single-chip microcomputer or the processor 33 may be any conventional processor or the like. The processors and memories disclosed herein include, but are not limited to, these types of processors and memories. The processors and memories disclosed herein are by way of example only and not by way of limitation.
As one embodiment, the computer device includes: the one or more processors 33, the memory 31, and the one or more computer programs 32, wherein the one or more application programs 32 are stored in the memory 31 and configured to be executed by the one or more processors 33, and the one or more computer programs 32 are configured to execute the UI automation method based on CSS style prerendering contrast in any one of the above embodiments, and the specific implementation process is referred to the above embodiments and is not repeated herein.
In the embodiment of the invention, the page elements can be positioned more accurately and rapidly through the application of the visual pattern matching and the tag database, the method is particularly suitable for complex page structures, the uncertainty and the error rate of the traditional positioning method can be reduced, the method has good compatibility to both new technology and the prior art based on the visual pattern rather than the internal structure of a specific frame, the page change can be adapted more flexibly through automatic execution codes, the stability is improved, and the requirement of frequently modifying the execution codes due to page update is reduced due to the constructed element expression, the dynamic content and complex user interaction can be better processed through element screenshot and visual pattern matching, the efficiency and the accuracy of element positioning are improved, and the maintenance cost is reduced.
In addition, the UI automation method and related devices based on CSS style prerendering contrast provided by the embodiments of the present invention are described in detail, and specific examples should be adopted to illustrate the principles and embodiments of the present invention, where the descriptions of the above embodiments are only used to help understand the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.
Claims (10)
1. A UI automation method based on CSS style prerendering contrast, the method comprising:
acquiring a code file based on a front-end code warehouse, and analyzing the code file to acquire a tag database and a style database;
constructing a prerendered page based on the tag database and the style database;
acquiring element screenshot based on the automatic execution code;
performing visual style matching on the prerendered page based on the element screenshot, and acquiring a corresponding label structure based on a visual style matching result;
and constructing an element expression based on the corresponding label structure, acquiring a DOM node by using an automatic execution code based on the element expression, and performing an automatic task based on the DOM node.
2. The CSS style prerendering contrast-based UI automation method of claim 1, wherein the code files include HTML files and CSS files.
3. The UI automation method based on CSS style prerendering contrast according to claim 1, wherein the parsing the code file to obtain a tag database and a style database includes:
carrying out structural analysis on the HTML file in the code file to obtain an HTML tag and an attribute corresponding to the HTML tag;
constructing a tag database based on the HTML tag and the attribute corresponding to the HTML tag;
and extracting CSS class names and CSS style descriptions of the CSS files in the code files, and constructing a style database based on the CSS class names and the CSS style descriptions.
4. The UI automation method based on CSS style pre-rendering contrast according to claim 1, wherein the constructing a pre-rendered page based on the tag database and style database comprises:
creating an HTML file, rendering pages in the HTML file according to a preset sequence by using tag information in a tag database, and performing style rendering on the tag information based on style information in a style database to obtain a prerendered page.
5. The UI automation method based on CSS style prerendering contrast according to claim 1, wherein the automatically executing code based acquisition element screenshot comprises:
and capturing the operated element area based on the automatic execution code to obtain element capturing.
6. The UI automation method based on CSS style prerendering contrast according to claim 1, wherein the performing visual style matching on the prerendered page based on the element screenshot and acquiring a corresponding tag structure based on a visual style matching result includes:
searching elements meeting a preset similarity threshold for the prerendered page based on the element screenshot;
and acquiring a corresponding tag structure from the tag database based on the elements meeting a preset similarity threshold.
7. The UI automation method based on CSS style prerendering contrast according to claim 1, wherein the constructing an element expression based on a corresponding tag structure, and acquiring a DOM node with automation execution code based on the element expression, and performing an automation task based on the DOM node, comprises:
constructing an element expression by using grammar rules of XPath expressions based on the corresponding tag structures, wherein the element expression is used for positioning page elements;
returning the element expression to the automation execution code;
searching DOM nodes by using a find_element method based on the automatic execution code of the returned element expression;
and operating the DOM node to perform an automation task based on a Webdriver driving principle.
8. A UI automation device based on CSS style prerendering contrast, the device comprising:
the database creation module is used for acquiring a code file based on the front-end code warehouse, analyzing the code file and acquiring a tag database and a style database;
the pre-rendering page construction module is used for constructing a pre-rendering page based on the tag database and the style database;
the element screenshot obtaining module is used for obtaining element screenshot based on the automatic execution code;
the visual pattern matching module is used for performing visual pattern matching on the prerendered page based on the element screenshot and acquiring a corresponding label structure based on a visual pattern matching result;
and the automation task module is used for constructing an element expression based on the corresponding label structure, acquiring a DOM node by utilizing an automation execution code based on the element expression, and performing an automation task based on the DOM node.
9. A computer device comprising a processor and a memory, wherein the memory is configured to store instructions, the processor configured to invoke the instructions in the memory, to cause the computer device to perform the CSS style pre-rendering contrast based UI automation method of any of claims 1 to 7.
10. A computer readable storage medium storing computer instructions that, when run on a computer device, cause the computer device to perform the CSS style pre-rendering contrast based UI automation method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410015534.5A CN117520690B (en) | 2024-01-05 | 2024-01-05 | UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410015534.5A CN117520690B (en) | 2024-01-05 | 2024-01-05 | UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117520690A true CN117520690A (en) | 2024-02-06 |
| CN117520690B CN117520690B (en) | 2024-04-09 |
Family
ID=89757005
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410015534.5A Active CN117520690B (en) | 2024-01-05 | 2024-01-05 | UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117520690B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117892698A (en) * | 2024-03-14 | 2024-04-16 | 成都数之联科技股份有限公司 | Text gradual change rendering method, equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7246134B1 (en) * | 2004-03-04 | 2007-07-17 | Sun Microsystems, Inc. | System and methods for tag library generation |
| CN103365542A (en) * | 2013-07-01 | 2013-10-23 | 携程计算机技术（上海）有限公司 | User click behavior showing method and system |
| CN108334450A (en) * | 2018-01-26 | 2018-07-27 | 深圳市瑞云科技有限公司 | A kind of test method of CG rendering clients |
| US20210048938A1 (en) * | 2019-08-18 | 2021-02-18 | International Business Machines Corporation | Visual hierarchy design governed user interface modification via augmented reality |
| CN112506600A (en) * | 2020-12-11 | 2021-03-16 | 上海依图网络科技有限公司 | Element positioning method of user interface, device, medium and electronic equipment thereof |
| CN115033822A (en) * | 2022-06-14 | 2022-09-09 | 壹沓科技(上海)有限公司 | Element positioning method, device and equipment and readable storage medium |
-
2024
- 2024-01-05 CN CN202410015534.5A patent/CN117520690B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7246134B1 (en) * | 2004-03-04 | 2007-07-17 | Sun Microsystems, Inc. | System and methods for tag library generation |
| CN103365542A (en) * | 2013-07-01 | 2013-10-23 | 携程计算机技术（上海）有限公司 | User click behavior showing method and system |
| CN108334450A (en) * | 2018-01-26 | 2018-07-27 | 深圳市瑞云科技有限公司 | A kind of test method of CG rendering clients |
| US20210048938A1 (en) * | 2019-08-18 | 2021-02-18 | International Business Machines Corporation | Visual hierarchy design governed user interface modification via augmented reality |
| CN112506600A (en) * | 2020-12-11 | 2021-03-16 | 上海依图网络科技有限公司 | Element positioning method of user interface, device, medium and electronic equipment thereof |
| CN115033822A (en) * | 2022-06-14 | 2022-09-09 | 壹沓科技(上海)有限公司 | Element positioning method, device and equipment and readable storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117892698A (en) * | 2024-03-14 | 2024-04-16 | 成都数之联科技股份有限公司 | Text gradual change rendering method, equipment and storage medium |
| CN117892698B (en) * | 2024-03-14 | 2024-06-07 | 成都数之联科技股份有限公司 | Text gradual change rendering method, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117520690B (en) | 2024-04-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8756571B2 (en) | Natural language text instructions | |
| CN117520690B (en) | UI (user interface) automation method and related device based on CSS (CSS style) style prerendering contrast | |
| CN112148356B (en) | Document generation method, interface development method, device, server and storage medium | |
| CN111737623A (en) | Webpage information extraction method and related equipment | |
| CN111831384A (en) | Language switching method and device, equipment and storage medium | |
| CN101777054A (en) | Method for displaying attribute information of entry and device thereof | |
| CN110347390B (en) | Method, storage medium, equipment and system for rapidly generating WEB page | |
| CN115202626A (en) | Low-code front-end development method supporting multi-technology stack components | |
| CN113177168A (en) | Positioning method based on Web element attribute characteristics | |
| Anthony | Programming for corpus linguistics | |
| CN111124481A (en) | Installation package generation method and device of webpage application program, storage medium and equipment | |
| CN113849718A (en) | Internet tobacco science and technology information automatic acquisition device, method and storage medium | |
| Pohja | COMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGESCOMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGES | |
| CN103473431A (en) | Lightweight method for debugging hypertext preprocessor (PHP) program on line | |
| CN112328246A (en) | Page component generation method and device, computer equipment and storage medium | |
| US20230195825A1 (en) | Browser extension with automation testing support | |
| US9311059B2 (en) | Software development tool that provides context-based data schema code hinting | |
| CN116204692A (en) | Webpage data extraction method and device, electronic equipment and storage medium | |
| Tateishi et al. | DHTML accessibility checking based on static JavaScript analysis | |
| Zosimov et al. | Development of domain-specific language for data processing on the internet | |
| CN113836450B (en) | Data interface generation method for acquiring XPATH based on visual operation | |
| CN117971190B (en) | Page automation operation generation method and related device based on large language model | |
| CN110618809B (en) | Front-end webpage input constraint extraction method and device | |
| CN117591438B (en) | Automatic testing method and related device for UI component atomization | |
| JP2004303097A (en) | Partial document extraction program and partial document extraction method of structured document |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |