Jump to content
Chimp

IE DOM Elements visual selector tool

Recommended Posts

Hi Chimp, 

This is very handy and really good tool. The tool works perfectly, captures the red dotted area and copies to the clipboard. My question is about the example: 

Line-18: Clicking on "Existing user? Sign In" works fine 

image.png.cce6f2437ec7752225b144585cb43abf.png

But in Line-22 setting the value didn't work. As you can see from the screenshot, the input box is not filled. 

image.png.983e054208289f559b86305090e3a37d.png

I tried to replace Line-22 as the following (with my limited knowledge), but yet didn't work either: 

; fill the username input
$hDOM_Element = $oIE.document.QuerySelector($sInputUserId)
;$hDOM_Element.value = $sMyUserId
_IEFormElementSetValue($hDOM_Element, "$sMyUserId")

As a reference, these are the values that I read from the tool: 

$sSignIn = "body > div:nth-of-type(2) > header > div > ul > li:nth-of-type(1) > a" ; <-- SigIn element selector here
$sInputUserId = "body > div:nth-of-type(5) > div > form > ul > li:nth-of-type(1) > input" ; <-- UserId input selector here
$sInputPasswd = "body > div:nth-of-type(5) > div > form > ul > li:nth-of-type(2) > input" ; <-- Password input selector here
$sSignInButn = "body > div:nth-of-type(5) > div > form > ul > li:nth-of-type(5) > button" ; <-- Sig In button selector here

 

 

Share this post


Link to post
Share on other sites

Hi @taylansan
Thank you for appreciation,
...when I tried the example the first time, it worked well and the login was prformed regularly, now, trying it again I see that, as you are reporting, some selectors does not find the reference to the input elements .... however I also see that by changing the index from 5 to 4 in the component 'div:nth-of-type(4)' of the following selectors, the script works again, 

$sInputUserId = "body > div:nth-of-type(4) > div > form > ul > li:nth-of-type(1) > input" ; <-- UserId input selector here
$sInputPasswd = "body > div:nth-of-type(4) > div > form > ul > li:nth-of-type(2) > input" ; <-- Password input selector here
$sSignInButn = "body > div:nth-of-type(4) > div > form > ul > li:nth-of-type(5) > button" ; <-- Sig In button selector here

...but this is strange... maybe the web page has some hidden part that dynamically changes some DOM hierarchy .. (?)
I will look into the matter to see if I understand where the cause of this strangeness lies ...
thanks again for reporting.

Edited by Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites

Hi @taylansan and also to all of you who have come to read ...

after some debugging I've found the cause of the issue you reported.
The 'subtle' problem was not in the javascript function that retrieves the CSS selector, it was instead caused by a "div" element that I injected into the page, to be used as an highlighter on the element where the right-click was performed.

To highlight the right-clicked element, Instead of poisoning the page by injecting the div element, now I use an innocuous colored 5px dotted outline

well, the "debuged" listing is now posted in first post replacing the previuos one.

Bug reports, suggestion and improovements are welcome.
Thank You


small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites

Hi Chimp,

Thanks you so much for this tool!

I'm using it for Autohotkey automation to get selectors... and it works well. (very handy) I also put it in a RPA editor I create, so I'm ask you if for you it's ok I'm using it and also if it 's possibile to convert it in ahk language, and to integrate it in this tool package.

Thanks you for your answer

Arnaud

Share this post


Link to post
Share on other sites

Hi Arnaud, I'm glad You find it useful,  of course feel free to use it as you better like.
P.S.
A note to keep in mind is that the derived selector is a "brute force" selector, ie, the returned selector contains the complete path from the root element of the web page down to the target element. So in the eventuality that the page structure is modified, or is dynamically modified by some script, the selector obtained before any changes may no longer be valid after the changes.

Edited by Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites
On 2/12/2018 at 11:20 PM, Chimp said:

Hi Arnaud, I'm glad You find it useful,  of course feel free to use it as you better like.
P.S.
A note to keep in mind is that the derived selector is a "brute force" selector, ie, the returned selector contains the complete path from the root element of the web page down to the target element. So in the eventuality that the page structure is modified, or is dynamically modified by some script, the selector obtained before any changes may no longer be valid after the changes.

Thanks you so much Chimp!

If I understand It use ids... and if it's a page with dynamics ids, it won't run.

I'm also using iMacros to record selectors, and there is an'option to not use ids in the path. Then useful in this case.

Do you think it's possibile to than in your code: "HTML path without ids"?

Share this post


Link to post
Share on other sites

Hi @adegard,

 the selector returned by the embedded javascript function doesn't relies on any ID, it returns a "full path" selector that makes no use of intermediate IDs, (this is why I called it a "brute force" selector).
This kind of selector, if from one side has the advantage of being immune to the dynamic ID naming, from the other side is vulnerable to the changes performed on the html tree  structure.


small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites

Hi @chimp ,

Thanks you so much again for your answer (I understoud now)

I'm trying to modify your script to use it as Macro Recorder: so when I Left Click, I save the selector in a Edit form, and then continue to navigate, instead of staying on the same web-page...

 

[EDIT]: Maybe I find the trick... see file. I reload the GUI each time page in loading. It's working!

 

IE_selector_Recorderv3.au3

Edited by adegard

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By SkysLastChance
      I am pretty sure the site that I am using was updated and now I am not seeing the same tags/elements that I used to. I tried using a UIAspy to see if I could grab them that way with no luck. 
      What do I need to do to be able to automate this again. Are the elements hidden somewhere?
      Instead of highlighting established account is highlights all of the web page almost. How can I get to the detail again? 
      I used to grab establish account by the name. Now I have nothing to even try to grab. 
      There are not elements in the event viewer either. 
       


       
      This is what happens when I try to inspect the element and click established account. 
      I get the same type of results in chrome
    • By Chimp
      Making the integration between AutoIt and the BrowserControl easier may facilitate the development of interesting programs. Just think of all those (fantastic) libraries and frameworks available for javascript that could be integrated and exploited in an AutoIt program. For example, to graphically present the results of an AutoIt processing in the GUI, ... and many other possibilities. Providing the basic functions to implement this synergistic interaction is the purpose of this post (if for no other reason, just even to collect some tests done over time here and there, so as not to leave them scattered and easily find them in just one place)
      In this UDF there are only a few functions (or better if called wrappers), but I hope to add more as I go and, even better, to receive suggestions and advice on new features and techniques to improve and expand it.
      _WebBrowser_GUICtrlCreate Create an Internet Explorer 'Browser Control' _WebBrowser_SetHTML Set a new HTML listing in the BrowserControl _WebBrowser_CSS_Inject Creates into the html document a CSS node element with embedded the passed CSS _WebBrowser_JS_Inject Creates into the html document a javascript node element with embedded the passed javascript _WebBrowser_JS_Eval Evaluates a passed string as JavaScript code and executes it _WebBrowser_JS_setTimeout Calls a javascript function or executes a javascript code snippet [option after a specified delay] _WebBrowser_JS_ElementGetRef Retrieves a reference to an element suitable to be used from AutoIt _WebBrowser_ExecuteDotNotation Get a reference to an object's child member or the value of a property, by means of a dotted path _WebBrowser_BasicHTML Returns a basic html page listing (a little enhanced than about:blank) The three examples provided in the attached ziped file are a bit 'improvised' and do not take advantage of all the possibilities offered by the underlying javascript libraries used. They are just three "hello world" scripts to test the ABC of the interaction with the "BrowserControl".
      (ToDo: Interaction with javascript custom events)
      Bug reports, creative criticisms and suggestions (particularly regarding the interaction with javascript custom events) are welcome
      I hope you can have fun with the Browser Control
      BrowserControl.zip
    • By Chimp
      This is a little experiment that makes use of a "Browser Control" embedded in a GUI in order to be able to use AutoIt, HTML, JavaScript and CSS all together.
      This little toy will only work on systems with IE11.
      The purpose is to drag all the names of the scientists & drop on the right ones. (among scientists it has also infiltrated an intruder). I hope you find it entertaining.
      I've posted it here in the hope to have some suggestions on how to improve it all (I mean the interaction between Autoit Javascript html and css). Thanks
      ; this works on systems with IE11 ; ------------------------------- #include <GUIConstantsEx.au3> #include <array.au3> Global $oIE, $oDocument, $ohJS, $sDroping Global $iCorrect = 0, $iGoal = 11 Example() Exit Func Example() Local $aScientists[12][2] = _ [["Schrodinger", "Schrodinger"],["Planck", "Planck"],["Pauli", "Pauli"],["Einstein", "Einstein"], _ ["Chimp", "Chimp"],["Dirac", "Dirac"],["Heisenberg", "Heisenberg"],["Born", "Born"], _ ["De Broglie", "De_Broglie"],["Bohr", "Bohr"],["Sommerfeld", "Sommerfeld"],["", "empty"]] Local $oIE = ObjCreate("Shell.Explorer.2") ; Create a BrowserControl Local $hGUI = GUICreate("", 660, 600, 30, 30) GUICtrlCreateObj($oIE, 0, 0, 660, 600) ; Place BrowserControl on the GUI GUISetState() ;Show GUI $oIE.navigate('about:blank') ; file:///' & @ScriptDir & '\WhoIsWho.html') While Not String($oIE.readyState) = 'complete' ; wait for about:blank Sleep(100) WEnd ; this waits till the document is ready to be used (portion of code from IE.au3) While Not (String($oIE.readyState) = "complete" Or $oIE.readyState = 4) Sleep(100) WEnd While Not (String($oIE.document.readyState) = "complete" Or $oIE.document.readyState = 4) Sleep(100) WEnd $oIE.document.Write(_GetHTML()) ; inject lising directly to the HTML document: $oIE.document.close() ; close the write stream $oIE.document.execCommand("Refresh") While Not String($oIE.readyState) = 'complete' ; wait for readyState after a refresh Sleep(100) WEnd ; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx ; $ohJS is a reference to the javascript Global Obj ; ------------------------------------------------- $ohJS = $oIE.document.parentwindow.JSglobal $oDocument = $oIE.document Local $oTable1 = $ohJS.table1 Local $oTable2 = $ohJS.table2 _Randomize($aScientists, $oTable1) ; --- Setup events ------------ ; https://msdn.microsoft.com/en-us/library/hh801967(v=vs.85).aspx Local $aoEventObject[2] $aoEventObject[0] = ObjEvent($oTable1, "IEEvent_", "HTMLTableEvents2") $aoEventObject[1] = ObjEvent($oTable2, "IEEvent_", "HTMLTableEvents2") ; ----------------------------- ; Loop until the user exits. While 1 Switch GUIGetMsg() Case $GUI_EVENT_CLOSE ExitLoop EndSwitch If $iCorrect = $iGoal Then _Goal() _Randomize($aScientists, $oTable1) $iCorrect = 0 EndIf WEnd ; the end For $i = 0 To UBound($aoEventObject) - 1 $aoEventObject[$i] .stop Next $aoEventObject = 0 ; Kill the Event Object $oIE = 0 ; Remove IE from memory (not really necessary). GUIDelete($hGUI) ; Remove GUI EndFunc ;==>Example ; --- event management zone --- ; following functions are fired by events occurred in the browser control Volatile Func IEEvent_onDragstart($oEvent) ; we save the ID of the dragged obj into the $sDroping variable ; for a later use in the drop function $sDroping = $oEvent.srcElement.ID EndFunc ;==>IEEvent_onDragstart Volatile Func IEEvent_onDragOver($oEvent) $ohJS.event.preventDefault() EndFunc ;==>IEEvent_onDragOver Volatile Func IEEvent_onDrop($oEvent) $ohJS.event.preventDefault() If $sDroping <> "" Then If $oDocument.getElementById($sDroping).innerText <> $oEvent.srcElement.innerText Then If $oEvent.srcElement.ClassName = $oDocument.getElementById($sDroping).ClassName Then $oEvent.srcElement.innerText = $oDocument.getElementById($sDroping).innerText $oDocument.getElementById($sDroping).innerText = "" $oDocument.getElementById($sDroping).draggable = False $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #80ff80;" $iCorrect += 1 Else For $i = 1 To 3 $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ff0000;" Sleep(125) $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ffffff;" Sleep(125) Next EndIf EndIf $sDroping = "" EndIf EndFunc ;==>IEEvent_onDrop Func _Randomize(ByRef $aScientists, ByRef $oTable) Local $iRows = ($oTable.rows.length) - 1 Local $iCols = ($oTable.rows.item(0).cells.length) - 1 Local $index _ArrayShuffle($aScientists) For $y = 0 To $iRows For $x = 0 To $iCols $index = ($y * ($iCols + 1)) + $x $oTable.rows.item($y).cells.item($x).innerText = $aScientists[$index][0] ; text $oTable.rows.item($y).cells.item($x).className = $aScientists[$index][1] ; class $oTable.rows.item($y).cells.item($x).draggable = $aScientists[$index][0] <> "" Next Next EndFunc ;==>_Randomize Func _Goal() Local $oTable1 = $ohJS.table1 ; names Local $oTable2 = $ohJS.table2 ; photos Local $iRows = ($oTable1.rows.length) Sleep(250) Local $iCols = 6 ; ($oTable1.rows.item(0).cells.length) Local $aIndex[$iRows * $iCols], $sTemp For $i = 0 To UBound($aIndex) - 1 $aIndex[$i] = $i ; + 1 Next _ArrayShuffle($aIndex) For $i = 0 To UBound($aIndex) - 1 $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).innerText = "" $oTemp0 = $oTable2.rows $oTemp1 = $oTemp0.item(Int($aIndex[$i] / $iCols)).cells $oTemp2 = $oTemp1.item(Mod($aIndex[$i], $iCols)).getAttribute("style") $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor() Sleep(100); MsgBox(0,"Debug",$sTemp) $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = $oTemp2 Next For $x = 1 To 2 For $i = 0 To UBound($aIndex) - 1 $oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor() Sleep(100) $oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: #ffffff;" Next Next EndFunc ;==>_Goal Func _rndColor() Return String("#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & ";") EndFunc ;==>_rndColor Func _GetHTML() Local $sHTML = _ "<!DOCTYPE HTML>" & @CRLF & _ "<html>" & @CRLF & _ "<head>" & @CRLF & _ "<meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />" & @CRLF & _ " <script type=""text/javascript"">" & @CRLF & _ " var JSglobal = (1,eval)(""this"");" & @CRLF & _ " </script>" & @CRLF & _ "</head>" & @CRLF & _ "<body>" & @CRLF & _ "<h2>Who is who?</h2>" & @CRLF & _ "<p>Drag&Drop names on the right scientist</p>" & @CRLF & _ "<img src=""https://i.imgur.com/STWql7w.jpg""" & @CRLF & _ "height=""394"" width=""640""" & @CRLF & _ "style=""position: absolute; left: 10px; top: 100px;"">" & @CRLF & _ "" & @CRLF & _ "<style>" & @CRLF & _ ".target td {width: 100px; height: 160px; text-align: center; color: white; font-weight: bold; vertical-align: bottom; border: 0px solid grey;}" & @CRLF & _ ".source td {width: 100px; height: 30px; text-align: center; border: 1px solid red;}" & @CRLF & _ "</style>" & @CRLF & _ "" & @CRLF & _ "<table class=""target"" style=""position: absolute; left: 25px; top: 100px;"" id=""table2"">" & @CRLF & _ " <tr><td class=""Schrodinger""></td><td class=""Planck""></td><td class=""Pauli""></td><td class=""Einstein""></td><td class=""Chimp""></td><td class=""Dirac""></td></tr>" & @CRLF & _ " <tr><td class=""Heisenberg""></td><td class=""Born""></td><td class=""De_Broglie""></td><td class=""Bohr""></td><td class=""Sommerfeld""></td><td class=""empty""></td></tr>" & @CRLF & _ "</table>" & @CRLF & _ "" & @CRLF & _ "<table class=""source"" style=""position: absolute; left: 10px; top: 504px;"" id=""table1"">" & @CRLF & _ " <tr><td ID=""td1""></td><td ID=""td2""></td><td ID=""td3""></td><td ID=""td4"" ></td><td ID=""td5"" ></td><td ID=""td6"" ></td></tr>" & @CRLF & _ " <tr><td ID=""td7""></td><td ID=""td8""></td><td ID=""td9""></td><td ID=""td10""></td><td ID=""td11""></td><td ID=""td12""></td></tr>" & @CRLF & _ "</table>" & @CRLF & _ "</body>" & @CRLF & _ "</html>" Return $sHTML EndFunc ;==>_GetHTML  
    • By Phil1991
      Hi,
      I'm working on an interface and I have a problem with zoom management. In desktop mode it works and in android cell mode it seems to work fine too. However, on a Windows tablet, it seems to have a problem ... Basically what I'm trying to do is display a modal in bootstrap 4. But when on the tablet I zoom, my modal s really big and out of my screen. On the android mobile, I remove the zoom before displaying the modal but on the Windows tablet I am unable to reproduce the same behavior.
       
      My toggle function to reset zoom before display modal  ( Yeah it maybe sketches but I'm not find other solutions)
      function resetZooming() { if (zoomOut) { $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1'); setTimeout(resetZooming, 1000); zoomOut = false; }else{ $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0'); zoomOut = true; } } And I call this function under my event
      $("#modalCreationForm").modal("show"); resetZooming();  
      If you have any ideas
      Thank you
    • By Seminko
      Is there a way to grab non-hardcoded but rather javascript generated data from a webpage?
      Tried a get request as well as _IEBodyReadHTML but both seem to grab the code without the javascript generated data.
      $oHTTP = ObjCreate("winhttp.winhttprequest.5.1") $oHTTP.Open("GET", "link", False) $oHTTP.Send() $oReceived = $oHTTP.ResponseText $oStatusCode = $oHTTP.Status Global $DataArray[10][5] If $oStatusCode <> 200 Then Exit MsgBox(1, "Error", "Status Code <> 200") EndIf FileWrite(@ScriptDir & "\output.txt", $oReceived) ; //////// #include <IE.au3> Local $FullLink = "link" Local $oIE = _IECreate($FullLink, 0, 0) _IELoadWait($oIE) Local $sText = _IEBodyReadHTML($oIE) FileWrite(@ScriptDir & "\output.txt", $sText)  
×
×
  • Create New...