CN103164195A - Selector presenting method based on browser and device - Google Patents

Selector presenting method based on browser and device Download PDF

Info

Publication number
CN103164195A
CN103164195A CN2011104151596A CN201110415159A CN103164195A CN 103164195 A CN103164195 A CN 103164195A CN 2011104151596 A CN2011104151596 A CN 2011104151596A CN 201110415159 A CN201110415159 A CN 201110415159A CN 103164195 A CN103164195 A CN 103164195A
Authority
CN
China
Prior art keywords
selector switch
page elements
browser
mouse
audiomonitor
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
Application number
CN2011104151596A
Other languages
Chinese (zh)
Other versions
CN103164195B (en
Inventor
金鑫
刘涵
石龙华
赵成阳
周妍
周永丰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201110415159.6A priority Critical patent/CN103164195B/en
Publication of CN103164195A publication Critical patent/CN103164195A/en
Application granted granted Critical
Publication of CN103164195B publication Critical patent/CN103164195B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention relates to a selector presenting method based on a browser and a device. The method includes marking a chosen page element from a current webpage, locating the page element, grasping a selector corresponding to the page element, embedding object content of the selector through hyper text markup language code segment, and outputting the object content into an automatic selector interface in the browser for presenting. Manual analysis depending on a visual way is not needed, and inconvenience brought to users by forced shutdown of the internet explorer (IE) browser is avoided.

Description

Selector switch technique of expression and device based on browser
Technical field
The application relates to webpage automatization testing technique field, relates in particular to a kind of selector switch technique of expression and device based on browser.
Background technology
The webpage automatic test mainly is based on framework.Have the operation that must do together to be in webpage automatized script compiling procedure: grasp and verify webpage in selector switch (selector) object.Selector switch can be divided into ID selector switch (#id), Class selector switch (.class), element type (type) selector switch (p), attribute (Attribute) selector switch etc.
Usually, grasp and verify that the process of object of a selector switch (selector) is very long, need at least 1 minute soon, slow need several minutes even longer time.If one to the unfamiliar automatic test person of selector grammer, if run into HTML (Hypertext Markup Language) (HyperText Markup Language in the crawl process, abbreviation HTML) element of level complexity even has and does not know that this awkward situation that how to grasp this element occurs.Even if for a veteran automatic test person, the object of crawl and manual checking selector is still a thing quite consuming time.Equally, when safeguarding the library of object of selector, the object of the selector that lost efficacy is grasped again, and the object institute elapsed time that grasps a brand-new selector does not have difference.
Existing crawl proof scheme to selector switch, general is exactly by the tester, the source code of current web page to be carried out visual examination, after seeing the code of the element content of one section descriptive element in source code, the artificially utilizes the technical merit of oneself, parse the corresponding selector switch of this element, namely write out the contents of object of this selector switch; After acquiring selector switch corresponding to this element, this selector switch is put into an existing testing software, the query function that provides by this software, find out the corresponding element content of this selector switch, by software being found out element content and comparing as the element content that writes out selector switch in source code, if consistent, the crawl of selector switch is accurate so, otherwise crawl again.
generally, above-mentioned crawl and selector switch of manual checking are: at first precondition is the local Automan of installation software, start the IE browser, open the webpage that will grasp page elements, press the f12 key in IE, show developer's instrument picture, press the ctrl key and activate the crawl function from developer's instrument, click a control, IE locks the html source code of this control, the code segment at certain element place, artificial location, element content by element in code segment, by parsing the selector switch of this code, in pointing out the interface, the operating system command symbol starts automatic console (Automan console) program, find out the corresponding element content of this selector switch by find () function, whether the selector that verifies parsing is correct, if the element content that parses is the same with the visual element content of seeing, correct, the success of crawl selector switch, otherwise need again to resolve.
This technical scheme is at present popular, and the developer's tool insert that at first carries by IE, or third party's plug-in unit firefly (Firebug) of red fox (Firefox) are carried out the source code of html element element and located; Then resolve by element content in visual source code the contents of object that draws selector; At last the selector contents of object that parses is put in Automan console interface, parse the corresponding element content of this selector contents of object by carrying out find () designator, whether the element content of verifying certain element in this element content that parses and visual code segment is consistent, if consistent, the selector switch of the element of proof crawl is accurate.
This scheme has three shortcomings.Shortcoming one grabs the HTML code that selector needs artificial pre-aligned page elements before.Shortcoming two, each new selector of manual crawl, accuracy all can't guarantee, need to verify on third party's program Automan Console.Shortcoming three, in the crawled corresponding HTML code of target pages element, if without any the id/class/name property value, and the occasion of hierarchy structure complexity, even if a veteran automatic test person also can't guarantee finally can grab correct selector switch.
Provide new function in the Automan of redaction console, pickup () designator.Key in pickup (URL) designator in Automan console, then open move on to mouse pointer in webpage want to grasp on page elements, the ctrl key of keypad, Automan console can corresponding grab the selector of this element and be presented in Automan Console interface in the shortest active path mode.
[luck is pretty good] button is as example in the http://www.***.com.hk page, utilizes Automan Console to realize that the step of selector object of this page elements of crawl is as follows:
Operation IE browser is also accessed http://www.***.com.hk, shows the content of the Chinese homepage of *** acquiescence in picture;
Operation automan console designator in the designator of [beginning] is pointed out interface [operation] window, windows desktop ejects the Automan console program picture at DOS interface;
Key in pickup (/***/) designator in Automan console picture;
The *** Chinese homepage of the IE browser that desktop has been opened before focusing on;
Then mouse pointer is moved on on [luck is pretty good] button, click Ctrl on keyboard.
The corresponding selector object that grabs [luck is pretty good] button that shows on Automan Console.
The second technical scheme is exactly the new function of using Automan Console to provide: pickup () designator.
But this scheme has two shortcomings.Shortcoming one if will grasp the selector object on browser, just must be installed third party software Automan Console, and the above-mentioned the first scheme of this shortcoming also has.Shortcoming two, usually the beginning of Automan test script or ending meeting are with unified code of closing the IE browser, and Automan Console only is supported in crawl selector object on the IE browser, if carried out the Automan script when crawl selector object, comprise so crawl selector object target pages all IE browsers all can the Automan script carry out be over after autoshutdown, can make troubles to the user.
The application content
The application's purpose is to provide a kind of selector switch technique of expression and device based on browser, solving the low accuracy of manual crawl in prior art, and all page autoshutdowns after perhaps being completed and the problems such as inconvenience brought.
For achieving the above object, the application provides a kind of selector switch technique of expression based on browser.The method comprises:
The selected page elements of sign from current web page;
Locate described page elements, and grasp selector switch corresponding to described page elements; And
By the HTML (Hypertext Markup Language) code segment, the contents of object of described selector switch is embedded, export in the autoselector interface in described browser and show.
The application also provides a kind of selector switch performance device based on browser, comprising:
The mouse-pointing audiomonitor is used for from the selected page elements of current web page sign;
Mouse is clicked audiomonitor, is used for locating described page elements; And
The selector switch placement unit is used for grasping selector switch corresponding to described page elements;
The element content output unit is used for embedding by the contents of object of HTML (Hypertext Markup Language) code segment with described selector switch, and exports in autoselector interface in described browser and show.
The application need not to rely on visual type to carry out manual parsing again, has avoided all pages of browsing to be closed by force and the inconvenience that brings to the user.
Description of drawings
Fig. 1 is that the embodiment of the present application is based on the process flow diagram of the selector switch technique of expression of browser;
Fig. 2 is that the embodiment of the present application is based on the interface schematic diagram 1 based on the red fox browser of the selector switch technique of expression example of browser;
Fig. 3 is that the embodiment of the present application is based on the interface schematic diagram 2 based on the red fox browser of the selector switch technique of expression example of browser;
Fig. 4 is that the embodiment of the present application is based on the schematic diagram of the selector switch performance device of browser.
Embodiment
Below by drawings and Examples, the technical scheme of the embodiment of the present application is described in further detail.
The application provides a kind of selector switch technique of expression and device based on browser, and when practical application, the application's method or device embodiment are rendered as plug in component, this plug in component are embedded in the plug-in unit menu of red fox or Google's browser etc.The application's plug-in unit is called autoselector, and after opening this plug in component, the interface display of autoselector so just can be carried out correct selector switch to the page elements on webpage and obtain in current browser.
The application is based on the selector switch technique of expression of browser, when concrete the application, as shown in Figures 2 and 3.Fig. 2 and Fig. 3 are respectively the application based on autoselector interface signal Fig. 1 and 2 based on red fox (Firefox) browser of the selector switch technique of expression example of browser.start the Firefox browser, keyboard is pressed F12 in this browser interface, show firefly (Firebug) plug-in unit picture, click the menu item " autoselector (Auto selector) " of Firebug, the autoselector interface display is below browser, choose automatic selection (Auto-select) button on the autoselector interface, activate the selector switch function of crawl page elements, mouse moves to the page elements of certain webpage, red dotted line frame locks this page elements, this step has substituted the existing scheme of the first and by the IE plug-in unit, current page has been converted to html source code, and by artificial visual, element place code segment is located out.
Locate as shown in 3. as label in Fig. 2, click this web page element, grab selector switch (selector) and show the contents of object of selector switch.Compare with existing the second technical scheme, third party software is moved and need not additionally to open designator prompting interface [operation] window in the autoselector interface on browser menu.And can close this selector switch crawl function by the autoselector of clicking plug-in unit Firebug, but the target pages of opening can not closed by force and made troubles.
At first the label in Fig. 2 and Fig. 3 is described, be respectively table 1 and table 2
Figure BDA0000119102560000051
Table 1
Figure BDA0000119102560000062
Table 2
Referring to the selector switch technique of expression process flow diagram of Fig. 1 the embodiment of the present application based on browser, Fig. 2 and Fig. 3 come DETAILED DESCRIPTION The present application embodiment based on the selector switch technique of expression of browser.In this example, the embodiment of the present application method is based on the red fox browser and realizes.As shown in Fig. 1,2 and 3, the method comprises the following steps:
Step 11 after choosing the Auto-select button, is obtained the current state of automatic selection button (Auto-select button);
Particularly, after the autoselector in opening the Firebug plug-in unit (Autoselector), the autoselector interface display is clicked the Auto-select button below browser; Automatically select the object of button in practical programs AutoselectorAutoSelectButton by name, by obtaining automatically to select button state function state=getAutoseletorState () function to obtain the state of current button;
Step 12 judges that whether described current state is for selected;
Step 13, when described current state when not selected, judge that whether described automatic selection button is for selected for the first time, when when selected for the first time, execution in step 14 is added single (the Cascading Style Sheet of CSS (cascading style sheet) with described current web page, be called for short CSS) pattern, and step 15 is added audiomonitor; Perhaps when not being selected for the first time, only execution in step 15, to being that DOM Document Object Model object (Document Object Model is called for short DOM) adds audiomonitor on current web page; The audiomonitor that adds is that mouse-pointing (mouse over) and mouse are clicked (click) audiomonitor (listener).
Only click first when automatically selecting (Auto select) button under current this webpage, just add the CSS pattern, as long as this page is not closed, Auto select push button function is afterwards using under this page (after the selector switch that namely current web page has been carried out page elements obtains, closed this Auto-select button, after click again this button and open) all need not to add again the CSS pattern.
Step 16 when selected, is cancelled existing audiomonitor when the current state of described automatic selection button;
Particularly, cancel the audiomonitor that has added: mouse-pointing (mouse over) and click (click) audiomonitor (listener), namely can not carry out again the mouse-pointing event with red empty wire frame representation page elements, and no longer carry out mouse click event, thereby finish Auto-select button crawl element function.
After the Auto-select button crawl element function that is through with specifically, may again click this button to the current page element and carry out element and obtain, so as described above, execution in step 13 and 15.
In other words, click the Auto-select button, if the state before this button is " not selected ", and be the occasion of choosing for the first time Auto-select, add the CSS pattern for red dotted line frame and the blue dotted line frame playing up the back and will show to current page, then current web page is added mouse-pointing and the click audiomonitor (listener) that mouse-pointing (mouseover) and mouse are clicked (click) event.
If the state before the Auto-select button is " selected ", this button shows by protrusion, distinguishes its unchecked state.Again click the Auto-select button, namely cancel the listener of mouseover and click event, finish Auto-select button crawl element function.
The embodiment of the present application is by clicking plug-in unit Firebug autoselector plug-in unit, select automatically to select button to start crawl selector switch function, and need unlike prior art by third party software is installed, by the designator interface moving this software, DOS interface input function by this software grasps selector switch, has reduced so the loaded down with trivial details work of tester.And, when finishing Auto-select button crawl element function, also just click again the Auto-select button, cancel the listener of mouseover and click event, can't occur all page closes are caused inconvenient this situation.
Step 17, mouse-pointing audiomonitor identify selected page elements from current web page;
Be specially, after described page elements was selected, the mouse-pointing audiomonitor identified described page elements from current web page with red dotted line framework.
Namely when mouse moved on on certain page elements of current page, the mouse-pointing audiomonitor identified this page elements with a red dotted line framework.As shown in Figure 2, when mouse moved to " Google Search " this button, red dotted line collimation mark was known this page elements.
The corresponding listener of mouseover event in specific procedure, for
Firebug.Auto-selectorModel.highlightCurrentElm。
The embodiment of the present application identifies page elements by mouseover listener by this step 17, avoided selecting in prior art the IE browser plug-in that current page is converted to HTML code, then the relevant code segment of artificial visual positioning webpage element, reduced like this to the browser of source code reader according to lazy, also saved manually-operated.
Step 18 is located described page elements, and calls autoselector model running run method, obtains selector switch getSelector method with execution, grasps selector switch corresponding to described page elements.
Particularly, as shown in Figure 2, after user's mouse is clicked " Google Search " this page elements, click audiomonitor response click event, locate selecteed described page elements, namely when the user selects this page elements, can respond click function selectCurrentElm (evt), evt.target just refers to the page elements (element) selected.
Be in specific procedure, after taking element, call autoselector model running (Firebug.Auto-selectorModel.run (context, element)) function.Can carry out in the method and obtain selector switch function F irebug.Auto-selectorModel.getSelector (context, element), return to corresponding selector selector switch, contents of object is INPUT=[name=btnK].
At this moment, through said process, grabbed the selector switch of current page element, and with the contents of object of this selector switch, namely the literary style of selector switch is presented in selector switch contents of object display field shown in Figure 2 by the step 20 that the following describes.Compare with the manual acquisition selector switch of resolving like this, the embodiment of the present application provides more correct obtaining.
Step 19 according to the contents of object of described selector switch, grasps element value and element type in described page elements.
Be specially according to described selector switch object, call the autoselector model and obtain the element type method, crawl element value and element type.
Wherein, element type is exactly the selector type, is also the type of HTML control simultaneously.Element type refers to the type of the corresponding HTML control of selector element.
Namely, in specific procedure, obtain the contents of object INPUT=[name=btnK of selector in autoselector model running run function] after, call the autoselector model and obtain element type function F irebug.Auto-selectorModel.getElementType (element), return to type and the element value of currentElement.
As shown in table 3 below, listed possible page elements type and element value
Type Element value
AWatir::AButton <button>Or<input type=' button ’>Or<input type=’submit’>
AWatir::ATextField <input type=’text’>
AWatir::AlipayPassword <input type=’password’>
AWatir::ARadio <input type=’radio’>
AWatir::ACheckBox <input type=’checkbox’>
AWatir::ALink <a>
AWatir::ASelectList <select>
Table 3
In example as shown in Figure 2, for page elements this moment " Google Search " button, namely getting is the represented meaning of the first row in showing, and element type is button, and currentElement value (attribute) is input type=' submit '.Only show that in Fig. 2 mouse selected a page elements, certainly can select a plurality of page elements, after having selected these page elements, mouseover listener identifies these page elements with a plurality of red dotted line frameworks, a plurality of page elements of biological function explore of an Auto select button show the contents of object of a plurality of selector switchs in 4. position.
In the above-described embodiments, above-mentioned steps 19 is for alternatively, and this step 19 can not carried out in other embodiments, namely carry out get the contents of object of selector switch to step 18 after, no longer execution in step 19, direct execution in step 20.
Step 20, embed by the contents of object of HTML (Hypertext Markup Language) (HTML) code segment with described selector switch, and export in autoselector interface in described browser and show, " picture of Auto-Selector " of autoselector interface as shown on Fig. 2 or Fig. 3.
As shown in Figure 2, after mouse click page elements 3., 4. show the contents of object of the crawled selector that arrives.Namely after grabbing the selector switch of page elements, the contents of object of selector switch can be presented on the autoselector interface by selector switch contents of object display field.
Particularly, the contents of object of selector switch is exported in the autoselector interface, 4. and 6. the contents of object viewing area that is embodied in selector switch as shown on Fig. 2 and Fig. 3, namely by HTML code with the output of the contents of object of selector switch in the autoselector interface, show this contents of object according to the text box form.
If carried out in an embodiment step 19, the element value that gets so and element type also can embed the autoselector interface of output in described current web page by the HTML code section and show, and wherein the concrete manifestation in the interface also can show by the mode of text box (not shown in Fig. 2 and Fig. 3).
In practical programs, for each page elements, can embed delegation's HTML code section in the output page at autoselector interface, this HTML code section can obtain by calling acquisition coupling html template function getMatchHTMLTemplate ().Import necessary parameter when calling into, selector switch, the type equivalence is packaged into object and imports into.The getMatchHTMLTemplate function is responsible for splicing and is generated delegation's HTML code section and then return, and exports the content object that shows selector switch in autoselector interface in described browser and/or element type etc. to.
Therefore, the embodiment of the present application by step 18 and 20 and/or 19 after getting selector switch, with the contents of object with the selector switch of the current page element that gets of impression intuitively, perhaps the type of page elements and value etc. all are presented in the Auto-Selector picture, better test effect for the tester.
At last, all add the mouse-pointing event sniffer for the corresponding page elements of selector output in the autoselector interface, and mouse is removed (mouseout) event sniffer.
Be in particular, giving the zone code 6. in the output code section is that text box adds audiomonitor, and the control that element is corresponding shows blue wire frame, and purpose is to be which corresponding control in order to facilitate the user to understand the selector element of locating before.The effect of mouse-pointing event sniffer is to annotate with blue dotted line collimation mark the page elements of having selected, and the effect that mouse is removed event sniffer is just to remove blue dotted line frame on the contrary.
Namely, as shown in Figure 3, when 6. the contents of object viewing area that mouse moves on to selector switch corresponding to the selecteed page elements of current page was text box, the mouse-pointing event sniffer identified this element corresponding " Google Search " button with a blue dotted line framework.Represent that this element had carried out the selector switch crawl of element through the crawl function of Auto-select button.When contents of object viewing area that mouse is removed selector switch corresponding to this page elements 6., mouseout listener removes blue dotted line frame.Interpolation mouse-pointing event sniffer/mouse is removed event sniffer and can be informed under current web page, which page elements had carried out crawl.
Above-mentioned the application's embodiment of the method is described as example to be applied to the Firefox browser, and the application can also use as the expansion plugin of Google's browser (Chrome).Detailed process is opened the plug-in unit menu of Google's browser with above-mentioned described, opens autoselector, and the selector switch interface display is below browser, and other are with above-mentioned described.Be differently, when carrying out the actual software coding, use JavaScript and XML user interface languages (XML User Interface Language, be called for short XUL) the application is implemented on the Firefox browser, perhaps also can use JavaScript and HTML5 to reach similar effect on the Chrome of Google browser, but all in accordance with the function of describing in the above-described embodiments.
The application's embodiment of the method has realized the selector switch of automatic capturing page elements, thereby has avoided artificial crawl and all browser pages to be closed these problems, has finally reached the purpose of " a key crawl ", has shortened the time cost of crawl selector.
Correspondingly, as shown in Figure 4, it is that the embodiment of the present application is based on the schematic diagram of the selector switch performance device of browser, this device is applicable in red fox browser or Google's browser, be embedded in the plug-in unit menu item as plug in component Autoselector, after opening plug-in unit establishment Autoselector during this embodiment device practical application, show as the autoselector interface of opening below browser, the inside comprises automatic selection button.
Referring to Fig. 2,3 and Fig. 4, and the associated description of said method embodiment, the embodiment of the present application being described based on the selector switch performance device of browser, the application's device embodiment carries out all processes of the application's embodiment of the method.As shown in Figure 4, this embodiment comprises based on the selector switch performance device of browser:
Automatically select button state acquiring unit 41, be used for obtaining the current state of automatic selection button;
Particularly, after the autoselector (Autoselector) in opening Firebug plug-in unit or Google's browser, the autoselector interface display is clicked the Auto-select button below browser; Automatically select the object of button in practical programs AutoselectorAutoSelectButton by name, by obtaining automatically to select button state function state=getAutoseletorState () function to obtain the state of current button;
Automatically select button state judging unit 42, be used for judging described current state whether for not choosing, and when when not choosing, judge that whether described automatic selection button is for selected for the first time;
Audiomonitor adding device 43, be used for when learning that described automatic selection button state judging unit 42 judges that described automatic selection buttons are when selected for the first time, described current web page is added the single css pattern of CSS (cascading style sheet), and add described mouse-pointing audiomonitor and click audiomonitor; When not when choosing for the first time, add described mouse-pointing audiomonitor and click audiomonitor.
Only click first when automatically selecting (Auto select) button under current this webpage, add the CSS pattern, as long as this page is not closed, Auto select push button function is afterwards using under this page (after the selector switch that namely current web page has been carried out page elements obtains, closed this Auto-select button, after click again this button and open) all need not to add again the CSS pattern.
Audiomonitor is cancelled unit 44, is used for when the current state of learning the described automatic selection button state judging unit 42 described automatic selection buttons of judgement cancelling existing described mouse-pointing mouseover audiomonitor and click click audiomonitor when selected.
The audiomonitor of namely cancelling the document object that adds is mouse-pointing (mouse over) and clicks (click) audiomonitor (listener), namely can not carry out again the mouse-pointing event with red empty wire frame representation page elements, no longer carry out mouse click event, finish Auto-select button crawl element function.
By clicking plug-in unit autoselector assembly, select automatically to select button to start crawl selector switch function, and need unlike prior art by third party software is installed, grasp selector switch by designator interface input function, reduced so the loaded down with trivial details work of tester.And, when finishing Auto-select button crawl element function, also just click again the Auto-select button, cancel the listener of mouse-pointing and mouse click event, can't occur all page closes are caused inconvenient this situation.
Described mouse-pointing audiomonitor 45 is used for from the selected page elements of current web page sign;
Particularly, when mouse moved on on certain page elements of current page, the mouse-pointing audiomonitor identified this page elements with a red dotted line framework.As shown in Figure 2, when mouse moved to " Google Search " this button, red dotted line collimation mark was known this page elements.
The corresponding listener of mouseover event in specific procedure, for
Firebug.Auto-selectorModel.highlightCurrentElm。
The embodiment of the present application identifies page elements by the mouse-pointing audiomonitor based on the selector switch performance device of browser, avoided selecting in prior art the IE browser plug-in that current page is converted to HTML code, then the relevant code segment of artificial visual positioning webpage element, reduced like this to the browser of source code reader according to lazy, also saved manually-operated;
As shown in the figure, described click click audiomonitor 46 is used for locating described page elements after the described mouse-pointing audiomonitor 45 selecteed page elements of sign;
Particularly, as shown in Figure 2, after user's mouse is clicked " Google Search " this page elements, click audiomonitor response click event, locate selecteed described page elements, namely when the user selects this page elements, can respond and click click function selectCurrentElm (evt), evt.target just refers to the page elements (element) selected.
Selector switch placement unit 47 is used for after described click audiomonitor 46 positioning webpage elements, calls autoselector object model operation function, carries out and obtains the selector switch function, grasps selector switch corresponding to described page elements.
As shown in Figure 2, after mouse click page elements 3., 4. show the contents of object of the crawled selector that arrives.Namely after grabbing the selector switch of page elements, the contents of object of selector switch can be presented on the autoselector interface by selector switch contents of object display field.
Particularly, selector switch placement unit 47 specifically comprises as described in Figure 4:
Autoselector object model operation unit 471 is used for carrying out the selector switch getselector method of obtaining;
Selector switch object placement unit 472 is used for calling described autoselector object model operation run unit 471, carries out the selector switch getselector method of obtaining, and grasps selector switch object corresponding to described page elements.
Be in specific procedure, click audiomonitor 46 positioning webpage elements, the click function calls autoselector model running (Firebug.Auto-selectorModel.run (context, element)) function after taking element.Can carry out in the method and obtain selector switch function F irebug.Auto-selectorModel.getSelector (context, element), return to corresponding selector selector switch, contents of object is INPUT=[name=btnK].
At this moment, through said process, grabbed the selector switch of current page element, and with the contents of object of this selector switch, namely the literary style of selector switch is presented in selector switch contents of object display field shown in Figure 2.Compare with the manual acquisition selector switch of resolving like this, the embodiment of the present application provides more correct obtaining.
As shown in Figure 4, the embodiment of the present application also comprises based on the selector switch performance device of browser:
Element content placement unit 48 is used for calling according to selector switch object placement unit 472 contents of object of the described selector switch that described autoselector object model operation run unit 471 grabs, element value and the element type of the described page elements of crawl.Described element content placement unit 48 is specially:
The autoselector model obtains element type unit 481, is used for carrying out the autoselector model and obtains the element type method;
Call unit 482 is used for the contents of object according to described selector switch, calls described autoselector model and obtains element type unit 481, carries out the autoselector model and obtains the element type method, element value and the element type of the described page elements of crawl.
Namely, in specific procedure, obtain the contents of object INPUT=[name=btnK of selector in autoselector model running run function] after, call the autoselector model and obtain element type function F irebug.Auto-selectorModel.getElementType (element), return to type and the element value of currentElement.Possible page elements type and element value can be referring to above-mentioned described tables 3.
As shown in Figure 4, should also comprise based on the selector switch performance device of browser:
Element content output unit 49, be used for embedding by the contents of object of HTML (Hypertext Markup Language) code segment with described selector switch, and export in autoselector interface in described browser and show, and call unit 482 is called described autoselector model obtain described element value that element type unit 481 grabs and element type and embed by the HTML code section and export in the autoselector interface.
Particularly, the contents of object of selector switch is exported in the autoselector interface, 4. and 6. the contents of object viewing area that is embodied in selector switch as shown on Fig. 2 and Fig. 3, namely by HTML code with the output of the contents of object of selector switch in the autoselector interface, show this contents of object according to the text box form.
For each element, can embed delegation's HTML code section in the output page, this HTML code section can obtain by calling acquisition coupling html template function getMatchHTMLTemplate ().Import necessary parameter when calling into, selector switch, the type equivalence is packaged into object and imports into.Get MatchHTMLTemplate function is responsible for splicing and is generated delegation's HTML code section and then return to and export to the content object that shows selector switch in autoselector interface in described browser and/or element type etc.
Therefore, after getting selector switch, with the selector switch with the current page element that gets of impression intuitively, the type of page elements and value etc. all are presented in the Auto-Selector picture, better test effect for the tester.
Described audiomonitor adding device 43, also be used for after the element content output unit 49 described element values of output and element type, all add the mouse-pointing event sniffer to each corresponding described page elements of selector switch that outputs in the autoselector interface, and mouse is removed event sniffer.
Be in particular, giving the zone code 6. in the output code section is that text box adds audiomonitor, and the control that element is corresponding shows blue wire frame, and purpose is to be which corresponding control in order to facilitate the user to understand the selector element of locating before.The effect of mouse-pointing event sniffer is to annotate with blue dotted line collimation mark the page elements of having selected, and it is just to remove blue dotted line frame on the contrary that mouse is removed event sniffer.
Namely, as shown in Figure 3,6. the time, the mouse-pointing event sniffer identifies this element corresponding " Google Search " button with a blue dotted line framework when contents of object viewing area that mouse moves on to selector switch corresponding to the selecteed page elements of current page.Represent that this element had carried out the selector switch crawl of element through the crawl function of Auto-select button.When contents of object viewing area that mouse is removed selector switch corresponding to this page elements 6., mouse is removed event sniffer and is removed blue dotted line frame.The listener that removes event for each result items (resultItem) interpolation mouse-pointing event/mouse can inform under current web page, which page elements had carried out crawl.
Above-mentioned the application's device embodiment is described as example to be applied to the Firefox browser, and the application can also use as the expansion plugin of Google's browser (Chrome).Detailed process is opened the plug-in unit menu of Google's browser with above-mentioned described, opens autoselector, and the selector switch interface display is below browser, and other are with above-mentioned described.Be differently, when carrying out the actual software coding, use JavaScript and XUL that the application is implemented on the Firefox browser, perhaps also can use JavaScript and HTML5 to reach similar effect on the Chrome of Google browser, but all in accordance with the function of describing in the above-described embodiments.
The embodiment of the present application all can be installed under Windows operating system, Linux (the class Unix computer operating system of free and open source code) or Mac OS (running on the operating system on the apple series computer) based on the selector switch technique of expression of browser or device, this be due to based on browser be all cross-platform.
These can install an extension element-AutoSelector of the browser of plug in component and cross-platform installation as Firefox or Google's browser for the application's method or device embodiment, directly will grasp and verify that the step of selector object has realized " a key robotization " substantially on Firefox.Clicked the occasion of " auto-select " button in the AutoSelector picture as the user, only need to click this user and want any page elements of grasping in current web page, the selector object of the shortest active path of corresponding Automatic Optimal just namely is engraved in and shows in " click is gained " mode in the AutoSelector picture, removed by this time consumption of user's crawl and manual checking selector object from, the person frees from this procedure of crawl and manual checking selector object to be intended to make the automatic test.
The application's method and apparatus embodiment has compared three advantages compared with prior art with the first string.Advantage one, crawl selector object does not need pre-aligned html source code.Advantage two is put the page elements of choosing on the page, the grammer dependence program fully of its selector object is resolved and drawn, and need not to rely on visual type to carry out manual parsing again.Comparatively speaking, utilize the embodiment of the present application to resolve that the level of page elements is more complicated just more to have superiority.Advantage three, from " click page elements ", the embodiment of the present application crawl selector object is completed within 1 second basically, with regard to efficient than at least 60 times soon of the first schemes.
The application's method and apparatus embodiment two advantages of having compared with second scheme.Advantage one grasps and verifies the selector object, only needs to carry out under a browser menu, need not additionally to open command prompt window.Advantage two, because the embodiment of the present application is to be integrated in the browsers such as Firefox, so in crawl selector object process, it is just zero that all browser pages that cause comprising the target pages of crawl selector object because carrying out the Automan script are closed the possibility of making troubles to the user by force.
The application's method and apparatus embodiment first and second scheme of comparing has two common advantages.Advantage one need not to install third-party Automan Console software.Advantage two, the embodiment of the present application is an expansion plugin that is integrated in Firefox or Google's browser etc., because Firefox or Google's browser are the browser softwares of cross-system platform, thereby the embodiment of the present application is not only under Windows operating system, can also carry out the crawl of selector object on various Linux and Mac OS platform.
The professional should further recognize, unit and the algorithm steps of each example of describing in conjunction with embodiment disclosed herein, can realize with electronic hardware, computer software or combination both, for the interchangeability of hardware and software clearly is described, composition and the step of each example described in general manner according to function in the above description.These functions are carried out with hardware or software mode actually, depend on application-specific and the design constraint of technical scheme.The professional and technical personnel can specifically should be used for realizing described function with distinct methods to each, but this realization should not thought the scope that exceeds the embodiment of the present application.
The method of describing in conjunction with embodiment disclosed herein or the step of algorithm can use the software module of hardware, processor execution, and perhaps both combination is implemented.Software module can be placed in the storage medium of any other form known in random access memory (RAM), internal memory, ROM (read-only memory) (ROM), electrically programmable ROM, electrically erasable ROM, register, hard disk, moveable magnetic disc, CD-ROM or technical field.
Above-described embodiment; purpose, technical scheme and beneficial effect to the embodiment of the present application further describe; institute is understood that; the above is only the embodiment of the embodiment of the present application; and be not used in the protection domain that limits the embodiment of the present application; all within the spirit and principle of the embodiment of the present application, any modification of making, be equal to replacement, improvement etc., within all should being included in the protection domain of the embodiment of the present application.

Claims (10)

1. the selector switch technique of expression based on browser, is characterized in that, comprising:
The selected page elements of sign from current web page;
Locate described page elements, and grasp selector switch corresponding to described page elements; And
By the HTML (Hypertext Markup Language) code segment, the contents of object of described selector switch is embedded, export in the autoselector interface in described browser and show.
2. the selector switch technique of expression based on browser according to claim 1, is characterized in that, also comprises:
According to the contents of object of described selector switch, obtain element value and the element type of described page elements;
Described element value and element type are embedded by the HTML (Hypertext Markup Language) code segment export in the autoselector interface.
3. the selector switch technique of expression based on browser according to claim 1, is characterized in that, the described selector switch that grasps from described page elements is specially:
Call autoselector object model operation function, carry out and obtain the selector switch function, grasp selector switch corresponding to described page elements.
4. the selector switch technique of expression based on browser according to claim 1, is characterized in that, also comprises before the selected page elements of sign from current web page described:
Obtain the current state of automatic selection button;
When not choosing, whether judge described automatic selection button for selected for the first time when described current state, when when selected for the first time, described current web page is added the single pattern of CSS (cascading style sheet), and add the mouse-pointing audiomonitor and mouse is clicked audiomonitor; When not when choosing for the first time, add mouse-pointing audiomonitor and mouse and click audiomonitor.
5. the selector switch technique of expression based on browser according to claim 4, is characterized in that, also comprises:
, cancel existing described mouse-pointing audiomonitor and mouse and click audiomonitor when selected when the current state of described automatic selection button.
6. the selector switch technique of expression based on browser according to claim 4, is characterized in that, described from current web page the sign selected page elements be specially:
After described page elements was selected, described mouse-pointing audiomonitor was with described page elements with dashed lines framework sign from current web page.
7. the selector switch technique of expression based on browser according to claim 6, is characterized in that, the described page elements in described location is specially:
Described mouse is clicked audiomonitor response click event, determines selecteed described page elements.
8. the selector switch technique of expression based on browser according to claim 2, is characterized in that, described contents of object according to described selector switch, and the element value and the element type that obtain described page elements are specially:
According to the contents of object of described selector switch, call the autoselector model and obtain the element type method, element value and the element type of the described page elements of crawl.
9. the selector switch technique of expression based on browser according to claim 3, is characterized in that, also comprises:
Add the mouse-pointing event sniffer for described page elements corresponding to described selector switch output in described autoselector interface, and mouse shift out event sniffer.
10. the selector switch performance device based on browser, is characterized in that, comprising:
The mouse-pointing audiomonitor is used for from the selected page elements of current web page sign;
Mouse is clicked audiomonitor, is used for locating described page elements; And
The selector switch placement unit is used for grasping selector switch corresponding to described page elements;
The element content output unit is used for embedding by the contents of object of HTML (Hypertext Markup Language) code segment with described selector switch, and exports in autoselector interface in described browser and show.
CN201110415159.6A 2011-12-13 2011-12-13 Selector technique of expression and device based on browser Active CN103164195B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201110415159.6A CN103164195B (en) 2011-12-13 2011-12-13 Selector technique of expression and device based on browser

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110415159.6A CN103164195B (en) 2011-12-13 2011-12-13 Selector technique of expression and device based on browser

Publications (2)

Publication Number Publication Date
CN103164195A true CN103164195A (en) 2013-06-19
CN103164195B CN103164195B (en) 2017-06-23

Family

ID=48587320

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110415159.6A Active CN103164195B (en) 2011-12-13 2011-12-13 Selector technique of expression and device based on browser

Country Status (1)

Country Link
CN (1) CN103164195B (en)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105868096A (en) * 2015-01-22 2016-08-17 阿里巴巴集团控股有限公司 Methods and apparatuses used for displaying web page test result in browser and device
CN109240678A (en) * 2017-07-07 2019-01-18 阿里巴巴集团控股有限公司 code generating method and device
CN109542553A (en) * 2018-10-26 2019-03-29 北京慧流科技有限公司 The information extraction method and device and storage medium of user interface UI element
CN113176920A (en) * 2021-04-29 2021-07-27 上海云扩信息科技有限公司 Universal RPA element selector management system
CN113468050A (en) * 2021-06-30 2021-10-01 杭州群核信息技术有限公司 Canvas-based testing method and device, computer equipment and storage medium
CN114579025A (en) * 2022-03-02 2022-06-03 深圳前海环融联易信息科技服务有限公司 IE browser element positioning method based on CSS selector
CN114969610A (en) * 2022-06-21 2022-08-30 中银金融科技有限公司 Page processing method and device

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070245306A1 (en) * 2006-02-16 2007-10-18 Siemens Medical Solutions Usa, Inc. User Interface Image Element Display and Adaptation System
CN101763425A (en) * 2010-01-12 2010-06-30 苏州阔地网络科技有限公司 Universal method for capturing webpage contents of any webpage
CN102150179A (en) * 2008-07-14 2011-08-10 谷歌公司 Content item selection
CN102214203A (en) * 2010-04-06 2011-10-12 微软公司 Interactive application assistance, such as for web applications

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070245306A1 (en) * 2006-02-16 2007-10-18 Siemens Medical Solutions Usa, Inc. User Interface Image Element Display and Adaptation System
CN102150179A (en) * 2008-07-14 2011-08-10 谷歌公司 Content item selection
CN101763425A (en) * 2010-01-12 2010-06-30 苏州阔地网络科技有限公司 Universal method for capturing webpage contents of any webpage
CN102214203A (en) * 2010-04-06 2011-10-12 微软公司 Interactive application assistance, such as for web applications

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105868096A (en) * 2015-01-22 2016-08-17 阿里巴巴集团控股有限公司 Methods and apparatuses used for displaying web page test result in browser and device
CN105868096B (en) * 2015-01-22 2019-09-10 阿里巴巴集团控股有限公司 For showing the method, device and equipment of web page test result in a browser
CN109240678A (en) * 2017-07-07 2019-01-18 阿里巴巴集团控股有限公司 code generating method and device
CN109240678B (en) * 2017-07-07 2022-07-15 阿里巴巴集团控股有限公司 Code generation method and device
CN109542553A (en) * 2018-10-26 2019-03-29 北京慧流科技有限公司 The information extraction method and device and storage medium of user interface UI element
CN113176920A (en) * 2021-04-29 2021-07-27 上海云扩信息科技有限公司 Universal RPA element selector management system
CN113176920B (en) * 2021-04-29 2024-05-31 上海云扩信息科技有限公司 Universal RPA element selector management system
CN113468050A (en) * 2021-06-30 2021-10-01 杭州群核信息技术有限公司 Canvas-based testing method and device, computer equipment and storage medium
CN114579025A (en) * 2022-03-02 2022-06-03 深圳前海环融联易信息科技服务有限公司 IE browser element positioning method based on CSS selector
CN114969610A (en) * 2022-06-21 2022-08-30 中银金融科技有限公司 Page processing method and device

Also Published As

Publication number Publication date
CN103164195B (en) 2017-06-23

Similar Documents

Publication Publication Date Title
CN103164195A (en) Selector presenting method based on browser and device
US7490288B2 (en) Previewing documents on a computer system
CN103268361B (en) Extracting method, the device and system of URL are hidden in webpage
US9122762B2 (en) Method and system to maintain a web page
US20080034288A1 (en) Text-Driven Macros Integrated with a Help System of a Computer Program
US20040027377A1 (en) User interface design and validation including dynamic data
CN103019925A (en) Selector acquisition method and device
Brown et al. Dynamic injection of WAI-ARIA into web content
CN106354483A (en) Data processing method and devices and electric equipment thereof
US9251281B2 (en) Web browsing using placemarks and contextual relationships in a data processing system
US8042095B2 (en) Application development environment with features for increasing the ease and efficiency of viewing function help text
CN106843996A (en) Conditional compilation preprocess method and device
US10963274B2 (en) Dynamic help system using HTML based application framework
Patil et al. Enhanced UI Automator Viewer with improved Android accessibility evaluation features
CN105468672B (en) Method and system for intercepting CSS (cascading style sheet) style of local area of webpage
CN113806661B (en) Barrier-free detection tool for website information
CN106775758A (en) Method for managing resource and device
CN106126240A (en) A kind of method and system customizing mobile terminal desktop shortcut icon
KR20100069147A (en) Method and apparatus for testing quality of website
CN105243057A (en) Method for translating web page contents and electronic device.
CN104715060B (en) A kind of web-based image display method and device
CN107861779A (en) Page object localization method and device, storage medium, electronic equipment
US20230195825A1 (en) Browser extension with automation testing support
JP2010096674A (en) Measuring apparatus and method for operating same
CN109558183B (en) A kind of method and device of automatic realization API application

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 1182487

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant
REG Reference to a national code

Ref country code: HK

Ref legal event code: GR

Ref document number: 1182487

Country of ref document: HK