CN109614317A - Electronic device, ui testing method and storage medium - Google Patents
Electronic device, ui testing method and storage medium Download PDFInfo
- Publication number
- CN109614317A CN109614317A CN201811339589.2A CN201811339589A CN109614317A CN 109614317 A CN109614317 A CN 109614317A CN 201811339589 A CN201811339589 A CN 201811339589A CN 109614317 A CN109614317 A CN 109614317A
- Authority
- CN
- China
- Prior art keywords
- painting canvas
- canvas
- vision
- test chart
- test
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present invention proposes a kind of ui testing method, comprising: by the test chart for obtaining user interface to be tested；The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, is adaptively adjusted according to size of the first resolution of the test chart to first painting canvas；Obtain vision figure corresponding with the test chart；The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, is adaptively adjusted according to size of the second resolution of the vision figure to second painting canvas；The tristimulus values of pixel at first painting canvas and each same position of the second painting canvas are compared, corresponding test report is generated according to comparing result.It can be realized automation to test the interface UI, test process is simple, and can improve testing efficiency.The present invention also proposes a kind of electronic device and storage medium.
Description
Technical field
The present invention relates to ui testing field more particularly to a kind of electronic device, ui testing method and deposit
Storage media.
Background technique
In software development, the UI interface of application and exploitation are also important a link.In general, the interface UI of application
The vision figure provided by developer according to designer developed, after developing the interface UI, it is also necessary to the interface UI into
Row detection, it is corresponding consistent with corresponding vision figure to determine if.
Traditional UI interface detection needs professional test personnel to design corresponding test frame, such as based on node.JS's
The test frame that the head end tests language such as PhantomJS, CasperJs, codeceptJS, puppeteer is write carries out UI circle
The test in face, not only profession with higher to tester requires this test method, and testing efficiency is low.
Summary of the invention
In view of this, the present invention proposes a kind of electronic device, ui testing method and storage medium, can be realized from
Dynamicization tests the interface UI, and test process is simple, and can improve testing efficiency.
Firstly, to achieve the above object, the present invention proposes a kind of electronic device, the electronic device include memory and
The processor connecting with the memory, the processor is for executing the ui testing journey stored on the memory
Sequence, the ui testing program realize following steps when being executed by the processor:
A1, the test chart for obtaining user interface to be tested；
A2, the test chart is loaded onto the first graphical container the first painting canvas of formation being pre-created, according to the test
The size of first painting canvas is adaptively adjusted in the first resolution of figure；
A3, vision figure corresponding with the test chart is obtained；
A4, the vision figure is loaded onto second graph container the second painting canvas of formation being pre-created, according to the vision
The size of second painting canvas is adaptively adjusted in the second resolution of figure；
A5, the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas are carried out pair
Than generating corresponding test report according to comparing result.
Preferably, in the step A1, the test chart is the UI surface chart of runnable interface in application to be tested；It is described
Step A1 includes:
According to preset test program, application to be tested is opened；
It shows the different interfaces in the application, screenshot is carried out to each interface, the image being truncated to is corresponding institute
State test chart.
Preferably, in the step A2, first graphical container being pre-created is to be arranged using canvas element
Graphical container；First graphical container is provided with canvas label and canvas parameter；The canvas parameter is corresponding
For the width and height of first painting canvas, settable parameter is corresponded to；The first resolution according to the test chart
The step of size of first painting canvas is adaptively adjusted includes: that the width of first painting canvas and height is corresponding
Parameter is revised as the first resolution of the test chart, is adaptively adjusted with the size to first painting canvas.
Preferably, in the step A3, the vision figure is sample set by the application interface for application to be tested
This figure；The step A3 include: vision figure according to the pre-stored data and test and between mapping relations, obtain with the survey
Attempt corresponding vision figure.
Preferably, further include following steps before the step A5:
Canvas element is called, determines on the first painting canvas each picture on the position coordinates of each pixel and the second painting canvas
The position coordinates of vegetarian refreshments, the position coordinates on position coordinates and second painting canvas on first painting canvas correspond；
It is corresponding each that first painting canvas is obtained according to the width of first painting canvas, height and position coordinates circulation
The tristimulus values of pixel；
It is corresponding each that second painting canvas is obtained according to the width of second painting canvas, height and position coordinates circulation
The tristimulus values of pixel.
In addition, to achieve the goals above, the present invention also proposes a kind of ui testing method, and the method includes such as
Lower step:
S1, the test chart for obtaining user interface to be tested；
S2, the test chart is loaded onto the first graphical container the first painting canvas of formation being pre-created, according to the test
The size of first painting canvas is adaptively adjusted in the first resolution of figure；
S3, vision figure corresponding with the test chart is obtained；
S4, the vision figure is loaded onto second graph container the second painting canvas of formation being pre-created, according to the vision
The size of second painting canvas is adaptively adjusted in the second resolution of figure；
S5, the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas are carried out pair
Than generating corresponding test report according to comparing result.
Preferably, in the step S1, the test chart is the UI surface chart of runnable interface in application to be tested；It is described
Step S1 includes:
According to preset test program, application to be tested is opened；
It shows the different interfaces in the application, screenshot is carried out to each interface, the image being truncated to is corresponding institute
State test chart.
Preferably, in the step S2, first graphical container being pre-created is to be arranged using canvas element
Graphical container；First graphical container is provided with canvas label and canvas parameter；The canvas parameter is corresponding
For the width and height of first painting canvas, settable parameter is corresponded to；The first resolution according to the test chart
The step of size of first painting canvas is adaptively adjusted includes: that the width of first painting canvas and height is corresponding
Parameter is revised as the first resolution of the test chart, is adaptively adjusted with the size to first painting canvas.
Preferably, in the step S3, the vision figure is sample set by the application interface for application to be tested
This figure；The step S3 include: vision figure according to the pre-stored data and test and between mapping relations, obtain with the survey
Attempt corresponding vision figure.
In addition, to achieve the above object, the present invention also proposes a kind of computer readable storage medium, described computer-readable
Storage medium is stored with ui testing program, and the ui testing program can be executed by least one processor, with
The step of making at least one described processor execute ui testing method as described above.
Electronic device, ui testing method and storage medium proposed by the invention, by obtaining use to be tested
The test chart at family interface；The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to described
The size of first painting canvas is adaptively adjusted in the first resolution of test chart；Obtain view corresponding with the test chart
Feel figure；The vision figure is loaded onto the second graph container that is pre-created and forms the second painting canvas, according to the of the vision figure
The size of second painting canvas is adaptively adjusted in two resolution ratio；By first painting canvas and each phase of the second painting canvas
Tristimulus values with the pixel at position compare, and generate corresponding test report according to comparing result.It can be realized certainly
Dynamicization tests the interface UI, and test process is simple, and can improve testing efficiency.
Detailed description of the invention
Fig. 1 is the schematic diagram of the optional hardware structure of electronic device one proposed by the present invention；
Fig. 2 is the program module schematic diagram of ui testing in one embodiment of electronic device of the present invention；
Fig. 3 is the implementation flow chart of ui testing method preferred embodiment of the present invention.
The embodiments will be further described with reference to the accompanying drawings for the realization, the function and the advantages of the object of the present invention.
Specific embodiment
In order to make the objectives, technical solutions, and advantages of the present invention clearer, with reference to the accompanying drawings and embodiments, right
The present invention is further elaborated.It should be appreciated that described herein, specific examples are only used to explain the present invention, not
For limiting the present invention.Based on the embodiments of the present invention, those of ordinary skill in the art are not before making creative work
Every other embodiment obtained is put, shall fall within the protection scope of the present invention.
It should be noted that the description for being related to " first ", " second " etc. in the present invention is used for description purposes only, and cannot
It is interpreted as its relative importance of indication or suggestion or implicitly indicates the quantity of indicated technical characteristic.Define as a result, " the
One ", the feature of " second " can explicitly or implicitly include at least one of the features.In addition, the skill between each embodiment
Art scheme can be combined with each other, but must be based on can be realized by those of ordinary skill in the art, when technical solution
Will be understood that the combination of this technical solution is not present in conjunction with there is conflicting or cannot achieve when, also not the present invention claims
Protection scope within.
As shown in fig.1, being the optional hardware structure schematic diagram of electronic device one proposed by the present invention.In the present embodiment,
Electronic device 10 may include, but be not limited only to, and connection memory 11, processor 12, net can be in communication with each other by communication bus 14
Network interface 13.It should be pointed out that Fig. 1 illustrates only the electronic device 10 with component 11-14, it should be understood that simultaneously
All components shown realistic are not applied, the implementation that can be substituted is more or less component.
Wherein, memory 11 includes at least a type of computer readable storage medium, computer readable storage medium
Including flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory etc.), random access storage device (RAM), quiet
State random access storage device (SRAM), electrically erasable programmable read-only memory (EEPROM), can be compiled read-only memory (ROM)
Journey read-only memory (PROM), magnetic storage, disk, CD etc..In some embodiments, memory 11 can be electronics dress
Set 10 internal storage unit, such as the hard disk or memory of electronic device 10.In further embodiments, memory 11 can also be with
It is the outer packet storage device of electronic device 10, such as the plug-in type hard disk being equipped on electronic device 10, intelligent memory card (Smart
Media Card, SMC), secure digital (Secure Digital, SD) card, flash card (Flash Card) etc..Certainly, it stores
Device 11 can also both including electronic device 10 internal storage unit and also including its outer packet storage device.In the present embodiment, storage
Device 11 is installed on the operating system and types of applications software of electronic device 10, such as ui testing program commonly used in storage
Deng.In addition, memory 11 can be also used for temporarily storing the Various types of data that has exported or will export.
Processor 12 can be in some embodiments central processing unit (Central Processing Unit, CPU),
Controller, microcontroller, microprocessor or other data processing chips.Processor 12 is commonly used in control electronic device 10
Overall operation.In the present embodiment, program code or processing data of the processor 12 for being stored in run memory 11, such as
Ui testing program of operation etc..
Network interface 13 may include radio network interface or wired network interface, and network interface 13 is commonly used in filling in electronics
It sets and establishes communication connection between 10 and other electronic equipments.
Communication bus 14 is for realizing the communication connection between component 11-13.
Fig. 1 is illustrated only with component 11-14 and the electronic device of ui testing program 10, it should be understood that
It is, it is not required that implement all components shown, the implementation that can be substituted is more or less component.
Optionally, electronic device 10 can also include user interface (not shown in figure 1), and user interface may include display
Device, input unit such as keyboard, wherein user interface can also be including standard wireline interface and wireless interface etc..
Optionally, in some embodiments, display can be light-emitting diode display, liquid crystal display, touch control type LCD and show
Device and OLED touch device etc..Further, display is alternatively referred to as display screen or display unit, for being shown in electronic device
Information is handled in 10 and for showing visual user interface.
Optionally, in some embodiments, electronic device 10 can also include that audio unit (does not show in audio unit Fig. 1
Out), audio unit can be in call signal reception pattern, call mode, logging mode, speech recognition mould in electronic device 10
When under the isotypes such as formula, broadcast reception mode, received or storage audio data is converted into audio signal；Further
Ground, electronic device 10 can also include audio output unit, and the audio signal that audio output unit converts audio unit exports,
And audio output unit can also provide the relevant audio output of specific function that executes to electronic device 10 (such as calling is believed
Number receive sound, message sink sound etc.), audio output unit may include loudspeaker, buzzer etc..
Optionally, in some embodiments, electronic device 10 can also include alarm unit (not shown), alarm list
Member can provide output and the generation of event is notified electron device 10.Typical event may include calling reception, message
Reception, key signals input, touch input etc..Other than audio or video export, alarm unit can be with different sides
Formula provides output with the generation of notification event.For example, alarm unit can provide output in the form of vibration, exhaled when receiving
Cry, message or it is some other can make electronic device 10 enter communication pattern when, alarm unit can provide tactile output (that is,
Vibration) to notify to user.
In one embodiment, it when the ui testing program stored in memory 11 is executed by processor 12, realizes such as
Lower operation:
A1 obtains the test chart of user interface to be tested；
Specifically, in the present embodiment, the test chart is the UI surface chart of runnable interface in application to be tested.It can root
According to preset test program, application to be tested is opened, and shows the different interfaces in the application, each interface is cut
Figure, the image being truncated to is corresponding test chart.It is possible to further be called by calling encapsulate in advance various
Api (port) obtains the test chart of user interface to be tested.Specifically, it is described it is preparatory encapsulation and provide various call
Api, the various operations for calling api that can execute different scenes.Such as obtain picture size, picture pixels extraction, fault-tolerant model
It encloses, page operation etc..It should be noted that the api encapsulated in advance, can be performed the various behaviour based on browser user interface
Make method, picture acquisition and logical operation of progress browser user interface that can be more flexible etc..
The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to the test by A2
The size of first painting canvas is adaptively adjusted in the first resolution of figure；
Specifically, first graphical container being pre-created is the graphical container being arranged using canvas element, and institute
It states the first graphical container and is provided with canvas label and canvas parameter；The canvas parameter corresponds to first painting canvas
Width and height, correspond to settable parameter；In the present embodiment, by by the width and height of first painting canvas
Corresponding parameter is revised as the first resolution of the test chart, the size of first painting canvas to be adaptively adjusted.
Further, one HTML of the canvas element representation (HyperText Mark-up Language, hypertext markup language
Speech) canvas element, canvas element does not have factum, but defines an API (Application
Programming Interface, application programming interface) support scripting client to load the operation drawn.
A3 obtains vision figure corresponding with the test chart；
Specifically, the vision figure is set by application interface of the designer of application to be tested for application to be tested
Sample graphics.Further, the mapping relations between vision figure and test chart have been stored in advance, it, can after test chart has been determined
To get corresponding vision figure according to the mapping relations.
In one embodiment, corresponding attribute information can be also set in each interface UI of application to be tested, the attribute
Description information comprising corresponding vision figure in information.It, can be from corresponding attribute information after the test chart for getting the interface UI
Obtain the description information of corresponding vision figure.The description information may include the information such as title, the store path of corresponding vision figure.It can
According to the description information incidence relation will be established between test chart and corresponding vision figure.
In one embodiment, multiple vision figures and test chart can also be subjected to image recognition, judges each vision figure
Phase knowledge and magnanimity between test chart to be tested, and using the highest vision figure of the similarity judged as with the vision figure pair
The vision figure answered.
The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, according to the vision by A4
The size of second painting canvas is adaptively adjusted in the second resolution of figure；
Specifically, the second graph container being pre-created is the second graph container being arranged using canvas element,
And the second graph container is provided with canvas label and canvas parameter；The canvas parameter corresponds to described second
The width and height of painting canvas, correspond to settable parameter；In the present embodiment, by by the width of second painting canvas and
Highly corresponding parameter is revised as the second resolution of the vision figure, carries out adaptability tune to the size of second painting canvas
It is whole.Further, one HTML of the canvas element representation (HyperText Mark-up Language, hypertext markup
Language) canvas element, canvas element does not have factum, but defines an API (Application
Programming Interface, application programming interface) support scripting client mapping operation.
It is understood that the first resolution and the second resolution are identical resolution ratio.
A5 carries out the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas pair
Than generating corresponding test report according to comparing result.
Specifically, this case carries out pixel comparing calculation by the tristimulus values (RGB) of pixel.The three primary colors refer to respectively
The primary colors of kind color is red R, green G, indigo plant B, and in code, span is respectively 0~255 to each primary colors from shallow to deep, for example, three is former
Color value R is 0, indicates that primary colors is that red the inside is most light, and tristimulus values R is 255, indicates that primary colors is that red the inside is most dark.Tool
Body, the combination of red (R), green (G), blue (B) different spans are formed different colors, if grey is by the green G128+ of red R128+
Blue B128 composition, pixel code structure are { red:128, green:128, blue:128 }.
Specifically, further include following steps before the step A5: obtaining first painting canvas and described second respectively
The step of tristimulus values of pixel at each same position of painting canvas, specifically, the step include: to call canvas element,
Determine the position coordinates of each pixel on position coordinates of each pixel on the first painting canvas and the second painting canvas, described first
The position coordinates on position coordinates and second painting canvas on painting canvas correspond；
It is corresponding each that first painting canvas is obtained according to the width of first painting canvas, height and position coordinates circulation
The tristimulus values of pixel；
It is corresponding each that second painting canvas is obtained according to the width of second painting canvas, height and position coordinates circulation
The tristimulus values of pixel.
It is understood that as due to test chart with coordinate of the position of each pixel of vision figure on canvas being
, therefore can directly carry out pixel coordinate three primary colors and compare one by one, such as tested picture pixels point testA (1,2) and benchmark
Picture baseA (1,2) pixel compares, and obtains the difference value of the tristimulus values at same position coordinate.
Further, after, the pixel tristimulus values at same position coordinate is had into discrepant pixel and are clicked through
Line flag is simultaneously shown.
Further, the editor's information inputted by the DOM object acquisition of canvas label；Using editor's information to first
The first painting canvas in graphical container is edited.
It should be noted that can directly be edited to picture therein using the graphical container that canvas element is arranged
Operation.Due to the offer of API, user can directly input editor's information, such as increase, the deletion of pixel, resolution adjustment
Deng.Also, it is visually, to further ensure graphical container institute that canvas element, which is formed by graphical container for a user,
Received editor's information can fully demonstrate the demand of user, so that the embodiment of the present invention reduces modification to the greatest extent in implementation process
Number reaches the demand of user in a relatively short period of time, improves the efficiency of test chart built-in testing, shortens the adjustment of test picture and surveys
The time of examination.It needs further exist for being explanatorily that DOM (Document Object Model, DOM Document Object Model), it is W3C state
A set of Web standard of border tissue.It defines a set of attribute, method and the event of access html document object.DOM is with level
The node of structure organization or the set of pieces of information.DOM Document Object Model (Document Object Model) be to HTML with
One group of API that XML file uses.The essence of DOM is to establish the bridge that webpage and scripting language or program language are linked up.Specifically
Ground, by searching for editor's information of the DOM object acquisition input of canvas label, because of the correspondence of canvas label, so that DOM
Editor's information that object acquisition obtains must be it is related to the first painting canvas to be edited in graphical container, ensure that editor's information
Accuracy.
By above-mentioned analysis it is found that electronic device provided by the embodiment of the present invention, passes through user circle that acquisition is to be tested
The test chart in face；The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to the test
The size of first painting canvas is adaptively adjusted in the first resolution of figure；Obtain vision corresponding with the test chart
Figure；The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, according to the second of the vision figure
The size of second painting canvas is adaptively adjusted in resolution ratio；First painting canvas and second painting canvas is each identical
The tristimulus values of pixel at position compare, and generate corresponding test report according to comparing result.It can be realized automatic
The interface UI is tested in change, and test process is simple, and can improve testing efficiency.
In addition, ui testing program of the invention is different according to the function that its each section is realized, it can be with phase
The program module of congenerous is described.It please refers to shown in Fig. 2, is ui testing in one embodiment of electronic device of the present invention
The program module schematic diagram of program.In the present embodiment, the function that ui testing program is realized according to its each section is not
Together, the first acquisition module 201 can be divided into, the first adjustment module 202, second obtains module 203, second adjustment module
204 and contrast module 205.By above description it is found that the so-called program module of the present invention is to refer to complete specific function
Series of computation machine program instruction section, than program more suitable for describe ui testing program holding in electronic device 10
Row process.The functions or operations step that the module 201-205 is realized is similar as above, and and will not be described here in detail, exemplary
Ground, such as wherein:
First acquisition module 201 is used to obtain the test chart of user interface to be tested；
The first adjustment module 202 is used to for the test chart being loaded onto the first graphical container being pre-created and forms the first picture
Cloth is adaptively adjusted according to size of the first resolution of the test chart to first painting canvas；
Second obtains module 203 for obtaining vision figure corresponding with the test chart；
Second adjustment module 204 is used to for the vision figure being loaded onto the second graph container being pre-created and forms the second picture
Cloth is adaptively adjusted according to size of the second resolution of the vision figure to second painting canvas；
Contrast module 205 is used for three of the pixel at first painting canvas and each same position of the second painting canvas
Primary color value compares, and generates corresponding test report according to comparing result.
In addition, the present invention also proposes a kind of ui testing method, please refer to shown in Fig. 3, the ui testing
Method includes the following steps:
S301 obtains the test chart of user interface to be tested；
Specifically, in the present embodiment, the test chart is the UI surface chart of runnable interface in application to be tested.It can root
According to preset test program, application to be tested is opened, and shows the different interfaces in the application, each interface is cut
Figure, the image being truncated to is corresponding test chart.It is possible to further be called by calling encapsulate in advance various
Api (port) obtains the test chart of user interface to be tested.Specifically, it is described it is preparatory encapsulation and provide various call
Api, the various operations for calling api that can execute different scenes.Such as obtain picture size, picture pixels extraction, fault-tolerant model
It encloses, page operation etc..It should be noted that the api encapsulated in advance, can be performed the various behaviour based on browser user interface
Make method, picture acquisition and logical operation of progress browser user interface that can be more flexible etc..
The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to the survey by S302
The size of first painting canvas is adaptively adjusted in the first resolution attempted；
Specifically, first graphical container being pre-created is the graphical container being arranged using canvas element, and institute
It states the first graphical container and is provided with canvas label and canvas parameter；The canvas parameter corresponds to first painting canvas
Width and height, correspond to settable parameter；In the present embodiment, by by the width and height of first painting canvas
Corresponding parameter is revised as the first resolution of the test chart, the size of first painting canvas to be adaptively adjusted.
Further, one HTML of the canvas element representation (HyperText Mark-up Language, hypertext markup language
Speech) canvas element, canvas element does not have factum, but defines an API (Application
Programming Interface, application programming interface) support scripting client to load the operation drawn.
S303 obtains vision figure corresponding with the test chart；
Specifically, the vision figure is set by application interface of the designer of application to be tested for application to be tested
Sample graphics.Further, the mapping relations between vision figure and test chart have been stored in advance, it, can after test chart has been determined
To get corresponding vision figure according to the mapping relations.
In one embodiment, corresponding attribute information can be also set in each interface UI of application to be tested, the attribute
Description information comprising corresponding vision figure in information.It, can be from corresponding attribute information after the test chart for getting the interface UI
Obtain the description information of corresponding vision figure.The description information may include the information such as title, the store path of corresponding vision figure.It can
According to the description information incidence relation will be established between test chart and corresponding vision figure.
In one embodiment, multiple vision figures and test chart can also be subjected to image recognition, judges each vision figure
Phase knowledge and magnanimity between test chart to be tested, and using the highest vision figure of the similarity judged as with the vision figure pair
The vision figure answered.
The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, according to the view by S304
The size of second painting canvas is adaptively adjusted in the second resolution of feel figure；
Specifically, the second graph container being pre-created is the second graph container being arranged using canvas element,
And the second graph container is provided with canvas label and canvas parameter；The canvas parameter corresponds to described second
The width and height of painting canvas, correspond to settable parameter；In the present embodiment, by by the width of second painting canvas and
Highly corresponding parameter is revised as the second resolution of the vision figure, carries out adaptability tune to the size of second painting canvas
It is whole.Further, one HTML of the canvas element representation (HyperText Mark-up Language, hypertext markup
Language) canvas element, canvas element does not have factum, but defines an API (Application
Programming Interface, application programming interface) support scripting client mapping operation.
It is understood that the first resolution and the second resolution are identical resolution ratio.
S305 carries out the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas
Comparison generates corresponding test report according to comparing result.
Specifically, this case carries out pixel comparing calculation by the tristimulus values (RGB) of pixel.The three primary colors refer to respectively
The primary colors of kind color is red R, green G, indigo plant B, and in code, span is respectively 0~255 to each primary colors from shallow to deep, for example, three is former
Color value R is 0, indicates that primary colors is that red the inside is most light, and tristimulus values R is 255, indicates that primary colors is that red the inside is most dark.Tool
Body, the combination of red (R), green (G), blue (B) different spans are formed different colors, if grey is by the green G128+ of red R128+
Blue B128 composition, pixel code structure are { red:128, green:128, blue:128 }.
Specifically, further include following steps before the step A5: obtaining first painting canvas and described second respectively
The step of tristimulus values of pixel at each same position of painting canvas, specifically, the step include: to call canvas element,
Determine the position coordinates of each pixel on position coordinates of each pixel on the first painting canvas and the second painting canvas, described first
The position coordinates on position coordinates and second painting canvas on painting canvas correspond；
It is corresponding each that first painting canvas is obtained according to the width of first painting canvas, height and position coordinates circulation
The tristimulus values of pixel；
It is corresponding each that second painting canvas is obtained according to the width of second painting canvas, height and position coordinates circulation
The tristimulus values of pixel.
It is understood that as due to test chart with coordinate of the position of each pixel of vision figure on canvas being
, therefore can directly carry out pixel coordinate three primary colors and compare one by one, such as tested picture pixels point testA (1,2) and benchmark
Picture baseA (1,2) pixel compares, and obtains the difference value of the tristimulus values at same position coordinate.
Further, after, the pixel tristimulus values at same position coordinate is had into discrepant pixel and are clicked through
Line flag is simultaneously shown.
Further, the editor's information inputted by the DOM object acquisition of canvas label；Using editor's information to first
The first painting canvas in graphical container is edited.
It should be noted that can directly be edited to picture therein using the graphical container that canvas element is arranged
Operation.Due to the offer of API, user can directly input editor's information, such as increase, the deletion of pixel, resolution adjustment
Deng.Also, it is visually, to further ensure graphical container institute that canvas element, which is formed by graphical container for a user,
Received editor's information can fully demonstrate the demand of user, so that the embodiment of the present invention reduces modification to the greatest extent in implementation process
Number reaches the demand of user in a relatively short period of time, improves the efficiency of test chart built-in testing, shortens the adjustment of test picture and surveys
The time of examination.It needs further exist for being explanatorily that DOM (Document Object Model, DOM Document Object Model), it is W3C state
A set of Web standard of border tissue.It defines a set of attribute, method and the event of access html document object.DOM is with level
The node of structure organization or the set of pieces of information.DOM Document Object Model (Document Object Model) be to HTML with
One group of API that XML file uses.The essence of DOM is to establish the bridge that webpage and scripting language or program language are linked up.Specifically
Ground, by searching for editor's information of the DOM object acquisition input of canvas label, because of the correspondence of canvas label, so that DOM
Editor's information that object acquisition obtains must be it is related to the first painting canvas to be edited in graphical container, ensure that editor's information
Accuracy.
By above-mentioned analysis it is found that the ui testing method that the embodiment of the present invention is proposed, to be tested by obtaining
User interface test chart；The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to
The size of first painting canvas is adaptively adjusted in the first resolution of the test chart；It obtains corresponding with the test chart
Vision figure；The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, according to the vision figure
Second resolution the size of second painting canvas is adaptively adjusted；First painting canvas and second painting canvas is every
The tristimulus values of pixel at a same position compare, and generate corresponding test report according to comparing result.It can be real
It now automates and the interface UI is tested, test process is simple, and can improve testing efficiency.
In addition, the present invention also proposes a kind of computer readable storage medium, stored on the computer readable storage medium
There is ui testing program, following operation realized when the ui testing program is executed by processor:
Obtain the test chart of user interface to be tested；
The test chart is loaded onto the first graphical container being pre-created and forms the first painting canvas, according to the test chart
The size of first painting canvas is adaptively adjusted in first resolution；
Obtain vision figure corresponding with the test chart；
The vision figure is loaded onto the second graph container being pre-created and forms the second painting canvas, according to the vision figure
The size of second painting canvas is adaptively adjusted in second resolution；
The tristimulus values of pixel at first painting canvas and each same position of the second painting canvas are compared,
Corresponding test report is generated according to comparing result.
The specific implementation process of computer readable storage medium of the present invention, with above-mentioned electronic device and ui testing
The specific implementation process of method is similar, and details are not described herein.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment side
Method can be realized by means of software and necessary general hardware platform, naturally it is also possible to by hardware, but in many cases
The former is more preferably embodiment.Based on this understanding, technical solution of the present invention substantially in other words does the prior art
The part contributed out can be embodied in the form of software products, which is stored in a storage medium
In (such as ROM/RAM, magnetic disk, CD), including some instructions are used so that a terminal device (can be mobile phone, computer, electricity
Sub-device electronic device, air conditioner or network equipment etc.) execute method described in each embodiment of the present invention.The above is only
The preferred embodiment of the present invention is not intended to limit the scope of the invention, all using in description of the invention and attached drawing
Equivalent structure or equivalent flow shift made by holding, is applied directly or indirectly in other relevant technical fields, and similarly wraps
It includes in scope of patent protection of the invention.
Claims (10)
1. a kind of electronic device, which is characterized in that the electronic device includes memory and the processing that connect with the memory
Device, the processor is for executing the ui testing program stored on the memory, the ui testing program
Following steps are realized when being executed by the processor:
A1, the test chart for obtaining user interface to be tested；
A2, the test chart is loaded onto the first graphical container the first painting canvas of formation being pre-created, according to the test chart
The size of first painting canvas is adaptively adjusted in first resolution；
A3, vision figure corresponding with the test chart is obtained；
A4, the vision figure is loaded onto second graph container the second painting canvas of formation being pre-created, according to the vision figure
The size of second painting canvas is adaptively adjusted in second resolution；
A5, the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas are compared,
Corresponding test report is generated according to comparing result.
2. electronic device as described in claim 1, which is characterized in that in the step A1, the test chart is to be tested
Using the UI surface chart of upper runnable interface；The step A1 includes:
According to preset test program, application to be tested is opened；
It shows the different interfaces in the application, screenshot is carried out to each interface, the image being truncated to is the corresponding survey
Attempt.
3. electronic device as described in claim 1, which is characterized in that in the step A2, first be pre-created
Graphical container is the graphical container being arranged using canvas element；First graphical container be provided with canvas label and
Canvas parameter；The canvas parameter corresponds to the width and height of first painting canvas, corresponds to settable parameter；Institute
Stating the step of size of first painting canvas is adaptively adjusted according to the first resolution of the test chart includes: by institute
The width and the corresponding parameter of height of stating the first painting canvas are revised as the first resolution of the test chart, to first painting canvas
Size be adaptively adjusted.
4. electronic device as described in claim 1, which is characterized in that in the step A3, the vision figure be for
Sample graphics set by the application interface of test application；The step A3 includes: vision figure according to the pre-stored data and test
Mapping relations between obtain vision figure corresponding with the test chart.
5. the electronic device as described in claim 1-4 is any, which is characterized in that before the step A5 further include walking as follows
It is rapid:
Canvas element is called, determines on the first painting canvas each pixel on the position coordinates of each pixel and the second painting canvas
Position coordinates, the position coordinates on position coordinates and second painting canvas on first painting canvas correspond；
The corresponding each pixel of first painting canvas is obtained according to the width of first painting canvas, height and position coordinates circulation
The tristimulus values of point；
The corresponding each pixel of second painting canvas is obtained according to the width of second painting canvas, height and position coordinates circulation
The tristimulus values of point.
6. a kind of ui testing method, which is characterized in that described method includes following steps:
S1, the test chart for obtaining user interface to be tested；
S2, the test chart is loaded onto the first graphical container the first painting canvas of formation being pre-created, according to the test chart
The size of first painting canvas is adaptively adjusted in first resolution；
S3, vision figure corresponding with the test chart is obtained；
S4, the vision figure is loaded onto second graph container the second painting canvas of formation being pre-created, according to the vision figure
The size of second painting canvas is adaptively adjusted in second resolution；
S5, the tristimulus values of the pixel at first painting canvas and each same position of the second painting canvas are compared,
Corresponding test report is generated according to comparing result.
7. ui testing method as claimed in claim 6, which is characterized in that in the step S1, the test chart
For the UI surface chart of runnable interface in application to be tested；The step S1 includes:
According to preset test program, application to be tested is opened；
It shows the different interfaces in the application, screenshot is carried out to each interface, the image being truncated to is the corresponding survey
Attempt.
8. ui testing method as claimed in claim 6, which is characterized in that in the step S2, the preparatory wound
The first graphical container built is the graphical container being arranged using canvas element；First graphical container is provided with canvas mark
Label and canvas parameter；The canvas parameter corresponds to the width and height of first painting canvas, corresponds to settable
Parameter；The step of size of first painting canvas is adaptively adjusted in the first resolution according to test chart packet
It includes: the width of first painting canvas and the corresponding parameter of height being revised as to the first resolution of the test chart, to described
The size of first painting canvas is adaptively adjusted.
9. ui testing method as claimed in claim 6, which is characterized in that in the step S3, the vision figure
It is sample graphics set by the application interface for application to be tested；The step S3 includes: vision according to the pre-stored data
Figure and test and between mapping relations, obtain corresponding with test chart vision figure.
10. a kind of computer readable storage medium, the computer-readable recording medium storage has ui testing program, institute
Stating ui testing program can be executed by least one processor, so that at least one described processor executes such as claim
Described in any one of 6-9 the step of ui testing method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811339589.2A CN109614317A (en) | 2018-11-12 | 2018-11-12 | Electronic device, ui testing method and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811339589.2A CN109614317A (en) | 2018-11-12 | 2018-11-12 | Electronic device, ui testing method and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109614317A true CN109614317A (en) | 2019-04-12 |
Family
ID=66004138
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811339589.2A Pending CN109614317A (en) | 2018-11-12 | 2018-11-12 | Electronic device, ui testing method and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109614317A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2020233331A1 (en) * | 2019-05-20 | 2020-11-26 | 深圳壹账通智能科技有限公司 | User interface automated testing method and apparatus, and computer-readable storage medium |
| CN112559340A (en) * | 2020-12-09 | 2021-03-26 | 上海米哈游天命科技有限公司 | Picture testing method, device, equipment and storage medium |
| CN112616093A (en) * | 2020-12-14 | 2021-04-06 | 重庆紫光华山智安科技有限公司 | Video watermark adding method, system, medium and electronic terminal |
| CN113112573A (en) * | 2021-04-14 | 2021-07-13 | 多点(深圳)数字科技有限公司 | Picture generation method and device based on markup language and electronic equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140147051A1 (en) * | 2011-06-30 | 2014-05-29 | American Express Travel Related Services Company, Inc. | Method and system for webpage regression testing |
| CN103853656A (en) * | 2012-11-30 | 2014-06-11 | 阿里巴巴集团控股有限公司 | Webpage testing method and webpage testing device |
| CN105260301A (en) * | 2015-09-24 | 2016-01-20 | 努比亚技术有限公司 | Visual effect comparison test device of user interfaces and realization method of visual effect comparison test device of user interfaces |
| CN106168922A (en) * | 2016-06-30 | 2016-11-30 | 百度在线网络技术（北京）有限公司 | Method of testing that a kind of terminal interface shows and device |
| CN106598846A (en) * | 2016-11-29 | 2017-04-26 | 上海亿账通互联网科技有限公司 | Application interface test method and apparatus |
-
2018
- 2018-11-12 CN CN201811339589.2A patent/CN109614317A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140147051A1 (en) * | 2011-06-30 | 2014-05-29 | American Express Travel Related Services Company, Inc. | Method and system for webpage regression testing |
| CN103853656A (en) * | 2012-11-30 | 2014-06-11 | 阿里巴巴集团控股有限公司 | Webpage testing method and webpage testing device |
| CN105260301A (en) * | 2015-09-24 | 2016-01-20 | 努比亚技术有限公司 | Visual effect comparison test device of user interfaces and realization method of visual effect comparison test device of user interfaces |
| CN106168922A (en) * | 2016-06-30 | 2016-11-30 | 百度在线网络技术（北京）有限公司 | Method of testing that a kind of terminal interface shows and device |
| CN106598846A (en) * | 2016-11-29 | 2017-04-26 | 上海亿账通互联网科技有限公司 | Application interface test method and apparatus |
Non-Patent Citations (1)
| Title |
|---|
| 李春芳著: "《数据可视化原理与实例》", 30 September 2018 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2020233331A1 (en) * | 2019-05-20 | 2020-11-26 | 深圳壹账通智能科技有限公司 | User interface automated testing method and apparatus, and computer-readable storage medium |
| CN112559340A (en) * | 2020-12-09 | 2021-03-26 | 上海米哈游天命科技有限公司 | Picture testing method, device, equipment and storage medium |
| CN112616093A (en) * | 2020-12-14 | 2021-04-06 | 重庆紫光华山智安科技有限公司 | Video watermark adding method, system, medium and electronic terminal |
| CN113112573A (en) * | 2021-04-14 | 2021-07-13 | 多点(深圳)数字科技有限公司 | Picture generation method and device based on markup language and electronic equipment |
| CN113112573B (en) * | 2021-04-14 | 2024-05-14 | 多点(深圳)数字科技有限公司 | Picture generation method and device based on markup language and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109614317A (en) | Electronic device, ui testing method and storage medium | |
| CN102591848B (en) | Selection of foreground characteristics based on background | |
| US9323418B2 (en) | Method for analyzing GUI design affordances | |
| CN107122301A (en) | Interface detection method and device | |
| CN110134386B (en) | Program editing method and device | |
| CN104391797A (en) | GUI (graphical user interface) widget identification method and device | |
| US20030227483A1 (en) | Displaying operations in an application using a graphical programming representation | |
| CN109358851A (en) | Creation method, device and the computer readable storage medium of chart components | |
| CN104915297B (en) | A kind of automated testing method of the APP power consumption of android equipment | |
| KR20010041944A (en) | Object oriented method of structuring a software step program | |
| CN105511873A (en) | User interface control display method and device | |
| CN108280455A (en) | Human body critical point detection method and apparatus, electronic equipment, program and medium | |
| CN109634841A (en) | Electronic device, automatic interface testing method and storage medium | |
| CN106651301A (en) | Process monitoring method and apparatus | |
| CN109783351A (en) | Interface detection method, apparatus and computer readable storage medium | |
| CN108229418A (en) | Human body critical point detection method and apparatus, electronic equipment, storage medium and program | |
| CN112083919B (en) | Target service code generation method and device based on YAML template | |
| CN108632533A (en) | A kind of control method of camera, mobile terminal and computer readable storage medium | |
| US9361710B2 (en) | Defining a midlet region space | |
| CN105893009A (en) | Display method and device of custom control on the basis of Android platform | |
| CN109684195A (en) | Electronic device, script conversion method and storage medium | |
| CN113626129B (en) | Page color determination method and device and electronic equipment | |
| CN205318371U (en) | Hardware test equipment towards ampere tall and erect system | |
| CN109871205A (en) | GUI code method of adjustment, device, computer installation and storage medium | |
| CN106528115A (en) | Visualized interface development method and device |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190412 |
|
| RJ01 | Rejection of invention patent application after publication |