a new method to Highlight elements

[6DiegoDiego9]

I always liked the idea of highlighting the elements that I select and/or target for an action:

Example of border highlight:

Example of border + background highlight:

It helps in coding and debugging and could be also liked in production code for giving an hint to the user about what the macro is doing during the web automation.

I'm thinking to add a new Highlight method to the WebElement (and WebElements?) class, likely adapting this code to be able to revert back the change.

I'm still unsure about some design choices:

• better to have two separate Highlight and UnHighlight methods or just an Highlight + an arg to select ON/OFF?
• default color for border and background?

Any suggestions in general?

[GCuser99]

Interesting idea @6DiegoDiego9.

Of the implementations you mentioned, my preference would be Highlight/UnHighlight Methods for functional clarity. They would obviously have different input parameter sets. I would add these methods to Webdriver, WebElement, and WebElements classes.

A potential third implementation option would be something like SetHighlighted ("Set" implying only one is highlighted at a time) which would automatically unhighlight the last highlighted element (saved as a global in the WebDriver class), as was suggested in the link that you provided. I would add this method to Webdriver and WebElement classes.

Another out-of-the-box implementation I found here, where the element is highlighted for a specified duration, and then put back to its original state at the end of the pause, which is an attractively clean solution.

If you are thinking about giving user freedom to specify colors, then it would be nice if we could use the VBA long color functionality such as RGB function, and built-in color constants such as vbYellow, vbRed, etc. Looks like this is possible:

arguments[0].style.border='3px solid rgb(0,255,0)'

So the "rgb(r,g,b)" string could be rebuilt from a vba long color (I already have code that could be modified easily to do this - see below).

Anyway, I would support any of these as long as they don't cause any (as yet unforeseen) instabilities or compromises to other functionality. Let's try it!

Public Function RGBLongToString(ByVal rgbcol As Long) As String
    Dim r As Long, g As Long, b As Long
    r = rgbcol And &HFF
    g = (rgbcol And &H100FF00) / &H100
    b = (rgbcol And &HFF0000) / &H10000
    RGBLongToString = "rgb(" & r & "," & g & "," & b & ")"
End Function

[6DiegoDiego9]

Update: I just finished to implement the Highlight/UnHighlight feature with all the discussed features except the "highlight for a specified duration".

I'll test it some days before pulling it.

I'd like to make an asynchronous "highlight for a specified duration", with a forgiving unhighlight in case the element is no more there, but the procedure specified in the Application.OnTime method "cannot be declared in a custom class".
Any other ideas? maybe there's a JavaScript equivalent that we could inject doing the same job?
I would not like to put it in the WebShared module.

[GCuser99]

After merging your pull request, I added a test_Highlight standard module containing my own test sub - feel free to replace or add your own. I couldn't get the one you included in the pull request to work (failed in css selector - nothing to do with your highlight method). Thanks for your contribution!

[GCuser99]

@6DiegoDiego9, did you consider adding an optional Wait duration to the SetHightlightFoundElems and SetHighlight methods so that user does not have to insert nominal waits after each FindElement to "enjoy" the effect?

So instead of this:

    'automatically highlight every last found element(s):
    driver.SetHightlightFoundElems True
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/thead/tr[1]/th[1]").GetText
    driver.Wait
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/thead/tr[1]/th[2]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[1]/td[1]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[1]/td[2]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[1]").GetText
    driver.Wait
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[1]/td[1]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[1]/td[2]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[2]/td[1]").GetText
    driver.Wait
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[2]/td[2]").GetText
    driver.Wait
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tfoot/tr[1]/td[1]").GetText
    driver.Wait
    
    driver.SetHightlightFoundElems False

We do something like this?

    'automatically highlight every last found element(s):
    driver.SetHightlightFoundElems OnOffSwitch:=True, WaitDuration:=300
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/thead/tr[1]/th[1]").GetText
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/thead/tr[1]/th[2]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[1]/td[1]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[1]/td[2]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[1]").GetText
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[1]/td[1]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[1]/td[2]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[2]/td[1]").GetText
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tbody/tr[2]/td[2]/table/tbody/tr[2]/td[2]").GetText
    
    Debug.Print driver.FindElement(by.XPath, "//table[@id='mytable']/tfoot/tr[1]/td[1]").GetText
    
    driver.SetHightlightFoundElems False

[6DiegoDiego9]

100% agree!

Argument name brainstorming/voting:

1. WaitDuration
2. WaitDurationMs
3. WaitMs
4. FreezeMs

I tend on 3

[GCuser99]

Sounds good. BTW, remember how I made that one change in the SetHighlight method:

        For Each element In elements
            If Not lastElems.IsMember(element) Then lastElems.Add element
        Next element

I made that to prevent a "key already exists" error when adding an element that is already in the collection. However, I should tell you the context, in case you may want to look into further....

If you comment out the following line in the test_highlight sub:

    'driver.SetHightlightFoundElems False

... and then run the sub, you will see that without the code change that I made above, you will get the "key already exists" error on this line:

driver.FindElement(by.XPath, "//table[@id='mytable']/thead/tr[1]/th[1]").Highlight borderColor:=Blue, UnHighlightLast:=False

However, WITH the code change, the UnHighlightLast:=False does not function (it still unhighlights).

So why did I test commenting out "driver.SetHightlightFoundElems False"? Because I thought that even if the user sets the global method SetHightlightFoundElems to True, he/she may want to highlight a particular element differently than the global settings. In fact, after some testing, your code does seem to work fine that way, except for the case of setting UnHighlightLast:=False. I wonder if you can find an easy fix to this?

Anyway, I don't have a strong opinion about it, as long as we guard against raising the error. Just thought I should give you that context since you might be making changes anyway...

[6DiegoDiego9]

Just uploaded an update about forgiving unhighlighting:
#33

I'm unable to reproduce your problem about ignored UnHighlightLast:=False.
Is it still current?