Highlight element in my web page

[Israel]

Good afternoon everyone,

I have a problem and need help. I need to highlight each element that receives a click in my web page, such as the automation of a tutorial in which I highlight the elements that I click.

Follow the attached image, the highlighted element will  the clicked.

Does anyone know how to help me?

Israel

[JohnOne]

To be honest, I think an HTML or javascript tutorial would be better suited to you needs, when dealing with your website,

[Israel]

JohnOne,

I gave the tutorial example, but not is tutorial. I'm making a script that captures the element in the mouse position, then I wanted to highlight the captured element

[Gianni]

Hi Israeel

Could you post the script that captures the element at the mouse position?
Once you have the reference to the element, then is quite easy to highlight the captured element.

[Israel]

Func _Capturar()
 
   Local $doc = _IEDocGetObj($oie)
   If @error Then
      Exit(1)
   Else
      Local $aPos = MouseGetPos() ; position the mouse on the screen
      Local $evt = $doc.createEventObject() ; position the event
      Local $sl = $doc.body.scrollLeft
      Local $st = $doc.body.scrollTop
      Local $x = $aPos[0] - $oIE.document.parentwindow.screenLeft ; get the element in the mouse position
      Local $y = $aPos[1] - $oIE.document.parentwindow.screenTop
      Local $oElement = $doc.elementFromPoint($x, $y)
 
      return $oElement
   Endif
 
endFunc

Chimp,

Above is my code. This function returns me the captured element and wanted to highlight this element.

[Gianni]

Hi

using your function it seems that on my system it does not return any obj

here is how I would do (debug line I've added at bottom of your function prints a 0, that means $oElement is not an object ) :

#include <ie.au3>
Local $obj, $style_save, $oie

$oie = _IECreate("www.google.com") ; open a simple page to try
While 1
    $obj = _Capturar($oie)
    $style_save = $obj.style.border ; save previous border if any
    For $x = 1 To 5 ; flash the red border
        $obj.style.setAttribute('border', '5px solid red') ; drraw a red border
        Sleep(100)
        $obj.style.setAttribute('border', $style_save) ; restore original border
    Next
WEnd

Func _Capturar($oie)

    Local $doc = _IEDocGetObj($oie)
    If @error Then
        ConsoleWrite("Error>" & @CRLF)
        Exit (1)
    Else
        Local $aPos = MouseGetPos() ; position the mouse on the screen
        Local $evt = $doc.createEventObject() ; position the event
        Local $sl = $doc.body.scrollLeft
        Local $st = $doc.body.scrollTop
        Local $x = $aPos[0] - $oie.document.parentwindow.screenLeft ; get the element in the mouse position
        Local $y = $aPos[1] - $oie.document.parentwindow.screenTop
        Local $oElement = $doc.elementFromPoint($x, $y)
        ConsoleWrite("Debug: IsObj -> " & IsObj($oElement) & @CRLF)
        Return $oElement
    EndIf

EndFunc   ;==>_Capturar

 

Edited July 8, 2015 by Chimp

[JohnOne]

Sorry, when people say "My" website or page, I instinctively think it's "Your" websites or page".

This sort of stuff would be easier done serverside.

Didn't mean to waste your time sugar tits

 

[Israel]

Chimp,

I've done the Treatment Failure to return an object, but in A Separate Function.

The code worked perfectly! Thanks!

Israel

Edited July 9, 2015 by Israel

[Gianni]

Hi Israel, I'm glad it worked for you.

p.s.
I would be interested to see the working version of your function.

[Israel]

Chimp,

I can not offer many details, because my application is developed in my work which involves secrecy. However, it is very simple. A design of a recorder with some specific functions, the autoit recorder does not offer many features.

I have attached two files with examples of UDF in which the author creates a label around the element in the GUI and highlights of this label with some effects.

Do you think can do the same for Web? So we would need not change the HTML. What do you think?

BackEffect.au3

BackEffect_Exemple.au3

Edited July 10, 2015 by Israel

[Gianni]

perhaps this draft could be a start

#include <IE.au3>
Local $oIE = _IECreate("http://www.google.com")
Local $oDoc = _IEDocGetObj($oIE)
Local $oElement, $oElement_save, $style_save
Local $oIE_hwnd = _IEPropertyGet($oIE, "hwnd")
While WinExists($oIE_hwnd)
    $oElement = _GetElement($oIE, $oDoc)
    If IsObj($oElement) Then
        If $oElement <> $oElement_save Then
            If IsObj($oElement_save) Then
                $oElement_save.style.setAttribute('border', $style_save) ; restore original border
                $style_save = $oElement.style.border ; save original border
                $oElement_save = $oElement
            Else
                $style_save = $oElement.style.border ; save original border
                $oElement_save = $oElement
            EndIf
            $oElement.style.setAttribute('border', '2px solid lightgreen') ; drraw a green border
        EndIf
    EndIf
WEnd
Func _GetElement(ByRef $oIE, ByRef $doc)
    Local $aPos = MouseGetPos()
    Local $sl = $doc.body.scrollLeft
    Local $st = $doc.body.scrollTop
    Local $x = $aPos[0] - $oIE.document.parentwindow.screenLeft
    Local $y = $aPos[1] - $oIE.document.parentwindow.screenTop
    Return $doc.elementFromPoint($x, $y)
EndFunc   ;==>_GetElement

 

Edited July 13, 2015 by Chimp
modified listing as suggested by JohnOne on next post

[JohnOne]

I think the following line could cause a problem if the IE window is closed...

While WinExists(_IEPropertyGet($oIE, "hwnd"))

_IEPropertyGet will be tested first before WinExists and fail.

Get the window handle before the loop starts, and use that in while condition.

[Gianni]

Done.

Thanks JohnOne for the suggestion

p.s.
I copied and pasted that line from example 5 of the  _IEHeadInsertEventScript function in the help.

[JohnOne]

Might be fine in 3.3.12.0 but I doubt it in 3.3.14.0.

And for me it's poor practice even if COM errors are silent.

So lousy example really.

[Israel]

JohnOne, Chimp

I tested here and it worked perfectly, but had thought of something that does not change the html but create an border distinct the margin the element.

Because has element example dropdown who accept not border.

Edited July 13, 2015 by Israel

[Gianni]

This listing provides an effect similar to that illustrated in your example (a moving frame that lights the DOM obj behind the mouse pointer), without affecting the source code of the web page.

p.s. The View Zoom on the IE browser must be set to 100% to work properly

expandcollapse popup

#include <IE.au3>
#include <WinAPI.au3>
#include <GUIConstantsEx.au3>
; #include <WinAPIEx.au3>
#include <WindowsConstants.au3>

Local $oIE = _IECreate("https://www.autoitscript.com/forum/")
Local $oDoc = _IEDocGetObj($oIE)
Local $oIE_hwnd = _IEPropertyGet($oIE, "hwnd")
Local $oElement, $oElement_save, $aMousePos
Local $aBrowserPos[6] ; x , y , width , height , x right , y bottom
Local $aOverlayPos[4] ; coordinates of the overlay frame
; Create a Phantom window with a visible frame
Local $aParentPos, $AlphaKey = 0xABABAB
Local $iBorderColor = 0x00FF00, $iBorderThickness = 5
$hOverlay = GUICreate("", -50, -50, 10, 10, $WS_POPUPWINDOW, $WS_EX_LAYERED + $WS_EX_TOPMOST) ; transparent
$Panel = GUICreate("", 48, 48, 10, 10, $WS_CHILD + $WS_VISIBLE, -1, $hOverlay) ; this new window becomes a child of $hOverlay window
GUISetBkColor($iBorderColor, $hOverlay)
GUISetBkColor($AlphaKey, $Panel)
_WinAPI_SetLayeredWindowAttributes($hOverlay, $AlphaKey, 0, $LWA_COLORKEY)
GUISetState(@SW_SHOW, $hOverlay)

While WinExists($oIE_hwnd)
    $aMousePos = MouseGetPos()
    ; Now we get reference to the DOM object behind the mouse pointer
    $oElement = $oDoc.elementFromPoint($aMousePos[0] - $oIE.document.parentwindow.screenLeft, $aMousePos[1] - $oIE.document.parentwindow.screenTop)
    If IsObj($oElement) And $oElement <> $oElement_save Then
        $oElement_save = $oElement
        $aBrowserPos[0] = Int($oIE.document.parentwindow.screenLeft) ;      X position on the desktop of the left edge of the browser
        $aBrowserPos[1] = Int($oIE.document.parentwindow.screenTop) ;       Y position on the desktop of the top border of the browser
        $aBrowserPos[2] = Int($oIE.document.documentElement.clientWidth) ;  Width of browser's client area
        $aBrowserPos[3] = Int($oIE.document.documentElement.clientHeight) ; Height of browser's client area
        $aBrowserPos[4] = $aBrowserPos[0] + $aBrowserPos[2] ;               X position on the desktop of the right border of the browser
        $aBrowserPos[5] = $aBrowserPos[1] + $aBrowserPos[3] ;               Y position on the desktop of the bottom border of the browser
        ;
        $oRect = $oElement.getBoundingClientRect() ; coordinates of the DOM object within the client area of the browser
        ;
        $aOverlayPos[0] = Int($oRect.left) + $aBrowserPos[0] ; X position of the left overlay border (absolute desktop coordinates)
        If $aOverlayPos[0] < $aBrowserPos[0] Then $aOverlayPos[0] = $aBrowserPos[0] ; if left border of the DOM obj is out of browser, overlay border stays anyway within the screen
        $aOverlayPos[1] = Int($oRect.Top) + $aBrowserPos[1] ; Y  position of the top overlay border
        If $aOverlayPos[1] < $aBrowserPos[1] Then $aOverlayPos[1] = $aBrowserPos[1] ; if top border of obj is out of browser, overlay border stays anyway within the screen
        $aOverlayPos[2] = Int($oRect.right - $oRect.left) ; width of the obj
        If $aOverlayPos[0] + $aOverlayPos[2] > $aBrowserPos[4] Then $aOverlayPos[2] = $aBrowserPos[4] - $aOverlayPos[0] ; if obj's width is out of bounds, force the edge within the browser
        $aOverlayPos[3] = Int($oRect.bottom - $oRect.top) ; Height of the obj
        If $aOverlayPos[1] + $aOverlayPos[3] > $aBrowserPos[5] Then $aOverlayPos[3] = $aBrowserPos[5] - $aOverlayPos[1] ; stay within browser's bounds
        ;
        WinMove($hOverlay, "", $aOverlayPos[0], $aOverlayPos[1], $aOverlayPos[2], $aOverlayPos[3])
        $aParentPos = WinGetPos($hOverlay) ; x, y, width, height
        WinMove($Panel, "", $iBorderThickness - 1, $iBorderThickness - 1, Int($aParentPos[2] - $iBorderThickness * 2), Int($aParentPos[3] - $iBorderThickness * 2))
    EndIf
WEnd