Feature: Highlighting found WebElements inside of elementexplorer.js

[MexicanAce]

I've taken a look into the elementexplorer.js code and it's some cool stuff. I was thinking of a way for the script to highlight all visible WebElements that are returned.

With just some messing around, I came up with the following additions to elementexplorer.js:

var list = function(locator) {
  return browser.findElements(locator).then(function(arr) {
    var found = [];
    for (var i = 0; i < arr.length; ++i) {
      getAbsoluteXPath(arr[i]).then(function(result){
        driver.executeScript("var x = document.evaluate('" + result + "', document, null, XPathResult.ANY_TYPE, null); var xx = x.iterateNext(); xx.style.border = '10px inset rgb(230,0,0)';");
      });
      arr[i].getText().then(function(text) {
        found.push(text);
      });
    }
    return found;
  });
};

var getAbsoluteXPath = function(element)
    {
        return driver.executeScript(
                "function absoluteXPath(element) {"+
                        "var comp, comps = [];"+
                        "var parent = null;"+
                        "var xpath = '';"+
                        "var getPos = function(element) {"+
                        "var position = 1, curNode;"+
                        "if (element.nodeType == Node.ATTRIBUTE_NODE) {"+
                        "return null;"+
                        "}"+
                        "for (curNode = element.previousSibling; curNode; curNode = curNode.previousSibling) {"+
                        "if (curNode.nodeName == element.nodeName) {"+
                        "++position;"+
                        "}"+
                        "}"+
                        "return position;"+
                        "};"+

    "if (element instanceof Document) {"+
    "return '/';"+
    "}"+

    "for (; element && !(element instanceof Document); element = element.nodeType == Node.ATTRIBUTE_NODE ? element.ownerElement : element.parentNode) {"+
    "comp = comps[comps.length] = {};"+
    "switch (element.nodeType) {"+
    "case Node.TEXT_NODE:"+
    "comp.name = 'text()';"+
    "break;"+
    "case Node.ATTRIBUTE_NODE:"+
    "comp.name = '@' + element.nodeName;"+
    "break;"+
    "case Node.PROCESSING_INSTRUCTION_NODE:"+
    "comp.name = 'processing-instruction()';"+
    "break;"+
    "case Node.COMMENT_NODE:"+
    "comp.name = 'comment()';"+
    "break;"+
    "case Node.ELEMENT_NODE:"+
    "comp.name = element.nodeName;"+
    "break;"+
    "}"+
    "comp.position = getPos(element);"+
    "}"+

    "for (var i = comps.length - 1; i >= 0; i--) {"+
    "comp = comps[i];"+
    "xpath += '/' + comp.name.toLowerCase();"+
    "if (comp.position !== null) {"+
    "xpath += '[' + comp.position + ']';"+
    "}"+
    "}"+

    "return xpath;"+

    "} return absoluteXPath(arguments[0]);", element);
}

Basically I use getAbsoluteXPath to create the xpath to the webElement because there is no way (that I found) to set/manipulate any css of it. There are only gets.

I've updated list so that it uses this xpath and creates a red border around the element on the page.

This is very early on, but I'd like to create a push of the previous border attribute so that we can set these WebElements back to normal after a set period of time. Furthermore, separate it from the list function and create a new function called highlight to handle just this. I think I can also get it to "flash" on screen for a few seconds (changing border color from red to yellow for 3 seconds should do).

This is just an easy way to visualize the webElements on the page that you want to use locators finding.

I'm unsure how to tag this as a feature and not an issue. Apologies if this caused confusion.

[MexicanAce]

Instead of manipulating the list function, I've created a new function highlight that does a pretty decent job of what I had hoped.

var highlight = function(locator) {
    var xPaths = [];
    var cssBorders = [];

    return browser.findElements(locator).then(function(arr) {
        for (var i = 0; i < arr.length; ++i) {
            getAbsoluteXPath(arr[i]).then(function(result){
                xPaths.push(result);
            });

            arr[i].getCssValue("border").then(function(val) {
                cssBorders.push(val);
            });
        }

        if(arr.length == 0) {
            return "No elements found.";
        }
    }).then(function() {
        var timesFlashed = 10;
        var waitTime = 500;

        for (var t = 0; t < timesFlashed; t++) {
            var borderValue = "5px inset rgb(256, 0, 0)";
            if (t%2 == 1) {
                borderValue = "5px inset rgb(256, 256, 0)";
            }
            for (var i = 0; i < xPaths.length; i++) {
                driver.executeScript("var x = document.evaluate('" + xPaths[i] + "', document, null, XPathResult.ANY_TYPE, null); var xx = x.iterateNext(); xx.style.border = '" + borderValue + "';"); 
            }

            driver.sleep(waitTime);
        }
    }).then(function() {
        for (var j = 0; j < cssBorders.length; j++) {
            driver.executeScript("var x = document.evaluate('" + xPaths[j] + "', document, null, XPathResult.ANY_TYPE, null); var xx = x.iterateNext(); xx.style.border = '" + cssBorders[j] + "';");   
        }

        return "Highlighting Completed.";
    });
};

Again, it uses the getAbsoluteXPath function outlined above.

I've only tested it against http://angularjs.org/ with the highlight(by.binding('')) command and it worked just fine.

There's still more stuff to add, but I guess I'll create a PR for it.

Don't forget to add the global.highlight = highlight; line near the end.

[malviya84]

Hi ,
this is more helpful than a list command.I am also looking forward to use it, so I also tried to use elementexplorer.js, but for me all commands are returning null to me.Can you help me to understanding login of this.

Thanks
Amit

[cnishina]

@mgiambalvo should we close this since blocking proxy will do the highlighting?

[heathkit]

Blocking Proxy will do highlight and delay for element finders, but I think this still might be useful as a feature specific to element explorer.