Track the mouse position in Protractor

mouse-plugin.js

// Hook in to `addEventListener` to track the mouse and display it as a circle
exports.onPageLoad = function() {
  return browser.executeScript(function() {
    (function() {
      var EventSniffer = function() {
        this.history = [];
        this.callbacks = {};
        this.minCacheSize = 100;
        this.maxCacheSize = 500;
      };

      EventSniffer.prototype.handle = function(name, e) {
        if (this.history.indexOf(e) > -1) return;

        this.addToHistory(e);
        this.trigger(name, e);
      };

      EventSniffer.prototype.trigger = function(name, e) {
        if (!this.callbacks[name]) return;

        this.callbacks[name].forEach(function(cb) {
          cb(e);
        });
      };

      EventSniffer.prototype.addToHistory = function(e) {
        if (this.history.length >= this.maxCacheSize) {
          this.history = this.history
            .slice(this.history.length - this.minCacheSize);
        }

        this.history.push(e);
      };

      EventSniffer.prototype.on = function(name, cb) {
        if (!this.callbacks[name]) {
          this.callbacks[name] = [];

          // Add a dummy event listener incase the page hasn't
          document.addEventListener(name, function() {});
        }

        this.callbacks[name].push(cb);
      };

      EventSniffer.prototype.install = function() {
        var proto = EventTarget.prototype;
        var oldAEL = proto.addEventListener;
        var self = this;

        proto.addEventListener = function(name) {
          // Add our own event listener first
          oldAEL.call(this, name, function(e) {
            self.handle(name, e);
          });

          // The add the users listener as normal
          return oldAEL.apply(this, arguments);
        };
      }

      var MouseTracker = function() {
        this.indicator = document.createElement('div');
        this.indicator.setAttribute('class', 'mouse-tracker');
        this.style = document.createElement('style');
        this.style.innerHTML = [
          '.mouse-tracker {',
            'width: 0.5em;',
            'height: 0.5em;',
            'background: orange;',
            'box-shadow: 0 0 0 1px white;',
            'border-radius: 50%;',
            'position: absolute;',
            'top: 0;',
            'left: 0;',
            'z-index: 100000;',
            'pointer-events: none;',
            'transform: translate(-50%, -50%);',
            'transition: background-color 0.2s linear;',
          '}',

          '.mouse-tracker.mousedown {',
            'background: rgba(0, 128, 0, 0.5);',
          '}',

          '@keyframes mouse-tracker-click {',
            'to {',
              'width: 5em;',
              'height: 5em;',
              'opacity: 0;',
            '}',
          '}',

          '.mouse-tracker .click {',
            'width: 0.5em;',
            'height: 0.5em;',
            'border: 1px solid rgba(128, 128, 128, 1);',
            'box-shadow: 0 0 0 1px rgba(256, 256, 256, 1);',
            'border-radius: 50%;',
            'position: absolute;',
            'top: 50%;',
            'left: 50%;',
            'pointer-events: none;',
            'transform: translate(-50%, -50%);',
            'animation: 1s mouse-tracker-click;',
          '}'
        ].join('\n');
      };

      MouseTracker.prototype.move = function(x, y) {
        this.indicator.style.left = x + 'px';
        this.indicator.style.top = y + 'px';
      };

      MouseTracker.prototype.click = function() {
        var click = document.createElement('div');

        click.setAttribute('class', 'click');
        click.addEventListener('animationend', function() {
          click.parentElement.removeChild(click);
        }, false);

        this.indicator.appendChild(click);
      };

      MouseTracker.prototype.mousedown = function() {
        this.indicator.classList.add('mousedown');
      };

      MouseTracker.prototype.mouseup = function() {
        this.indicator.classList.remove('mousedown');
      };

      MouseTracker.prototype.install = function() {
        document.body.appendChild(this.indicator);
        document.head.appendChild(this.style);
      }

      var tracker = new MouseTracker();
      var sniffer = new EventSniffer();

      sniffer.install();
      tracker.install();

      sniffer.on('click', function(e) {
        tracker.click();
      });
      sniffer.on('mousemove', function(e) {
        tracker.move(e.x, e.y);
      });
      sniffer.on('mousedown', function(e) {
        tracker.mousedown();
      });
      sniffer.on('mouseup', function(e) {
        tracker.mouseup();
      });
    })();
  });
};

// Slow things down a bit
exports.waitForCondition = function() {
  return browser.driver.sleep(500).then(function() { return true; });
};

protractor-conf.js

var config = {
  plugins: [{
    path: './mouse-plugin.js',
  }]
}

Works like a charm! I am using this plugin with protractor and Angular 5 app (2+). Thank you for this great code!

I like this plugin. Unfortunately it works only with chrome. In firefox I don't see the mouse circle.

awesome plugin!!

This plugin works very well unless you try to use passive event listener.

It clones every event without watching the options argument; therefore every event becomes active and may draw an error in your console.

I recommend changes from line 52:

-	proto.addEventListener = function (name) {
+	proto.addEventListener = function (name, listener, options) {
		// Add our own event listener first
		oldAEL.call(this, name, function (e) {
			self.handle(name, e);
-		});
+		}, options);

		// The add the users listener as normal
-		return oldAEL.apply(this, arguments);
+		return oldAEL.apply(this, [name, listener, options]);
	};

this doesn't work for me :( using "protractor": "^5.4.2"

I'm new with protractor, How to use this plugin? inside the config.js file or inside the test case file?

Where have you been all my life. This is better than sliced bread.

I am new to protractor, can anyone help me out. How to use this plugin?
I have created mouse-plugin.js file and added its path in protractor.conf.js file but it is not working.

Sorry @kiko010 @Sakshi-1911 I wrote this in a hurry years ago and haven't used Angular or Protractor much since. If you need help maybe @scottwalter-nice would know how to get it working?

I see the circle appear the very first time my code clicks anything, then it vanishes, anyone have any ideas?