Return value from javascript onclick to variable or change global variable with onclick

Question

I'm trying get the text value of clicked element (any element) on the website, return it from javascript to Selenium (Python) and use that information to put every clicked element in my log. Is that even possible to achieve using selenium and javascript?

This function can display the element, but won't return anything (normal onclick behaviour). I know that I can read text from alert pop-ups using selenium, but it will make my browser flash on every mouse click.

function getEl()
{
   var ev = arguments[0] || window.event,
   origEl = ev.target || ev.srcElement;
   alert(origEL.text)
}

document.onclick = getEl;

Trying to access javascript console.log doesn't seem to work in Selenium right now so using console.log is not the right answer.

I can detect when a certain element was clicked by writing something to localstorage on click event and then checking the value in localstorage in python. But it's not universal. I need to find and set up every element that I want to observe.

function find_element() 
{
   aTags = document.getElementsByTagName("a");
   searchText = "comments";
   for (var i = 0; i < aTags.length; i++) 
   {
      if (aTags[i].textContent == searchText) 
      {
         found = aTags[i];
         return found;
      }
   }
}

found=find_element();

function saveEvent()
{
   localStorage.setItem("ZAD1.1", "1"); 
}

if(found)
{

   found.addEventListener("click",saveEvent,false);

   var x=localStorage.getItem("ZAD1.1");
   if (x=="1")
   {
       count="comments link was clicked";
       return count;
   } 
}

After that you invoke javascript from python selenium

z=driver.execute_script(javascript1)
if z=="comments link was clicked":
        #do something with this information

Is there any way to get information about objects clicked by user in the browser? I'm using Selenium with Firefox.

EDIT: You can get every clicked element by using getEL() and writing every onclick output in localstorage.

localStorage.setItem(origEl.text, origEl.text);

Create local storage and then write temp as array or string

var temp="VISITED LINKS : "
for (var i = 0; i < localStorage.length; i++){
temp +=localStorage.getItem(localStorage.key(i))+" ";}
return temp

Then you can return the entire list to python.

Can you think of any other way to send clicked objects to python?

Answer 1

If I understand this correctly, you're just trying to get notified when any element on the page is clicked, so that you can do something with that information?

You want a global event handler.

In pure vanilla JavaScript, that goes like this:

document.body.onclick = function(e) {
    console.log(e);           // `e` is the click event
    console.log(e.target);    // `e.target` is the element that was clicked
    // do something with this information
}

When you want to "do something with this information", you have a number of options, as you seem to have worked out. The best thing you can do here is to send an AJAX request to a HTTP server you control, whereupon the receiving server-side script could log the details to file (or whatever you do with it).

Your code indicates that when something is clicked, you want to save that to localStorage - I'd recommend you save stringified base64 encoded JSON, containing the target element of every click event. Here's some code you can use to do that:

/**
 * Constant. This is the (string) key name of the 
 * save location in localStorage.
 */
var locationName = "myNamespace_clicks";

/**
 * Given an object, will JSON- and base64-encode
 * that object so it can be stored in localStorage.
 */
function encodeForStorage(dataObject) {
    return btoa(JSON.stringify(dataObject));
}

/**
 * Given a string from localStorage, will decode that
 * string from JSON and base64 to a JS object.
 */
function decodeStoredObject(dataString) {
    return JSON.parse(atob(dataString));
}

/**
 * Given an item, will add this item to the data stored
 * in localStorage, and then save the new data.
 */
function addItemToStorage(item) {
    var rawStoredData = localStorage.getItem(locationName);
    var dataObject;

    if(rawStoredData) {
        dataObject = decodeStoredObject(rawStoredData);
    }
    else {
        dataObject = {
            "clicks": []
        }
    }

    dataObject["clicks"].push(item);

    localStorage.setItem(locationName, encodeForStorage(dataObject));
}

document.body.onclick = function(e) {
    addItemToStorage(e.target);
}